Guía de Storybook para diseñadores de UX

Las organizaciones parecen estar empezando a comprender el papel del diseño en el éxito empresarial. Esto es una buena noticia para los diseñadores: ya sea una empresa consolidada o una startup de rápido crecimiento, las organizaciones centradas en el diseño suelen obtener mejores resultados.

Uno de los factores comunes de éxito de las empresas centradas en el diseño es que se guían por un sistema de diseño para desarrollar productos. Los sistemas de diseño proporcionan a los equipos de producto, incluyendo diseñadores y desarrolladores, componentes y elementos reutilizables que pueden aprovechar para crear experiencias consistentes y accesibles en todos los productos.

Los equipos de desarrollo suelen usar Storybook para crear, probar y documentar componentes de interfaz de usuario de forma aislada para el sistema de diseño de su equipo. Pero no solo es una herramienta excelente para los desarrolladores, sino que los diseñadores también pueden beneficiarse de Storybook para colaborar con los equipos de ingeniería.

Storybook cubre un vacío en el ámbito de las bibliotecas de componentes. Si colaboras con tus equipos de ingeniería y usas Storybook, podrás integrar Storybook con Figma y garantizar la coherencia en todo el sistema de diseño de tu equipo. Así es como Storybook te beneficia como diseñador.

Entendiendo Storybook para diseñadores de UX

Storybook es una plataforma para el desarrollo, las pruebas y la documentación de IU. Ofrece un taller frontend para desarrollar componentes y páginas de IU de forma aislada. Considérelo como un entorno de pruebas donde puede experimentar con la creación de nuevos componentes de IU sin afectar a su aplicación principal.

Storybook permite a los desarrolladores probar diferentes casos de uso para cada componente, como varios estados clave, que podrían ser más difíciles de reproducir en una aplicación. Posteriormente, se pueden guardar fácilmente esos estados como historias, a las que se puede recurrir durante las pruebas y la documentación.

Comparación con Figma

Según la encuesta de herramientas de diseño de UX Tools de 2023, Figma es la herramienta de diseño principal más popular para los equipos de diseño cuando se trata de diseño de interfaz de usuario y creación de prototipos.

Una de las características destacadas de Figma es la posibilidad de gestionar y publicar bibliotecas. Permite crear una biblioteca de recursos de diseño, como componentes, estilos y variables reutilizables, que luego se pueden seleccionar para su uso en otros archivos de diseño. Storybook es similar a la función de biblioteca de Figma, pero para desarrolladores, ya que permite crear, probar y documentar recursos reutilizables para su sistema de diseño.

Las historias de Storybook capturan los diferentes estados renderizados de cada componente, como las versiones principal, secundaria, grande o pequeña de un botón. Esto permite que el sistema de diseño cubra todos los casos extremos de un componente.

En Figma, los usuarios pueden crear variantes de componentes, que cumplen la misma función que las historias. Mediante variantes, un componente de Figma puede tener múltiples estados, por ejemplo, predeterminado, al pasar el cursor y activo. Los usuarios pueden cambiar fácilmente entre variantes al usar componentes en sus diseños:

Storybook también muestra fragmentos de código para cada componente, lo que permite a los desarrolladores copiar y usar el código en sus aplicaciones. De igual forma, puedes explorar las capas de un componente en una biblioteca de Figma para comprender cómo se creó, lo cual puedes usar en un archivo de diseño aparte:

Cómo Storybook está llenando el vacío entre Figma y el código

En el desarrollo de productos, los diseños se crean primero en Figma antes de entregarlos a los desarrolladores. Durante el proceso de entrega, ambos equipos colaboran para comunicar los objetivos del diseño y las limitaciones técnicas. A continuación, los desarrolladores implementan los diseños en código, utilizando el Modo de Desarrollo de Figma para inspeccionarlos y recopilar las medidas y propiedades específicas:

Cada vez que se crea o actualiza un componente en la biblioteca de Figma, este proceso se repite. En este contexto, los diseñadores y desarrolladores suelen trabajar aislados sin una comunicación eficaz. Esto puede generar resultados diferentes entre los diseños en Figma y el código implementado.

Esta brecha entre Figma y el código se está solucionando con herramientas como Storybook. Las inconsistencias en la documentación entre Figma y el código pueden crear dos fuentes de información: una para los diseñadores y otra para los desarrolladores.

Más de 200.000 desarrolladores y gerentes de productos utilizan LogRocket para crear mejores experiencias digitales

Más información →

Storybook reúne a ambos equipos, brindándoles una plataforma para trabajar juntos durante el desarrollo de componentes de interfaz de usuario. Los diseñadores pueden colaborar con los desarrolladores para revisar los componentes que están creando en Storybook, probar casos extremos y redactar documentación desde una perspectiva de diseño. Esto puede incluir cuándo usar cada estado del componente y cómo garantizar que cumpla con los estándares de accesibilidad en su uso.

Edición en vivo con Storybook Controls

Los diseñadores no necesitan saber programar para editar componentes en tiempo real con Storybook. Cada historia, o estado renderizado, de un componente incluye controles, una función que permite a los usuarios editar las entradas de un componente desde la interfaz de Storybook. Los controles aprovechan los tipos utilizados en sistemas de tipos, como TypeScript, para generar automáticamente un control gráfico.

Storybook genera dinámicamente los controles, lo que facilita la interacción y la personalización de los componentes. Puedes ajustar los controles fácilmente, por ejemplo, activando un interruptor booleano, editando una etiqueta o seleccionando un color diferente para la historia del componente y viendo la vista previa de la actualización de la historia en tiempo real.

Este sencillo proceso de edición en vivo de componentes en Storybook permite a los diseñadores colaborar estrechamente con los desarrolladores para crear y mantener componentes del sistema de diseño. Con Controles, puede probar los componentes para garantizar que cumplan con las especificaciones de diseño o que puedan gestionar casos extremos.

Contar con una plataforma compartida para editar los componentes de la interfaz de usuario reduce la posibilidad de malentendidos y garantiza la coordinación entre ambos equipos. Esto permite una única fuente de información, ya que ambos equipos pueden contribuir y consultar los componentes de Storybook.

Mejores prácticas para organizar tu Storybook

Un sistema de diseño puede resultar intimidante para alguien que no participa en su creación o no está familiarizado con él. ¡Los sistemas de diseño deben ser acogedores! Hazlo y aumentarás la probabilidad de que los miembros de tu equipo lo adopten.

Como diseñador, piensa en tu público objetivo, incluyendo desarrolladores, gerentes de producto y otros diseñadores, y adapta la experiencia del sistema de diseño a sus necesidades. En Storybook, puedes organizar tu sistema de diseño para que los usuarios comprendan fácilmente su propósito, cómo empezar y cómo contribuir.

Descripción general

Al igual que un buen sitio web, cree una página de resumen que dé la bienvenida a sus usuarios al sistema de diseño de su equipo. En la página de resumen, puede comunicar la visión de su equipo para crear el sistema de diseño y su propósito dentro de la organización.

Utilice este espacio para educar a los usuarios que quizás no estén familiarizados con qué es un sistema de diseño, cómo beneficia a su equipo y qué pueden esperar encontrar en Storybook:

Empezando

Ayuda a tus usuarios a empezar con algunas llamadas a la acción (CTA) que dirijan a cada sección del sistema de diseño en Storybook, como tokens de diseño, bases o componentes, con una breve descripción de cada una. También puedes enlazar a páginas de apoyo externas, como el repositorio de GitHub de tu equipo.

Pautas de contribución

Los sistemas de diseño requieren un esfuerzo colaborativo para su mantenimiento, que involucra tanto al equipo del sistema de diseño como a los colaboradores. Incluya directrices de contribución que ofrezcan información sobre cómo enviar comentarios, informar problemas o proponer nuevos componentes para su sistema de diseño. Estas instrucciones permiten a su equipo contribuir al sistema de diseño y mejorarlo continuamente a medida que sus productos evolucionan. También fomentan un sentido de pertenencia y comunidad, ya que permiten que cualquier miembro de su equipo envíe contribuciones:

Fichas de diseño

La base de un sistema de diseño define el estilo, la apariencia y la sensación de los productos de su empresa. Los tokens de diseño reemplazan los valores predefinidos y facilitan el mantenimiento, ya que la actualización del valor de un token se aplica a todas sus aplicaciones.

En esta sección, incluya tokens de diseño para elementos como colores, tipografía, espaciado, elevación, iconos y cualquier otro token que necesite su sistema de diseño. Esta sección también debe incluir directrices sobre cómo usar correctamente los tokens en la aplicación para garantizar el cumplimiento de los estándares de accesibilidad:

Componentes

Tras los tokens de diseño, aquí residen los componentes y patrones de su sistema de diseño. Cada componente contiene historias que representan los diferentes estados disponibles. Los diseñadores pueden proporcionar pautas de uso para cada historia para garantizar su correcta aplicación en la implementación y el diseño.

Accesibilidad

Un sistema de diseño debe integrar la accesibilidad en sus tokens, componentes y patrones de diseño. Comience por definir los principios de accesibilidad de su equipo para comunicar una visión clara de cómo abordar la accesibilidad en el diseño y desarrollo de productos. Esto debe incluir el nivel mínimo de cumplimiento de accesibilidad de su organización, así como enlaces a recursos adicionales, como el estándar internacional de las Pautas de Accesibilidad al Contenido Web (WCAG).

Para cada elemento de su sistema de diseño, incluya documentación específica para garantizar que cumpla con el nivel mínimo de accesibilidad estándar. A menudo, los elementos o componentes pueden ser accesibles por sí solos, pero pueden volverse inaccesibles al combinarse con otros en un diseño más amplio y complejo. Ofrezca orientación sobre cómo aplicar cada elemento en los diseños y el desarrollo, manteniendo la accesibilidad.

Integración de Storybook y Figma

Ahora que el sistema de diseño ha establecido Storybook como su fuente de confianza, aún queda la tarea de mantener la coherencia con la biblioteca de diseño de Figma de tu equipo. Con un producto complejo y un equipo distribuido, puede ser todo un reto crear y mantener la coherencia entre productos y herramientas. Afortunadamente, existen herramientas para integrar Figma y Storybook y ofrecer una experiencia más fluida al gestionar tu sistema de diseño.

Complemento de diseño de libros de cuentos

Una vez creados los componentes de tu sistema de diseño en Figma, no los dejes ocultos. El complemento Diseños te permite integrar diseños de Figma en Storybook para optimizar el flujo de trabajo de diseño y desarrollo.

Con este complemento, al visualizar un componente en Storybook, aparecerá una pestaña de Diseño debajo de la historia para mostrar los diseños de Figma integrados. Esto puede ser útil para identificar discrepancias entre el diseño y el componente implementado, además de proporcionar ejemplos de uso adicionales de su archivo de Figma.

Plugin de libro de cuentos para Figma

Con Storybook Connect, un plugin para Figma, puedes incrustar historias de tus componentes en tu biblioteca de Figma. Al igual que con el complemento de diseño Storybook, puedes usar el plugin Storybook para Figma para cruzar tus componentes codificados con tus diseños.

Puedes interactuar con tus historias directamente en Figma y comparar fácilmente la implementación con el diseño. Puedes usar Figma tanto en modo Diseño como en modo Desarrollo.

Generando una biblioteca de Figma desde Storybook

Para los equipos a quienes les resulta difícil mantener sus componentes de Storybook sincronizados con su biblioteca de Figma, herramientas como story.to.design o Anima pueden generar automáticamente componentes de Figma utilizando sus historias de Storybook.

Esto puede reducir significativamente el tiempo necesario para crear una biblioteca de diseño inicial en Figma o actualizar componentes existentes para que coincidan con lo ya implementado. Lo mejor de estas herramientas es que pueden traducir el código, como las propiedades CSS, al diseño automático de Figma, para que tus componentes de diseño sean flexibles y estén listos para usar.

Conclusión

Los sistemas de diseño son la base para ofrecer un diseño de producto consistente y accesible. Sin embargo, a menudo existe una desconexión entre los componentes diseñados e implementados en el código.

El proceso de entrega del diseño puede ser largo y estar plagado de malentendidos. Con Storybook, diseñadores y desarrolladores pueden colaborar fácilmente para crear, probar y documentar los recursos del sistema de diseño de su equipo, incluyendo tokens de diseño, componentes y pautas de accesibilidad.

Y lo mejor es que los diseñadores no necesitan saber programar. Storybook ofrece herramientas como la edición en vivo con controles para que cualquiera pueda probar los componentes. Con complementos e integraciones, ambos equipos pueden ver los componentes diseñados y programados en Storybook y Figma, lo que garantiza la coherencia en todos los aspectos.

Si su equipo no utiliza Storybook para organizar y mantener su sistema de diseño, puede ser una herramienta poderosa para explorar más a fondo. La plataforma conecta a diseñadores y desarrolladores de UX, permitiéndoles crear un sistema de diseño que sirva como fuente única de información para su organización. Optimice el proceso de su sistema de diseño y dedique más tiempo a crear productos excelentes para sus usuarios.

Vea cómo las opciones de diseño, las interacciones y los problemas afectan a sus usuarios: obtenga una demostración de LogRocket hoy.

Si quieres conocer otros artículos parecidos a Guía de Storybook para diseñadores de UX puedes visitar la categoría Guias.