Dominar cómo nombramos capas, variables, componentes y tokens en Figma no es un capricho, es una necesidad práctica. Un sistema de nomenclatura bien pensado acelera el trabajo, evita confusiones y elimina fricciones entre diseño y desarrollo, especialmente cuando hay varias personas editando los mismos archivos.
Si te dedicas al diseño de interfaces y buscas elevar tu nivel, conviene ordenar tu casa desde la raíz: qué nombres se usan, cómo se estructuran y de qué manera se documentan. A lo largo de esta guía vas a encontrar prácticas contrastadas, ejemplos claros y una propuesta coherente para estandarizarlo todo en Figma, desde el archivo y la página hasta la variable más pequeña de color o tipografía.
Fundamentos: por qué estandarizar la nomenclatura en Figma
Antes de entrar al detalle, conviene recordar la base: un sistema de diseño es la fuente de la verdad de un producto digital. Es el conjunto de componentes y estilos que define la identidad visual, la accesibilidad y la coherencia de tu interfaz, y Figma es el lugar donde esa verdad se construye, se publica y se consume.
Dentro de ese sistema, las propiedades y sus valores son los ladrillos que lo sostienen. Colores, tipografías, espaciado, tamaños, efectos y estados requieren una nomenclatura que sea lógica, legible y escalable para toda la organización, no solo para quien diseñó el primer componente.
Con una norma común se evitan ambigüedades. Nombrar no consiste en poner etiquetas bonitas, sino en crear una taxonomía que resista el paso del tiempo y el crecimiento del producto, y que permita que cualquier persona del equipo sepa qué usar, dónde cambiarlo y cómo afecta a los consumidores finales.
Organización de componentes y estilos: patrones que funcionan
Una buena práctica es que los nombres cuenten la historia de qué es algo, cómo se comporta y dónde se usa. Eso implica separar nombres de rol semántico de nombres puramente descriptivos o de apariencia, y mantenerlos coherentes entre sí.
Para componentes interactivos, conviene definir el elemento y el estado. Por ejemplo, un botón puede tener estados base, hover, focus, pressed y disabled, y conviene que el nombre deje claro el patrón que seguirá toda la librería.
- Botones: usa una convención consistente, como Boton Primario, Boton Secundario, Boton Tercario, y añade el estado con un sufijo, por ejemplo Boton Primario — Hover.
- Iconos: apuesta por nombres descriptivos como Icono Correo, Icono Redes o Icono Buscar. Evita comodines genéricos que no cuenten nada y que a larga dificulten la búsqueda.
Si trabajas con más de un sistema o marca, diferencia con claridad el ámbito. Primario y Secundario son etiquetas útiles cuando coexisten dos sistemas de diseño o dos paletas principales, y ayudan a mantener la claridad a nivel de componentes y tokens.
La magia de la nomenclatura no es solo estética; su efecto real está en la colaboración. Cuando diseño y desarrollo comparten nombres y estructura, la comunicación mejora, los handoffs son más fluidos y los errores se reducen porque cualquier persona puede localizar el recurso correcto a la primera.
Cómo levantar y mantener tu design system en Figma
Establecer el sistema de diseño en un archivo dedicado aporta orden y gobernanza. Ese archivo debe ser la referencia para las librerías, los componentes maestros y los estilos publicados, y conviene que esté protegido y versionado.
- Inventario inicial: lista los elementos clave. Define la paleta base y sus escalas, la tipografía y sus niveles, los patrones de espaciado y los estilos de efectos.
- Archivo maestro de sistema: crea un archivo dedicado en Figma para el design system. Será el origen de componentes y estilos, así como de su documentación.
- Componentes organizados: agrupa por familias (Botones, Formularios, Navegación, Feedback). Emplea la nomenclatura consensuada y mantén la jerarquía clara en Assets.
- Estilos bien definidos: publica estilos de color, texto, grid y efectos. Nombra los estilos con el mismo criterio que usarás en variables y tokens para evitar duplicidades.
- Documentación viva: añade páginas de guía de uso, ejemplos y pautas. Define qué se puede editar, quién publica y cómo versionar cambios.
Todo esto debe ir acompañado de procesos. Es recomendable pactar un flujo de publicación de librerías, revisión por pares y un calendario de versiones para que los cambios se propaguen con control y trazabilidad.
Design tokens y estándares: del JSON a W3C y Style Dictionary
Los tokens de diseño son la representación mínima de decisiones visuales y de interacción en un formato portable. Guardar tokens en JSON se ha convertido en práctica común, y herramientas como Style Dictionary hacen de puente hacia plataformas generando variables para web, iOS o Android.
Ahora bien, aunque hay consenso en usar JSON, no siempre lo hay en cómo organizar esos JSON. Style Dictionary popularizó la taxonomía CTI (Category, Type, Item) para estructurar tokens, algo muy útil para filtrar y transformar en pipelines automatizados.
En julio de 2023 se publicó un borrador relevante del grupo de trabajo de la W3C para estandarizar el formato de design tokens. Esa especificación propone, entre otras cosas, una propiedad especial llamada $type para categorizar los tokens de forma explícita, distanciándose de CTI en algunos aspectos.
¿Qué implica esto? Si exportas tokens desde Figma con la nueva especificación y pretendes procesarlos con configuraciones clásicas de Style Dictionary, pueden surgir incompatibilidades a la hora de filtrar o transformar porque las reglas esperan CTI. La buena noticia es que Style Dictionary es flexible: puedes adaptar transformaciones, filtros y formatos para acoplarte al estándar emergente.
Mientras las guías oficiales maduran, conviene que la estructura que adoptes tenga en mente a los consumidores: trazabilidad de variables, claridad semántica y compatibilidad con las herramientas de build. Ten presente, además, análisis de terceros y casos prácticos publicados por referentes de la industria (por ejemplo, propuestas de taxonomía para escalas de interfaces o experiencias compartidas por grandes sistemas como Salesforce) para no reinventar la rueda.
Nombrado de variables: colores y tipografía sin dolores de cabeza
En muchos equipos se mezclan nombres como Azul Principal con escalas tipo Azul-500 y roles tipográficos como Encabezado Grande o Cuerpo Regular. La forma más robusta de resolverlo es separar capas: tokens base de apariencia y tokens semánticos de intención.
Colores. Define una paleta base por escalas (por ejemplo, Azul 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) y neutrales aparte. Esos son tokens base y nunca deberían usarse directamente en componentes si buscas flexibilidad temática. Encima, crea tokens semánticos como Color Fondo Primario, Texto Secundario o Borde Interactivo, que mapean a los base. Así, cambiar un tema o una marca es mapeo, no cirugía.
Para estados, añade sufijos consistentes: Hover, Focus, Active, Disabled y Selected son suficientes para cubrir la mayoría de casos. Si necesitas contraste accesible, considera variantes Alto Contraste asociadas a los roles semánticos.
Tipografía. Declara tokens de composición que separen tamaño, peso, interlineado y tracking, y construye estilos de texto con roles. Emplea nombres de intención como Titulo XL, Subtitulo M, Cuerpo M, Pie S, y deja claro el peso con un sufijo estandarizado, por ejemplo, Cuerpo M Regular, Cuerpo M Semibold. Si trabajas con múltiples marcas o productos, añade un prefijo de contexto como Web, iOS o Brand A cuando sea estrictamente necesario.
Mezclar español con códigos numéricos es viable si eres consistente. Usa guiones para separar atributos, evita espacios problemáticos y mantén el orden semántico de macro a micro, por ejemplo, Color — Fondo — Primario — Hover o Texto — Cuerpo — M — Semibold. Si optas por escalas numeradas (p. ej., Azul-500), úsalas solo en tokens base; los roles semánticos no deben depender de un número que no explica intención.
Un apunte sobre internacionalización: aunque el equipo hable español, estandarizar sufijos o abreviaturas técnicas (md, lg, sm, xl) facilita la adopción por herramientas y personas de otros equipos. Lo clave no es el idioma, sino la coherencia y la trazabilidad.
Arquitectura de Figma: equipos, proyectos, archivos y páginas
La estructura de Figma influye en permisos, búsquedas y rendimiento. En cuentas tipo Professional Team trabajas con Proyectos, Archivos y Páginas; en Organization Team se añade la capa de Equipos, útil en corporaciones y estructuras complejas.
Permisos. Puedes dar acceso de solo lectura, edición o administración a nivel de proyecto y de archivo. Además existen proyectos de solo visualización, donde solo edita la persona creadora, e invitación obligatoria, que actúan como privados. Comunica siempre las invitaciones con edición para mantener el control del sistema.
Nomenclatura de proyectos. Establece un patrón del tipo _ para que todo sea identificable y ordenable. Favorece nombres breves y utilitarios para que se vean completos en la interfaz y no generen ambigüedades.
Tipos de archivos. Diferencia entre Main, Active y Archived. Main es la fuente de la verdad y está cerrado a cambios salvo gobernanza; Active es donde se trabaja; Archived es histórico consultable. Al publicar librerías, hazlo desde Main.
Portadas y rendimiento. Figma permite seleccionar un frame como miniatura (Set as thumbnail). Usa un frame de 620×320 px para que la portada se vea nítida y colores consistentes por tipo de archivo (por ejemplo, un color para Main, otro para Active, otro para Archived). Evita sobrecargar archivos gigantes: divide por funcionalidades y productos.
Páginas, flujos y numeración de frames: que todo cuente algo
Nombrado de páginas. Un patrón efectivo es , con id incremental y ceros a la izquierda para orden estable. Complementa el nombre con un código de estado en el propio título o en un emoji acordado para señalar si está finalizada, en progreso, en revisión o descartada.
Flujos y filas. Trabaja dentro de cada página con filas de frames que representen historias de usuario o escenarios. Incluye un frame de portada al inicio de cada fila con el nombre del flujo y una breve descripción contextual para evitar malentendidos y facilitar la revisión.
Numeración de frames. Una sintaxis como _ funciona muy bien. Usa ceros a la izquierda para asegurar la ordenación natural (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) y numera vistas de izquierda a derecha dentro de la fila. Ejemplo: 01_100, 01_101, 01_102 para la primera fila; 01_200, 01_201, 01_202 para la segunda.
Versionado. No te apoyes solo en el autosave. Utiliza Version history para generar commits al alcanzar hitos, especialmente en sistemas de diseño o funcionalidades grandes, dejando mensajes claros para el equipo y para auditoría futura.
Librerías de equipo y gobierno del sistema
Las librerías convierten un archivo de Figma en proveedor de componentes y estilos reutilizables. Se publican desde el panel Assets y exigen una disciplina de permisos y revisiones para no romper diseños dependientes.
En organizaciones más grandes merece la pena crear un equipo dedicado al sistema de diseño. Así controlas mejor quién puede editar y publicar, y el resto de la empresa consume con permisos de solo lectura. Esta separación reduce incidentes y hace más predecible el ciclo de cambios.
Tipos de equipos en Organization: Open, Closed y Secret. Open permite que cualquier persona se una y vea documentación; Closed exige invitación para ver contenidos; Secret ni siquiera es visible sin invitación. Elige según sensibilidad del proyecto y fase del sistema.
Analítica y administración. El Admin Console de Organization aporta métricas de adopción de componentes y estilos, y permite activar librerías por defecto. Esto es especialmente útil para Brand Assets, portadas, iconografía o recursos comunes que deben estar disponibles sin fricción.
Automatiza el renombrado con Figma AI
Figma AI puede ahorrar tiempo asignando nombres contextuales a capas en bloque. La IA analiza contenido, posición y relación entre capas seleccionadas para proponer un nombre coherente, e incluso sincroniza entre marcos de nivel superior si detecta la misma capa sin nombre.
La herramienta respeta lo que ya has renombrado. Solo cambia capas que aún tienen la convención por defecto de Figma y, si incluyes capas renombradas en la selección, las mantendrá intactas salvo que fuerces la acción.
Capas que sí renombra: marcos, grupos, texto, instancias que conserven el nombre por defecto del componente y rectángulos con relleno de imagen. En instancias, solo actúa sobre el contenedor, no sobre subcapas, para evitar efectos colaterales.
Capas que no renombra: capas ya renombradas, ocultas o bloqueadas; subcapas dentro de instancias; formas vectoriales individuales como elipses, estrellas, polígonos y redes vectoriales; y rectángulos sin relleno de imagen. Para esas, el cambio sigue siendo manual o a nivel de componente.
Cómo lanzarlo: tras seleccionar capas, puedes usar el menú contextual, el botón de Acciones en la barra de herramientas o el menú de acciones rápidas. Si no hay nada que renombrar, Figma muestra un aviso y te permite forzar la acción con Renombrar de todos modos si necesitas homogeneizar nombres.
Buenas prácticas específicas para colores y texto en variables
Si hoy conviven Azul Principal y Azul-500, da el salto a un modelo dual. Define variables base por escala (Azul-50 a Azul-900) y variables semánticas por propósito (Fondo-Primario, Texto-Secundario, Borde-Interactivo), y mapea una a otra. Ese puente es lo que te da resistencia a cambios de marca o tema.
Introduce sufijos uniformes para estados: Hover, Focus, Active, Disabled, Selected. Si trabajas con superficies y elevación, añade variantes para Superficie-Elevada o Contenido-Sobre-Fondo-Sutil, siempre bajo el paraguas semántico.
En tipografía, separa tokens de alias y de composición. Alias por rol (Titulo-XL, Subtitulo-M, Cuerpo-M) y composición con tamaño, peso, interlineado y tracking. Cuando los nombres de fuente cambien o el producto crezca, no tendrás que tocar cada pantalla, solo el mapeo.
Este enfoque también simplifica la comunicación con desarrollo. Los devs suelen agradecer variables estables y predecibles, por ejemplo, –color-texto-primario o –font-body-md, en lugar de un nombre estético que cambie por tendencias.
Plugins recomendados para mantener el orden
Usar herramientas auxiliares elimina tareas repetitivas y errores humanos. Hay plugins en Figma que ayudan a limpiar nombres, sincronizar contenido o trazar conexiones entre pantallas.
- Find and Replace: útil para unificar nombres de capas, estilos o textos en masa.
- Content Reel: permite insertar contenidos de ejemplo coherentes y reutilizables para testear estados y longitudes.
- Sorter: ayuda a ordenar capas y artboards con criterios predecibles.
- Google Sheets Sync: sincroniza datos tabulares con diseños, perfecto para listados o tablas.
- Autoflow: traza flechas y conexiones entre frames para presentar flujos sin esfuerzo.
- Redlines: genera especificaciones visuales de medidas, espaciados y estilos.
Trabajar con clientes y cuentas Organization
Cuando colaboras con organizaciones externas, merece la pena alinear estructura y permisos. En cuentas Organization Team puedes crear equipos por producto, activar librerías por defecto y ver analítica de adopción, lo que ayuda a gobernar el sistema con datos.
Ventajas de tener equipos separados: jerarquía clara, separación de productos o proyectos, permisos específicos según rol, nivel extra de organización y colaboración más fluida. El directorio por niveles (Equipos, Proyectos) aporta un mapa mental inmediato que reduce la fricción al entrar en un archivo nuevo.
Para el día a día, mantén el mismo patrón que en tu propia casa: proyectos para Main, Active y Archived; archivos ligeros por funcionalidades; páginas con id y estado visibles; y versionado con mensajes claros al cerrar cada hito para dejar rastro.
Formación y crecimiento profesional
Si quieres profundizar y potenciar tu carrera en UX/UI, valora formarte con profesionales en activo. Programas intensivos como el Diseño UX/UI AI Driven Full Stack Bootcamp de KeepCoding combinan práctica, criterio y tecnología aplicada al diseño y al desarrollo, con profes que están día a día en el sector.
Más allá de aprender a dominar Figma, este tipo de formación te expone a casos reales, flujo de trabajo con equipos y decisiones con impacto. Esa mezcla de teoría y práctica acelera tu empleabilidad y te ayuda a construir un portfolio sólido en un mercado competitivo.
Con un marco claro de nombres y procesos, un sistema de diseño bien publicado y una estrategia de tokens compatible con estándares, tu equipo ganará velocidad, reducirá errores y será capaz de evolucionar el producto sin romper nada. Lo importante es acordar la convención, documentarla y hacerla cumplir con herramientas, permisos y revisiones: el resto es iterar con cabeza.
