En esta ocasión, nos gustaría hablar de la importancia que tiene para nosotros tener en archivos distintos el Kit UI / biblioteca de componentes y los diseños.
Separar esto es muy importante para poder enlazar el Sistema de Diseño a través de bibliotecas y mejorar la eficiencia del proceso de diseño. Al tener los componentes en una biblioteca, podemos acceder a ellos rápidamente desde cualquier archivo de Figma en el que estemos trabajando. Además, si se realiza un cambio en un componente de la biblioteca, este se actualizará automáticamente en todos los diseños que lo contienen, lo que evita tener que actualizar manualmente cada uno de ellos, mejorando así la organización, gestión y eficiencia del proceso de diseño.
Siguiendo esta premisa, a veces nos encontramos con proyectos en los que la biblioteca de componentes y los diseños están en el mismo archivo, lo cual requiere separarlos para obtener los beneficios mencionados.
· y también aclarar cómo publicar la biblioteca y sincronizar los diseños con la misma. Los detallamos a continuación:
- InstaRelinker: Este plugin sirve para inspeccionar todo lo que seleccionemos y poder identificar qué componentes y estilos están en remoto y poder sustituirlos por los de nuestra biblioteca local.
✅ Un gran punto a favor de este componente es que también busca en las capas que están ocultas.
- Style Organizer: El objetivo del plugin es el mismo que el anterior, solo que solo con los estilos.
✅ Respecto a InstaRelinker, da más opciones visuales de edición de estilos.
❌ En cambio, no busca en capas ocultas, por lo que pueden surgir problemas después de estilos o librerías “missing”.
- Styler: Este plugin sirve para copiar estilos locales (colores, tipos, elevaciones…) y pegarlos en otro archivo distinto.
- Hidden Finder: Sirve para ver qué elementos están ocultos, dando la posibilidad de seleccionarlos y visualizarlos uno por uno.
- Find Hidden Layers: Selecciona todas las capas que están ocultas en la página donde nos encontramos.
Una vez comprobado que todos los diseños están enlazados a los estilos y los componentes, procedemos a hacer la división del archivo en: Kit UI y diseños, siguiendo estos pasos:
- En el archivo original ⇒ publicar librería y estilos.
- Crear nuevo archivo (en blanco).
- En el nuevo archivo, en assets ⇒ Clicar en “enable” la librería del original (para que coja estilos y componentes de ese archivo/librería)
- Toda página que no sea parte del DS/KIT UI, es decir, los flujos de diseño visual, wireframes, etc., cortarla del original y pegarla en el nuevo (hacer la misma estructura de páginas). Estas páginas deben ir borrándose del original, para que solo se termine quedando el DS/KIT.
En resumen, dividir un archivo de Figma en dos y crear bibliotecas de componentes puede tener varios beneficios:
- Mejora la organización y la gestión del proceso de diseño en Figma.
- Facilita la búsqueda y la gestión de componentes específicos.
- Permite realizar cambios en los componentes de forma independiente sin afectar a los diseños que los contienen.
- Proporciona una gestión más clara y eficiente del flujo de trabajo de diseño.
- Aumenta la eficiencia del proceso de diseño y reduce el tiempo dedicado a tareas repetitivas.
Por lo tanto, te animamos a implementar esta práctica en tus proyectos y a compartir tus experiencias con nosotros.
En siguientes publicaciones, hablaremos de la importancia de crear una biblioteca de componentes sólida y robusta y de cómo documentarla.
¡Esperamos que te haya sido de ayuda!
