3. Crear un componente de botón usando lógica de cascada
Ahora pongámonos a trabajar. Abrir un nuevo archivo de diseño en Figma y sígueme. El primer paso es crear lo que yo llamo “componente base” que tendrá todos los elementos de componente de botón más básicos. Este primer paso establecerá las propiedades de tamaño con 3 opciones:
Paso 1 – Base: Primero, cree un marco, agregue una etiqueta y un icono. No tiene que prestar atención a valores específicos, pero puede seguir las medidas en la imagen de muestra de arriba. Para aprovechar al máximo este método, agregue algunas propiedades y la importante función de diseño automático. También es apropiado usar estilos (color y texto) aquí. Si desea hacerlo exactamente como en el ejemplo, siga las instrucciones a continuación:
First, create a frame of any size, add an icon (20x20px) to act as our
leading-icon, and a text (16pt body size/20pt line height) to be our
label. Keep in mind that the icon can be a component of its own, so you
can also add an instance swap feature.Now, add the auto-layout feature (shift+A) and set these values:
- Space between items: 8px
- Horizontal padding: 24px
- Vertical padding: 10px
Set the following frame size constraints (at the top of the sidebar menu):
- Horizontal resizing: FIXED (to adjust to your own UI gridstyle)
- Vertical resizing: HUG
Inside the frame, select the icon frame, and in the sidebar menu panel
add the boolean property "show-leading_icon" in the layer section, so we
can choose whether the button will have a visible icon or not. You can
also add an instance swap property to the icon to change which icon will
be visible.
Now, select the text, and in the layer section of the sidebar menu add
the boolean property "show-label" (so we can make icon buttons).
In the content section, add the text property "label_text" so you can
change the button label with ease
Ahora necesitamos crear dos opciones adicionales para establecer tres tamaños diferentes. Establezca el botón que creó arriba como “medio” talla uno Crea una versión más pequeña y más grande. Nuevamente, si desea crearlo exactamente como el ejemplo, siga estos pasos:
In the "smaller" variant: set the size of the icon to 16x16px.
Set the text/label size to 14pt and line height to 16pt.
Set the vertical padding in the auto-layout to 8px.
Name the variant as "small".In the "bigger" variant: set the size of the icon to 24x24px.
Set the text/label size to 18pt and line height to 24pt.
Set the vertical padding in the auto-layout to 12px.
Name the variant as "large".
Paso 2 – Estilo: Ahora pasemos al segundo paso y comencemos con la lógica de cascada. Elija cualquier opción de base un componente y cópielo y péguelo para crear una instancia del mismo (asegúrese de que sea una instancia y no otro componente; pegarlo en otro marco generalmente ayuda). Ahora seleccione la instancia que acaba de copiar y cree un nuevo componente a partir de ella (ctrl/cmd+alt+K) y asígnele un nombre “estilo”. Las capas de componentes deberían verse así:
Ahora comienza la diversión. En este nuevo componente, haremos algunos ajustes a la capa superior y luego algunos cambios a la capa base del componente. Primero, establezca los límites de tamaño de diseño automático del componente en horizontal = FIJO y vertical = ABRAZO en la barra lateral. A continuación, seleccione la capa base dentro del componente y establezca la restricción horizontal en LLENAR (esto garantiza que el botón se ajuste al tamaño horizontal que establezca).
Con estos ajustes base el componente llenará todo el ancho del contenedor principal, lo que le permitirá ajustar el ancho del botón para que se ajuste a su cuadrícula, lo que le brindará más flexibilidad en términos de diseño. Además, el tamaño vertical se ajusta automáticamente al tamaño de la opción seleccionada, lo que también garantiza que el tamaño vertical se mantenga constante.
Después de eso, vamos a crear dos estilos de botón diferentes: cuadrado y redondeado. Solo crea una nueva variante, asegúrese de seleccionar la capa base dentro del componentey cambie el radio del borde a 200 (haga que sea un número grande para que se redondee sin importar el tamaño del botón). No olvide nombrar las opciones apropiadamente (“cuadrado” Y “redondo”)
Para completar este paso, usemos otra propiedad: la recién agregada (y beta) “exponer propiedades de instancias anidadas”y seleccione la visualización de propiedades de base ejemplo. Al hacer esto, podrá heredar los controles de propiedad realizados en base capa a “estilo” componente. Ahora deberías tener algo como lo siguiente:
Creo que puedes entender lo que está pasando ahora. Los dos estilos de botón (cuadrado y redondeado) heredan las propiedades de tamaño del componente base sin tener que crearlos explícitamente.
Paso 3 – Tipos y Estados: Nuestro próximo y último paso en la escalera en cascada es agregar tipos y estados a nuestro componente de botón. Para comenzar, haga lo mismo que en el paso anterior y seleccione una opción de nuestro estilo componente (puede ser redondo o cuadrado, no importa), cópielo y péguelo, asegurándose una vez más de que es una instancia y no un componente nuevo.
Vamos a crear otro componente usando la instancia copiada, llamémoslo “botón” (dado que este es el último paso, debemos proporcionar el nombre real del bean). Las capas deberían verse así:
Asegúrese de ajustar los límites de diseño automático como lo hicimos en el último paso: configure la restricción horizontal de la primera capa/botón en FIJA y ambas capas dentro (estilo Y base) llenar. No olvides agregar el “exponer propiedades de instancias anidadas” para que pueda administrar fácilmente las propiedades heredadas de los componentes base y de estilo.
A continuación, crearemos diferentes tipos de componentes: contenido, circuito Y textoy dice: inactivo, Peligro Y defectuoso. Por lo tanto, cree dos nuevas propiedades variantes con los nombres apropiados: tipo que para la opción seleccionada debe ser “contenido” Y estadoque debería ser “inactivo”. Ahora vamos a empezar a crear otros estados. Agregue una nueva variante y cambie su color a rojo nombrando su propiedad de estado a “Peligro”. Agregue otra opción, nombre su propiedad estatal “defectuoso”, cambie el color de relleno del botón a gris y la etiqueta/icono a un gris más oscuro (cuando trabajo con estados deshabilitados, suelo cambiar la opacidad al 70%). El componente debería verse así:
Bien, ahora que hemos establecido nuestros estados, copia una de las opciones y nombra su propiedad de tipo como “circuito”. Para refinar nuestros cambios y agregar un nuevo tipo de componente, habrá que adaptarlo en la capa basecambiando el color del ícono y la etiqueta/texto, eliminando su relleno y agregando un trazo del mismo color (tan azul para inactivo estado, rojo para Peligro estado y gris para defectuoso estado). Cree 3 opciones de estado para el tipo de ruta para que nuestro componente tenga 6 opciones:
Finalmente, necesitamos crear nuestro tipo final: texto. Seleccione las 3 opciones de contorno, cópielo y péguelo, cambiando el nombre de la propiedad de tipo a “texto”. Ahora simplemente elimine el trazo de cada una de las opciones de tipo de texto, y listo, su componente de botón debería estar completo:
Paso 4 – ¿Qué hemos logrado?: Entonces, después de todos estos esfuerzos, nuestro componente está listo para usar. Básicamente, como se indicó al principio, creamos un componente con un potencial de 54 variaciones, pero solo usamos 14. Pero no solo eso, todos los cambios que realice en el componente base se reflejan y se aplican a los pasos posteriores del componente. Siéntase libre de experimentar, agregar o eliminar nuevos elementos y propiedades para que pueda ver los cambios en cascada en tiempo real.
Ah, y si está utilizando este componente en un archivo de biblioteca, recuerde esconder V base Y estilo componentes, por lo que solo se puede utilizar el último componente de botón. Esto asegura que los usuarios de la biblioteca solo tengan acceso a la versión final del componente, facilitando su trabajo y reduciendo el riesgo de errores.
