Más flexibilidad con botones en boceto

Uso de símbolos anidados y complemento de botón Relabel

Ya sea que diseñe una pequeña aplicación o un portal web completo, los botones están en todas partes. Afortunadamente, podemos usar Símbolos para mantener nuestro flujo de trabajo SECO. Pero incluso si tiene solo 3 tipos diferentes de botones, es probable que termine teniendo más de 30 símbolos, considerando todos los diferentes colores y estados. ¿No sería bueno tener solo un símbolo para todos los botones?

Gracias a Jon Moore y Alberto Orsini, uno puede aprender a usar Símbolos Anidados para lograr exactamente eso.

Bueno, no quiero repetir estos artículos, así que resumiré algunas cosas. Esto es básicamente cómo se estructura el símbolo de botón anidado:

Capa de texto: la etiqueta de su botón
Este es un simbolo
Capa de estado: normal, flotante, presionada, enfocada, deshabilitada, etc.
Este es un simbolo
Capa de color: color primario, color secundario, etc.
Este es un simbolo
Capa base: la forma de su botón
Esta es una máscara para las capas anteriores
Capa de sombras: tipos de sombras
Este es un simbolo

Mantengo una capa de sombra en la parte inferior de la pila. De esta manera puedo cambiar la sombra independientemente de la capa de estado del botón.

Así es como estructuro el símbolo anidado
Consejo profesional:
Asegúrese de que los símbolos de la misma categoría tengan el mismo tamaño. Por ejemplo, todos mis símbolos de color son 100px x 100px, mientras que todos mis símbolos de sombra son 100px x 50px. De esa forma, solo los símbolos que realmente necesita se mostrarán en el panel desplegable correspondiente.

He estado usando esta técnica durante algún tiempo y llegué a la conclusión de que no responde a una pregunta principal:

¿Cómo puedo cambiar el texto en el botón mientras mantengo el relleno?

Intro: Complemento del botón Reetiquetar

En un artículo anterior escribí sobre lo increíble que es este complemento. Y de nuevo, en combinación con esta técnica, demuestra ser indispensable.

Todo lo que hago de manera diferente al método descrito en los artículos anteriores es mantener la capa de texto separada del símbolo del botón.

Creo un nuevo grupo con el símbolo del botón y la capa de texto. Para cambiar el color del texto, uso los estilos de texto.

Y ahora, usando el complemento Relabel Button, puedo cambiar la etiqueta a lo que quiera sin perder mi relleno.

El diálogo de entrada del complemento Relabel ButtonTodavía tengo el control de todas las anulaciones de símbolos anidados

Mira el GIF donde muestro cómo funciona ...

Botones con iconos

También puede usar la misma técnica para botones con iconos. No importa en qué lado de la etiqueta coloque su icono. El complemento funciona en ambos sentidos.

El botón permanece igual y yo uso los mismos símbolos de color para los iconos.
Consejo profesional:
Estoy usando una anulación anidada para los iconos también. El icono es una máscara para los mismos símbolos de color que estoy usando en todo el archivo. Presentado por primera vez por Francesco Bertocci en este artículo. Para una comprensión avanzada de esta funcionalidad, consulte el siguiente artículo de Jon Moore.

Conclusiones

Me tomó bastante tiempo hacer esto bien, pero si desea mantener el control de sus márgenes, esta es una buena manera de hacerlo. Especialmente al desarrollar guías de estilo, ahorra una gran cantidad de tiempo si configura sus símbolos correctamente.

Otra gran lectura sobre la organización de Símbolos por Lloyd Humphreys:

Si tiene mejores formas de hacer las cosas en boceto, hágamelo saber.

Encuentra más de nuestros escritos en nuestro blog.

Si encuentra útil este artículo, presione el a continuación para que pueda llegar a más personas.