Nomenclatura de tokens y componentes

Te lo prometí hace meses y en varios de los directos que hago en YouTube, hoy te hablaré de la nomenclatura de tokens y componentes que vamos a usar en el UX fomo Design system.

En la versión 2.4 del sistema de diseño comenzaremos a implementar una combinación de tres nomenclaturas con el fin de mantener nuestros proyectos de diseño UX/UI bien organizados, claros y eficientes.

A continuación te dejo las convenciones de nomenclatura que implementaremos, basadas en las mejores prácticas y nuestra experiencia diaria trabajando codo a codo con los equipos de Frontend y Backend.

Nomenclatura de tokens y componentes

Para nombrar tokens de diseños, componentes, propiedades, atributos y capas de nuestro sistema de diseño vamos a usar tres nomenclaturas muy utilizadas: PascalCase, camelCase y kebab-case.

Si necesitas leerlo te lo voy a aclarar, esta combinación no debe ir a misa.

Es la solución que encontramos nosotros entre los equipos de diseño y desarrollo para hablar un lenguaje común.

Dicho esto te a explicar cómo vamos a trabajar a partir de esta versión.

PascalCase

Para nombrar los componentes utilizaremos la convención PascalCase.

Esta nomenclatura une todas las palabras del nombre de un componente sin espacios y con la primera letra de cada palabra en mayúscula.

Te dejo un par de ejemplos:

• IconButton
• Button

También usaremos la convención PascalCase para átomos, moléculas, organismos, páginas y secciones de nuestros archivos de Figma.

camelCase

Para las las propiedades de los componentes adoptaremos la nomenclatura camelCase.

Aquí, todas las palabras se unen sin espacios, pero la primera palabra se escribe en minúscula y la primera letra de las palabras siguientes en mayúscula.

Ejemplos:

• state
• type
• showRightIcon
• icon
• isRegisteredUser

Es fácil de recordar, piensa en las jorobas de los dromedarios y los camellos.

kebab-case

Para los atributos o valores de las propiedades de los componentes y también para los layers o capas de Figma utilizaremos la nomenclatura kebab-case.

En este formato todas las palabras se escriben en minúscula y se unen por guiones.

Ejemplos de valores de propiedades de un componente:

• default
• hovered
• selected
• secondary-negative
• heading

Ejemplos de nombres para los layers de un archivo de Figma:

• column
• text-button
• main-container

Estados de los componentes

Para mejorar la visualización del estado de los componentes de nuestro design system, utilizaremos iconos específicos en los nombres de las páginas del componente en el que estamos trabajando.

Por lo pronto hemos definido 3 estados, In progress, Ready for review y Done.

En la imagen siguiente puedes ver un ejemplo.

Estos iconos ayudan a todos los miembros del equipo a entender rápidamente el estado de desarrollo de cada componente, mejorando la colaboración y eficiencia en el trabajo.

Usa el sistema de diseño en Figma

Como dije en los primeros párrafos del artículo en la versión 2.4 del UX fomo Design system encontrarás:

• Componentes Accordion y Modal con la combinación de nomenclaturas aplicada.
• Comportamiento corregido en los botones del componente Accordion. Desde aquí mi agradecimiento público a Tomás, un miembro de la comunidad que reportó el error mientras hacía un directo en YouTube.

Compartido bajo licencia Creative Commons 4.0

La semana que viene más.

Seguimos.