La consistencia es clave: cómo construir un sistema de diseño de Figma

Es de conocimiento común entre los diseñadores que un buen sistema de diseño puede tener un gran impacto en la calidad de los productos que enviamos y el ritmo al que podemos desarrollarlos. Dado que la necesidad de crear un sistema de diseño integral se ha aclarado muchas veces, con empresas como Google, GitHub, IBM y otras usándolos para crear mejores productos a un ritmo mayor, la pregunta ha pasado de "¿Por qué deberíamos tener un diseño ¿sistema?" a "¿Cómo podemos crear un gran sistema de diseño?"

Entonces, ¿qué es exactamente un sistema de diseño? Will Fanguy lo define como "una colección de componentes reutilizables, guiados por estándares claros, que se pueden ensamblar para crear cualquier cantidad de aplicaciones". Un sistema de diseño puede incluir no solo una biblioteca de componentes de interfaz de usuario y una biblioteca de patrones, sino también una guía de estilo, mejores prácticas, código y más. Al igual que el anteproyecto de un arquitecto para un edificio, un sistema de diseño también sirve como la "fuente única de la verdad" para el equipo del producto mientras construye los productos, además de ayudar a mantener la coherencia.

GitHub incluso ha ido tan lejos como para compartir su biblioteca de componentes Figma, un gran ejemplo de un sistema de diseño basado en Figma. Las herramientas más extensas como Storybook y Component-Driven Development también son recursos extremadamente útiles para implementar y documentar un sistema de diseño.

Un sistema de diseño mantiene la consistencia del diseño y debería ser útil para todos los involucrados en la creación de un producto. Es un conjunto de herramientas que ayuda a los diseñadores a crear nuevas pantallas, flujos y prototipos con mayor rapidez. Un buen sistema de diseño ayuda a los desarrolladores a comprender la lógica detrás de las decisiones de diseño y ayuda a crear un producto más cohesivo. Acelera el proceso de diseño y permite a los diseñadores más tiempo para experimentar.

Para aquellos diseñadores que trabajan con Figma, veamos cómo la creación de una biblioteca de componentes en Figma puede ser una parte clave de un sistema de diseño integral.

El poder de una biblioteca de componentes

A veces, puede ser contraproducente invertir en la creación de un sistema de diseño demasiado pronto. En las primeras etapas del diseño de un producto, el proceso aún es fluido. Por ejemplo, si se está experimentando con dos barras de navegación principales, no tendría sentido agregar ambas a una biblioteca de componentes, ya que confundiría a todos en el equipo. Es mejor esperar hasta que el diseño del producto se haya asentado, preferiblemente probado y algo finalizado.

Si un producto es maduro y no tiene una biblioteca de componentes existente, el sistema de diseño ya debería estar determinado por la implementación actual. Pero aún no está codificado. En este punto, sería ventajoso definir los patrones comunes de UX y destilar el producto en un conjunto de componentes que se usan regularmente en todo el producto. Además, es ideal si la biblioteca de componentes se mantiene en una ubicación central que sea fácilmente accesible para todos.

Un sistema de diseño es principalmente un conjunto de herramientas

Tratar de usar un sistema de diseño como un juego de herramientas es una gran prueba de fuego para su efectividad. Si varios diseñadores lo usan regularmente para acelerar su proceso, está haciendo un buen trabajo. Si los desarrolladores pueden hacer referencia a él para colores, estilos tipográficos o para trabajar con menos aportes de los diseñadores, también es una buena señal.

Por lo general, no es útil incluir componentes muy complejos o que solo se pueden usar una o dos veces en el producto. Cuanto más reutilizable es algo, más pertenece a un sistema de diseño.

Figma lanzó recientemente análisis de sistemas de diseño para organizaciones, donde los equipos pueden ver qué tan efectivas son las diferentes partes de un sistema de diseño y ayudar a optimizarlo.

Por qué Figma es excelente para crear una biblioteca de componentes

Figma es una poderosa herramienta de diseño con muchas características excelentes, pero hay un subconjunto de elementos que se vuelven particularmente útiles cuando se diseñan productos complejos: estilos , componentes y archivos de biblioteca . Estas características ayudan a mantener los sistemas de diseño actualizados, ayudan a mantener la coherencia entre los diseños y proporcionan un acceso directo para actualizar varios diseños desde una ubicación central.

• Los estilos son colores y tipos de letra (fuente, tamaño, peso, etc.) que se definen en un lugar y se pueden aplicar a muchos objetos.
• Los componentes son cosas como botones o burbujas de chat y se pueden crear a partir de estilos, objetos como formas y texto, y otros componentes.
• Los archivos de biblioteca permiten compartir estilos y componentes entre varios archivos y con un equipo u organización.

Figma tiene la colaboración y el intercambio en su núcleo. Los archivos de diseño pueden ser editados por cualquier persona en el navegador, compartidos libremente y se actualizan en tiempo real ya que varios usuarios pueden editarlos simultáneamente. Esto abre el sistema de diseño a una colaboración más eficiente no solo entre los diseñadores sino también con los desarrolladores y otras partes interesadas.

Creación de un archivo de biblioteca

En Figma, se puede crear un archivo de biblioteca que servirá más o menos como el inicio de un sistema de diseño. Aquí, podemos definir estilos y componentes que luego se comparten en todo el equipo u organización y se utilizan en múltiples diseños. Los estilos y los componentes se pueden actualizar en un solo lugar, y estos cambios se pueden incorporar automáticamente a todos los archivos de diseño individuales.

Esto tiene un par de ventajas clave:

1. Velocidad Ahorra tiempo al eliminar la necesidad de que un diseñador actualice potencialmente cientos de diseños manualmente. Al tener los componentes administrados en un solo archivo de biblioteca, la actualización de un color en un lugar puede propagarse a través de todos los diseños creados con la biblioteca de componentes con solo unos pocos clics.
2. consistencia Reduce la probabilidad de error al automatizar la tarea.

Organización

Al construir un sistema de diseño en Figma, es útil establecer paralelismos entre las herramientas y la teoría. Por ejemplo, Styles en Figma podría considerarse el nivel más básico, incluso más básico que Atoms en el modelo Atomic Design de Brad Frost. Estas son cosas como el color y la fuente que ayudan a formar la estética del producto.

Un componente Figma simple se consideraría un átomo en el modelo de diseño atómico, por ejemplo, un botón. Un componente de Figma más complejo se consideraría una molécula u organismo , que luego se utiliza para construir plantillas y páginas .

Algunas de las cosas más útiles para tener en una biblioteca de componentes son:

• Colores
• fuentes
• Activos de marca, logotipo, etc.
• Navegación
• Botones
• Notificaciones
• modales
• Elementos de formulario y validación

Construyendo un sistema de diseño en Figma – Primeros pasos

En este ejemplo, crearemos un formulario de inicio de sesión simple y explicaremos los componentes y estilos que se pueden inferir y usar.

Primero, pensemos en los componentes y estilos que probablemente se puedan reutilizar de este formulario. Hay una tarjeta que contiene un logotipo, campos de formulario y un botón. También hay tres estilos de fuente y algunos colores y efectos diferentes que pueden ser útiles.

Una vez que los Estilos y Componentes que se incluirán se identifican en la Biblioteca como se indicó anteriormente, es hora de crear un archivo de Biblioteca y comenzar a llenarlo.

Crear un archivo de biblioteca de Figma

Cree un nuevo archivo y publíquelo como una biblioteca. Una vez que se crea un nuevo archivo, haga clic en la pestaña Activos , haga clic en el ícono Biblioteca y luego haga clic en Publicar . Esto publica los estilos y componentes en el archivo de biblioteca para que puedan usarse en otros archivos.

Ahora se pueden crear estilos y componentes en el archivo de la biblioteca y se pueden usar en otros archivos y actualizar desde el archivo de la biblioteca central.

Cómo crear un estilo Figma

La creación de estilos es la misma en los archivos de biblioteca que en cualquier otro archivo, como se describe en los pasos a continuación.

• Seleccione el objeto del que desea crear un estilo. Los estilos pueden ser colores, propiedades de texto, efectos y cuadrículas de diseño.
• Haga clic en el botón Estilos (cuatro puntos en un cuadrado) junto a la propiedad que se usará en el nuevo estilo, luego haga clic en el botón más en la ventana emergente para crear un nuevo estilo.

• Esto mostrará un modal para nombrar el estilo. Suele ser útil utilizar un nombre semántico en lugar de un nombre de presentación, por ejemplo, "Color primario" en lugar de "Verde" para que quede más claro para qué se pretende utilizar el Estilo.
• Publique el estilo en la biblioteca de su equipo utilizando la ventana emergente que aparece en la parte inferior derecha de la pantalla, o repita los pasos realizados para publicar la biblioteca en primera instancia.

Aquí está el tutorial de Figma sobre cómo crear un estilo .

Cómo crear un componente Figma

Crear un componente también es muy fácil. Simplemente seleccione el objeto del que desea crear un componente, luego haga clic derecho y seleccione "Crear componente".

Los componentes se publican en la biblioteca del equipo de la misma forma que los estilos.

Aquí está el tutorial de Figma sobre cómo crear un componente .

Una vez que se han creado algunos estilos y componentes, el archivo de la biblioteca se puede compartir con el equipo y los estilos y componentes se pueden usar en cualquier número de archivos.

Uso de la biblioteca de Figma

Para usar estos estilos y componentes en otro archivo, el archivo de biblioteca debe vincularse a un archivo de diseño existente en el que queremos usar los nuevos estilos y componentes. Simplemente abra el modal Bibliotecas nuevamente (Activos, ícono de Biblioteca) y encienda el interruptor de palanca para que se utilice el archivo de la biblioteca.

La biblioteca de componentes ahora está lista para ser utilizada. Los componentes se pueden colocar arrastrándolos al archivo de diseño desde la pestaña Activos a la izquierda de la pantalla. Los estilos de biblioteca se pueden usar de la misma manera que los estilos locales al cambiar estilos de texto, colores de relleno, trazos, efectos y cuadrículas de diseño.

Cuando los componentes y estilos se actualizan en la biblioteca, los archivos que los utilizan deben aceptar los cambios. Figma mostrará una notificación cuando se realicen actualizaciones en el archivo de la Biblioteca, dando la opción de publicarlas. Una vez publicados, todos los archivos que utilicen los componentes y estilos deberán aceptar el cambio mediante una notificación similar o la pestaña de activos para actualizar sus componentes y estilos. Esto evita que los cambios se publiquen y actualicen de forma inesperada.

Más allá de construir una biblioteca de componentes en Figma

Figma solo cubre la parte de la biblioteca de componentes de un sistema de diseño completo. Para un sistema de diseño completo, vale la pena considerar otras piezas que podrían incorporarse, como pautas de marca, guías de estilo de contenido y documentación para desarrolladores.

La guía de estilo de contenido de Mailchimp es un excelente ejemplo, ya que detalla el tono de voz y la marca a través del contenido. GitHub tiene una excelente documentación sobre cómo funciona su biblioteca de componentes en el código, y el Sistema de diseño de materiales de Google también tiene algunos ejemplos excelentes de cómo documentar la lógica detrás del sistema de diseño.

Como herramienta de diseño, Figma ha madurado mucho y constantemente se agregan nuevas funciones. La adición de un sistema de diseño de Figma con análisis integrado al que puede acceder toda la organización es un gran paso adelante. La adición de estas características indica que Figma pretende ser una herramienta de diseño completa y completa, y está en camino de lograrlo.

• • •

Lectura adicional en el blog de diseño de Toptal:

• El poder de Figma como herramienta de diseño
• Optimice el diseño colaborativo con Figma
• Mini tutorial: aprovechar las funciones de Figma para todo el proceso de diseño
• Mini tutorial: trabajar con componentes de botones de Figma
• Domina tu oficio con estas herramientas UX superiores