En la séptima clase del curso de iniciación a Figma vamos a ver cómo los componentes y los estilos nos van a ayudar a ahorrar tiempo en nuestros diseños.
Los componentes son elementos que se pueden reutilizar. Se pueden crear componentes a partir de capas o grupos de capas que hemos diseñado: pueden ser botones, iconos, o diseños más complejos como pies de página o menús.
Cada vez que realicemos un cambio en las propiedades de un estilo, como cambiar el color del texto de rojo a azul, Figma aplicará estos cambios a cualquier objeto que tenga ese estilo aplicado. ¡Vamos a verlo en vivo!
Ya lo veis, los componentes y los estilos nos van a ahorrar un montón de tiempo a la hora de crear nuestros diseños.
En los componentes siempre hay dos elementos: Un componente maestro que define las propiedades del componente y una o varias instancias, que son una copia del componente que se usa en los diseños.
Las instancias están enlazadas al componente maestro y si cambias una propiedad en el componente maestro, se cambiará también en la instancia enlazada. Los estilos te permiten definir un conjunto de propiedades para un objeto, que puede ser reutilizado en varios diseños.
Se puede usar los estilos para definir el color, el texto y los efectos aplicados a los objetos; o para definir la estructura y la apariencia de las cuadrículas de diseño.
No hay que crear los estilos antes de empezar a diseñar: primero aplicamos a un objeto las propiedades que necesitemos y después creamos el estilo a partir de esas propiedades que ya hemos aplicado.
Podemos crear estilos para:
- Colores: relleno, trazo, color de fondo.
- Texto: fuente, tamaño, altura de línea, espaciado.
- Efectos: sombra paralela, sombra interior, desenfoque de capa, desenfoque de fondo.
- Grids: fila, columna, grid.
Para aprender bien cómo funcionan los componentes, vamos a realizar algunos ejercicios:
- Crear un botón azul con texto blanco. Convertir el botón en componente. Crear una instancia de ese componente. Cambiar el color de fondo del componente maestro a naranja para ver cómo la instancia también cambia.
- Cambiar el color del texto de la instancia a negro. Después, resetear la instancia para que vuelva a tener el texto blanco.
- Desvincular (detach) la instancia. Cambiar el color del componente maestro y comprobar que ya no cambia el color de la instancia (porque ya no es una instancia, ya que la hemos desvinculado).
Para aprender bien cómo crear y aplicar estilos, os propongo los siguientes ejercicios:
- Crear un triángulo que tenga un relleno de color amarillo oscuro. En la sección Fill del panel de propiedades, selecciona el botón con el icono de los cuatro puntitos (Style), añade el relleno a los estilos de color y nómbralo como «Color primario». Crea un rectángulo y aplícale el estilo «Color primario».
- Crear un texto que tenga 5 párrafos:
- Al primer párrafo darle un tamaño de 36 pt y poner un tipo de letra Roboto Medium. Selecciónar y crear un estilo en la sección Text del panel de propiedades que se llame «H1 Título 1 Móvil».
- Al segundo párrafo, dar un tamaño de 28 pt y poner un tipo de letra Roboto Medium. Seleccionar y crear un estilo que se llame «H2 Título 2 Móvil».
- Al tercer párrafo, darle un tamaño de 16 pt y poner un tipo de letra Roboto Regular. Selecciónar y crear un estilo que se llame «Párrafo Móvil».
- Al cuarto párrafo aplicar el estilo «H2 Título 2 Móvil».
- Al quinto párrafo aplicar el estilo «Párrafo Móvil».
- Seleccionar una de las palabras del último párrafo. Añadir una decoración de subrayado y crear un estilo con esa propiedad para usar en los enlaces.
- Crear un rectángulo y aplicar un efecto de sombra paralela. Crear un estilo con ese efecto. Crear una estrella y aplicar el estilo de sombra que se acaba de crear.
- En un frame, crear un Layout Grid de 12 columnas y crea un estilo de Layout Grid con esas propiedades de Grid.
¡Ya lo veis! Con Figma podemos crear componentes y estilos para conseguir que nuestros diseños sean coherentes y ahorraremos mucho tiempo a la hora de diseñar, ya que podremos reutilizar nuestros diseños de una manera muy práctica.
Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección! :)
Todos los capítulos de este curso:
- Curso Figma #1. Introducción
- Curso Figma #2. Entorno de trabajo
- Curso Figma #3. Formas y herramientas
- Curso Figma #4. Textos e imágenes
- Curso Figma #5. Capas
- Curso Figma #6. Auto Layout, Constraints y Layout Grids
- Curso Figma #7. Componentes y estilos
- Curso Figma #8. Prototipado y exportar
- Curso Figma #9. Team Library
- Curso Figma #10. La comunidad de Figma