¿Cómo crear bibliotecas de estilos y componentes en Figma? ¿Cómo usarlos en tus archivos y compartirlos con otros miembros del equipo? Encontrarás la respuesta en el siguiente artículo. Al usar estilos, es más fácil mantener la consistencia en los proyectos de equipo. Sigue leyendo.
Estos son conjuntos de propiedades que se pueden aplicar a capas en proyectos. Para crear un estilo, primero debes seleccionar el objeto cuyas propiedades deseas guardar. Luego, haz clic en el icono de Estilos en el panel de Propiedades junto a la propiedad seleccionada, y luego haz clic en el icono +.
Se abrirá una ventana donde deberás ingresar el nombre del estilo que estás creando. Haz clic en Crear estilo.
Verás los estilos creados en el panel de Propiedades cuando no haya objetos seleccionados.
En el panel de Editar estilos, puedes agregar una descripción y editar las propiedades de cada estilo. Siempre que realices cambios en las propiedades del estilo seleccionado, esos cambios se aplicarán a todos los objetos que lo utilicen.
Puedes crear los siguientes estilos:
Estilos de color (pinturas) – para rellenos y contornos, texto y fondos, e incluso para imágenes y degradados.
Estilos de texto – gracias a los estilos de texto, puedes definir estilos para encabezados y texto principal. Puedes aplicar estilos de texto a un bloque completo de texto o solo a parte del texto en el bloque. Puedes definir: familia de fuentes, tamaño, altura de línea, espaciado.
Nota: con los estilos de texto no puedes establecer la alineación del texto.
Efectos – aquí puedes definir atributos de sombra y desenfoque.
Rejillas de diseño – crear estilos de rejillas de diseño es útil si deseas duplicar una cierta estructura en múltiples proyectos.
Para aplicar un estilo a la capa activa, haz clic en el icono de Estilos en el panel de Propiedades junto a la propiedad seleccionada, y selecciona el estilo de la lista.
Para eliminar un estilo de la capa activa, haz clic en Desvincular estilos. Esto es útil cuando deseas realizar cambios en un objeto sin interferir con el estilo.
Tarea 6.1. Practica creando estilos en Figma. Crea estilos para los encabezados de sección en la página de inicio, nombres de productos y precios.
Estos son los bloques de construcción de tus diseños que puedes reutilizar. Pueden ser íconos, botones o elementos más complejos. Los componentes ayudan a mantener la consistencia en tus diseños y te permiten realizar cambios rápidamente en múltiples archivos y proyectos.
Para crear un componente, primero debes seleccionar las capas que formarán el componente y luego hacer clic en Crear componente en la Barra de herramientas.
Las capas del componente se incrustarán en un marco especial y se resaltarán en púrpura, para que puedas diferenciarlas fácilmente de otras capas en el panel de Capas.
Los componentes toman nombres automáticos. Puedes renombrar componentes en la pestaña de Capas. Al igual que en el caso de otras capas, haz doble clic en el nombre. Después de seleccionar un componente en el panel de Propiedades, puedes agregar una descripción del componente y un enlace de documentación para los miembros del equipo.
Puedes ver los componentes en la pestaña de Activos en el panel de Capas.
Tarea 6.2. Practica creando componentes en Figma. Crea los siguientes componentes:
Cuando creas estilos y componentes, solo tienes acceso a ellos en el archivo actual. Para usar estilos y componentes en otros archivos, puedes publicarlos en la biblioteca. La opción para compartir estilos está disponible en la Barra de herramientas – expande el menú junto al nombre del archivo y haz clic en Publicar estilos y componentes.
Acabas de aprender cómo usar bibliotecas en Figma. Lee también: ¿Qué hace un diseñador UX?
Si te gusta nuestro contenido, únete a nuestra comunidad de abejas ocupadas en Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Un diseñador gráfico y de UX que transmite en el diseño lo que no se puede expresar con palabras. Para él, cada color, línea o fuente utilizada tiene un significado. Apasionado por el diseño gráfico y web.
¿Eres un freelancer que busca formas de promocionar su portafolio? Hoy en día, no solo…
La gestión financiera digital y la contabilidad en línea se han vuelto cada vez más…
Los estatutos del proyecto son el pan y la mantequilla de la gestión de proyectos.…
Las organizaciones de diversas industrias establecen relaciones con posibles empleados, proveedores y socios todos los…
Hay más que suficientes técnicas de gestión por ahí. Algunas parecen intrincadas, mientras que otras…
¿Sabes cómo empezar una ONG? ¿Has estado pensando en ello? ¿Eres consciente de lo que…