La base: por qué la nomenclatura importa en un sistema de diseño
Un sistema de diseño en Figma reúne componentes, estilos y reglas que articulan la interfaz. Definir nombres de forma homogénea en ese sistema es vital para conservar consistencia y eficiencia; así, tu biblioteca no se convierte en un cajón desastre con botones casi iguales pero llamados de mil maneras.
Dentro de ese sistema, las propiedades y sus valores son clave: color, tipografía, espaciado, tamaños, estados, modos… Cuanto más uniforme seas al nombrar cada propiedad y cada valor, más fácil será aplicar y mantener la apariencia global en todos los artefactos del producto.
Organización práctica de componentes y estilos
Cuando trabajas con componentes, poner nombres descriptivos y previsibles te ahorra tiempo buscando y entendiendo instancias. Para botones, por ejemplo, diferencia tipo y propósito (primario, secundario); y añade el estado (por ejemplo, normal o al pasar el cursor) cuando proceda.
Con iconos, mejor evitar genéricos como «Icono 123». Opta por nombres reconocibles como «correo», «carrito» o «redes» que cuenten de qué van sin abrir la capa. Esa claridad se agradece al filtrar en la librería y al inspeccionar desde Dev Mode.
Para estados de componentes interactivos, nómbralos para que se distingan sin ambigüedades: por ejemplo, un botón principal en reposo y su versión al sobrevolarlo deben diferenciarse claramente. Usar un sufijo o un modificador de estado hace el trabajo (p. ej., primario / primario-hover).
Si gestionas más de un sistema de diseño en paralelo, marca su jerarquía. Diferenciar entre un conjunto «principal» y otro «secundario» evita mezclar piezas que no tocan, sobre todo en organizaciones con múltiples marcas o verticales.
Beneficios de alinear nombres entre diseño y desarrollo
Que todo el equipo use el mismo lenguaje reduce la fricción: cuando un desarrollador lee el nombre de la capa y coincide con el token o la clase del código, la implementación es más directa. La nomenclatura es el pegamento que mantiene unida la colaboración entre disciplinas y recorta ciclos de revisión.
Además, cuando llega el momento de auditar o escalar el sistema, identificar y agrupar elementos resulta inmediato si las reglas de nombres se han aplicado de forma consistente. La coherencia nominal se traduce en mantenibilidad y ahorro de costes con el paso del tiempo.
Pasos para construir tu archivo de sistema de diseño en figma
Levantar un sistema sólido no es cuestión de un rato, pero hay una ruta clara que puedes seguir para no perderte por el camino. Empieza por lo esencial y documenta cada decisión para hacerla compartible.
- Inventario de elementos clave: define qué vas a estandarizar (paleta, fuentes, escalas de espaciado, componentes críticos como botones, inputs, tarjetas…). La claridad del alcance te evita re-trabajo más tarde.
- Archivo dedicado al sistema: crea un fichero específico que actúe como fuente de verdad. Separar librería de proyectos asegura que los cambios se controlen y versionen mejor.
- Componentiza con criterio: estructura los componentes y sus variantes siguiendo la convención elegida. El nombre debe reflejar tipo, propósito y estado cuando toque.
- Define estilos: estilos de texto, color y efectos con nombres consistentes para que sean localizables. Aplica los mismos patrones de gramática y unión entre palabras.
- Documenta el uso: añade notas de cuándo usar cada pieza, límites y ejemplos. Una guía clara facilita que toda la organización diseñe “a la misma temperatura”.
Taxonomía: componentes, objetos, propiedades y valores
Para que un glosario funcione, primero hay que conocer de qué partes estamos hablando y cómo se relacionan. Esta taxonomía te servirá de mapa para no dejar cabos sueltos.
Componentes: base y compuestos
En términos de Figma, un componente es un bloque con identidad visual propia dentro del UI kit (como una tarjeta). Un componente base es una pieza pensada para anidar dentro de otros (por ejemplo, el botón numérico que solo existe dentro de un selector de fecha). Algunas bibliotecas los etiquetan como assets, snippets, parts, items o subcomponents: la idea es la misma.
Objetos: contenedores y elementos
Un objeto es una pieza dentro de un componente. Hay dos grandes grupos: contenedores (cajas, secciones) y elementos (contenido). Entre los elementos encontrarás texto (label, título, subtítulo, caption), otros componentes (iconos, ilustraciones, botones, tablas), vectores (círculo, rectángulo, polígono) y media (imagen, gif, vídeo).
Propiedades y valores
Las propiedades son las partes variables (talla, estado, color, densidad, etc.). Cada propiedad ofrece un conjunto de valores posibles: por ejemplo, la propiedad “estado” en un botón puede ser normal, hover, pulsado, deshabilitado…
Hay dos familias de valores: variantes y booleanos. Una variante admite más de dos opciones (xs/s/m/l, o info/warn/error), mientras que un booleano representa un sí/no típico (True/False, On/Off, MostrarIcono/OcultarIcono).
Estructura de nombres: modificadores y su posición
Una vez tengas claro qué estás nombrando (componente, objeto, propiedad o valor), debes decidir cómo marcar sus diferencias. Los modificadores ayudan a distinguir variantes, estados y contextos.
Tipos de modificador
Hay varias formas de modificar visualmente un nombre. Puedes usar iconos, signos o palabras clave para reforzar su lectura:
- Icono: por ejemplo, un símbolo delante para indicar utilidad o estado (solo si tu equipo lo soporta y lo entiende).
- Signos de puntuación: prefijos o separadores como ._Base o marcadores de sub-nivel.
- Palabras, acrónimos y abreviaturas: sufijos tipo Item-List, Cell-Header, ShowIcon, BC_…
Lo importante es que la convención sea explícita y documentada. Si combinas tipos de modificador, define prioridades y casos de uso para evitar mezcla caótica.
Posición del modificador
El orden debe ser coherente a lo largo de todo el sistema. Puedes anteponer el modificador (Item-List) o posponerlo (List-Item); lo esencial es no alternar sin criterio entre ambos patrones.
Gramática de nombres: tipo, número, iniciales y uniones
Uniformar la gramática hace que los nombres sean legibles y predecibles. Decide una vez y aplícalo siempre, de lo contrario crecerán excepciones difíciles de recordar.
Tipo de término
Elige si el nombre va a ser verbo, adjetivo o sustantivo, y en qué forma se conjuga. Opciones válidas: participio (Collapsed), presente (Collapse), adjetivo (Collapsable), sustantivo (Collapsible) o combinaciones tipo “is Collapsible”, “show Collapsable”, “icon before”.
Singular o plural
Define si nombras en singular o plural y mantén el patrón. Usar Button/Buttons o Size/Sizes de forma consistente facilita búsquedas y lectura. También puedes establecer un genérico (“acciones”) si agrupa mejor múltiples elementos.
Iniciales y estilo visual
Establece cómo capitalizas: Mayúscula + Mayúscula (Icon Before), minúscula + minúscula (icon before), Mayúscula + minúscula (Icon before) o minúscula + Mayúscula (icon Before). La capitalización es parte del sistema, no un detalle menor.
Uniones entre palabras
Cómo unes términos define legibilidad y encaje con el código. Opciones frecuentes: sin espacio (iconBefore), con espacio (icon before), punto (icon.Before), guion (icon-before), guion bajo (icon_before). Evita combinaciones que perjudiquen la lectura si no aportan valor.
En desarrollo existen estilos predefinidos (Case Styles) que combinan iniciales y uniones: camelCase (sin espacios y cada palabra en mayúscula salvo la primera), PascalCase (todas en mayúscula y sin espacios), kebab-case (guion y minúsculas) y snake_case (guion bajo y minúsculas). Elige el que mejor case con tu stack y sé constante.
Cómo ordenar: alfabético, secuencial y jerárquico
Más allá del nombre, la forma de ordenar listas largas también importa para encontrar rápido. Tres enfoques funcionan bien en librerías:
- Alfabético: a–z o z–a (e.g., bottom, left, right, top).
- Secuencial: 0–10 o 10–0 (e.g., tamaños o estados default/hover/active).
- Jerárquico: de más a menos o viceversa (p. ej., primario, secundario, o niveles de severidad info/warn/error).
Aplicar el mismo criterio de orden en todas las colecciones evita que cada equipo ordene “a su manera”. Define tu preferencia y documenta ejemplos para casos ambiguos.
Implantación: auditoría y creación del glosario
Con las reglas definidas, llega el momento de llevarlas a la práctica. Tienes dos caminos que incluso puedes combinar para asegurar el aterrizaje:
Auditoría de contenido
Revisa lo ya construido: inventaría componentes, objetos, propiedades y valores con sus nombres actuales. El objetivo es consensuar un único sistema taxonómico con diseño y desarrollo y planificar la migración sin romper prototipos ni handoff.
Creación del glosario
Si empiezas desde cero o ya hiciste la auditoría, define la estructura, gramática y orden por cada tipo de elemento (componente, objeto, propiedad y valor). El glosario se convierte en tu “diccionario oficial” de nombres y en un recurso de consulta para nuevas incorporaciones.
Figma ai para renombrar capas de forma contextual
Renombrar cientos de capas a mano es tedioso. Aquí, Figma AI puede ahorrarte tiempo usando el contenido, la posición y la relación entre capas para proponer nombres contextuales. La herramienta analiza tu selección y aplica nombres coherentes donde detecta el patrón por defecto.
Hay límites deliberados: Figma AI solo renombra marcos, grupos, capas de texto, rectángulos (y redondeados) con relleno de imagen, y ciertas instancias que aún conservan el nombre por defecto del componente principal (solo el contenedor, sin tocar subcapas). Si una capa ya tiene nombre, está bloqueada u oculta, o es una forma vectorial individual (elipse, polígono, estrella, malla) sin imagen, no se renombrará.
Puedes iniciar el renombrado de varias formas: desde el menú contextual con botón derecho, desde Acciones en la barra de herramientas o mediante acciones rápidas escribiendo “Rename layers”. Si todo ya está correctamente nombrado, verás el aviso “No es necesario cambiar el nombre de las capas”, con la opción de “Renombrar de todos modos” si quieres forzar.
Un detalle útil: si tienes capas idénticas sin nombre en varios marcos de nivel superior, Figma AI renombrará las coincidentes. Esto ayuda a preservar animaciones inteligentes y posiciones de scroll en prototipos al mantener la correspondencia nominal.
Variables en figma: tokens reutilizables para diseño y prototipos
Las variables almacenan valores que puedes reutilizar en propiedades de diseño y acciones de prototipo, y conviven con otras herramientas de diseño como programas de diseño 3D para Mac. Son el puente natural para implementar tokens de diseño y para construir lógica interactiva sin duplicar marcos.
Algunos usos prácticos: crear y aplicar tokens (colores, tipografías, espacios), alternar entre tamaños de dispositivo con ajustes inmediatos de espaciado según tu escala, previsualizar textos en distintos idiomas con un cambio de contexto, o armar un carrito que calcule totales de pedido. Todo esto sin multiplicar variantes innecesarias.
Existen tres grandes áreas donde brillan: diseño y sistemas de diseño, prototipado avanzado y API. Dominar estas tres te permite conectar diseño, interacción y automatización en un flujo consistente.
Variables para diseño y sistemas
Usa variables y modos para representar tokens y alternar contextos (claro/oscuro, marcas, regiones). Color y número son los cimientos para paletas, tamaños y densidades, y puedes mapearlos a colecciones y modos para cambiar de un golpe.
Recursos típicos en este ámbito incluyen tutoriales introductorios, guías de colecciones y modos, y comparativas entre variables y estilos para decidir cuándo usar cada uno. En resumen: estilos sirven como presets visuales; variables encapsulan valores parametrizables con modos.
Variables para prototipado avanzado
En prototipos, las variables guardan estados y propiedades que cambian por interacción. Puedes usar acciones para modificar sus valores y así alterar apariencia, contenido o visibilidad sin duplicar marcos.
La combinación de variables con expresiones y condicionales abre la puerta a cadenas dinámicas, operaciones matemáticas y evaluaciones booleanas. Con acciones múltiples y lógica if/else apilas comportamientos complejos en un mismo disparador.
Los modos de variable también juegan en prototipos: fija valores por contexto (p. ej., tema) y úsalo en expresiones para conmutar apariencia en tiempo real. Se reduce drásticamente el número de pantallas necesarias para escenarios ricos.
Variables y api (rest, plugins y widgets)
Las variables están disponibles tanto en la API de plugins como en la REST. Puedes consultar, crear, actualizar y eliminar variables, además de vincularlas a componentes desde plugins. Esto habilita herramientas como importadores/exportadores o conversores de estilos a variables.
Los widgets acceden a variables mediante la API de plugins (lectura y creación), con la salvedad de que no pueden enlazar propiedades del widget directamente a variables. Para sincronizar con el repositorio, existen ejemplos de acciones de GitHub que conectan variables de Figma con tu base de código, además de archivos de área de pruebas en la comunidad para practicar sin riesgos.
Buenas prácticas de nomenclatura para capas y componentes
Establece un prefijo para el tipo (por ejemplo, Btn, Card, Input) y un sufijo para el estado (hover, focus, disabled) o el tamaño (sm, md, lg). El orden recomendado suele ser Tipo/Propósito/Tamaño/Estado, y usa separadores uniformes (kebab-case o PascalCase, lo que encaje con tu stack).
Mantén consistencia entre capas e instancias: el contenedor de la instancia debe heredar el patrón del componente maestro. Evita variaciones locales improvisadas porque rompen la búsqueda y el reemplazo. Cuando toque cambiar, hazlo en el maestro y publica una nueva versión.
Para propiedades booleanas, nombra la propiedad, no el valor: «Icon» con valores On/Off o True/False; evita “conIcono/sinIcono” si tu sistema usa toggles booleanos. Esto alinea el lenguaje con la lógica del prototipo y del código.
Si tu proyecto suma más de un dominio (p. ej., backoffice y customer), añade un ámbito en el nombre de colección o carpeta. Separar por contextos reduce colisiones semánticas y promueve la reutilización adecuada.
Errores habituales y cómo evitarlos
Uno de los fallos más comunes es no documentar la convención y dejar que cada persona nombre “a su estilo”. Sin guía, la biblioteca se fragmenta y la velocidad del equipo cae. Deja ejemplos claros y casos borde para quitar dudas.
Otro error: mezclar estilos de unión y capitalización dentro de la misma familia de componentes (kebab en unos, camel en otros). Esto complica filtros, queries y la lectura del panel de capas. Define un estilo por defecto y aplica excepciones contadas y justificadas.
Evita nombres vacíos de significado (“Frame 27 Copy 3”, “Rectangle 12”). Si Figma AI no puede ayudarte porque ya hay nombres asignados, renómbralos manualmente o en el nivel de componente y aprovecha para consolidar la convención elegida.
No dupliques variantes que ya resuelve una variable o un booleano en el componente. La regla de oro: menos pantallas, más parametrización. Acabarás con una librería más ligera y más controlable.
Ruta de adopción para equipos
Empieza pequeño con un set de componentes de alto impacto (botones, inputs, tipografía, paleta). Socializa la convención, recoge feedback y mejora antes de extender al resto. A partir de ahí, migra por módulos y versiona.
Si buscas acelerar el dominio de estas prácticas, plantéate formaciones intensivas orientadas a producto. Programas impartidos por profesionales en activo ayudan a aterrizar teoría en casos reales y a integrar Figma con procesos de desarrollo.
La clave de todo lo anterior es tratar la nomenclatura como parte del diseño, no como un adorno de última hora. Con un glosario claro, reglas de gramática y estructura, apoyo de Figma AI y variables bien planteadas, tu sistema gana velocidad, consistencia y capacidad de escalar; y tu equipo, tiempo de calidad para centrarse en problemas de usuario y no en pelearse con nombres.
Nov 2 2025
Nomenclatura en Figma: guía completa para capas, componentes, variables y sistema de diseño
La base: por qué la nomenclatura importa en un sistema de diseño
Un sistema de diseño en Figma reúne componentes, estilos y reglas que articulan la interfaz. Definir nombres de forma homogénea en ese sistema es vital para conservar consistencia y eficiencia; así, tu biblioteca no se convierte en un cajón desastre con botones casi iguales pero llamados de mil maneras.
Dentro de ese sistema, las propiedades y sus valores son clave: color, tipografía, espaciado, tamaños, estados, modos… Cuanto más uniforme seas al nombrar cada propiedad y cada valor, más fácil será aplicar y mantener la apariencia global en todos los artefactos del producto.
Organización práctica de componentes y estilos
Cuando trabajas con componentes, poner nombres descriptivos y previsibles te ahorra tiempo buscando y entendiendo instancias. Para botones, por ejemplo, diferencia tipo y propósito (primario, secundario); y añade el estado (por ejemplo, normal o al pasar el cursor) cuando proceda.
Con iconos, mejor evitar genéricos como «Icono 123». Opta por nombres reconocibles como «correo», «carrito» o «redes» que cuenten de qué van sin abrir la capa. Esa claridad se agradece al filtrar en la librería y al inspeccionar desde Dev Mode.
Para estados de componentes interactivos, nómbralos para que se distingan sin ambigüedades: por ejemplo, un botón principal en reposo y su versión al sobrevolarlo deben diferenciarse claramente. Usar un sufijo o un modificador de estado hace el trabajo (p. ej., primario / primario-hover).
Si gestionas más de un sistema de diseño en paralelo, marca su jerarquía. Diferenciar entre un conjunto «principal» y otro «secundario» evita mezclar piezas que no tocan, sobre todo en organizaciones con múltiples marcas o verticales.
Beneficios de alinear nombres entre diseño y desarrollo
Que todo el equipo use el mismo lenguaje reduce la fricción: cuando un desarrollador lee el nombre de la capa y coincide con el token o la clase del código, la implementación es más directa. La nomenclatura es el pegamento que mantiene unida la colaboración entre disciplinas y recorta ciclos de revisión.
Además, cuando llega el momento de auditar o escalar el sistema, identificar y agrupar elementos resulta inmediato si las reglas de nombres se han aplicado de forma consistente. La coherencia nominal se traduce en mantenibilidad y ahorro de costes con el paso del tiempo.
Pasos para construir tu archivo de sistema de diseño en figma
Levantar un sistema sólido no es cuestión de un rato, pero hay una ruta clara que puedes seguir para no perderte por el camino. Empieza por lo esencial y documenta cada decisión para hacerla compartible.
Taxonomía: componentes, objetos, propiedades y valores
Para que un glosario funcione, primero hay que conocer de qué partes estamos hablando y cómo se relacionan. Esta taxonomía te servirá de mapa para no dejar cabos sueltos.
Componentes: base y compuestos
En términos de Figma, un componente es un bloque con identidad visual propia dentro del UI kit (como una tarjeta). Un componente base es una pieza pensada para anidar dentro de otros (por ejemplo, el botón numérico que solo existe dentro de un selector de fecha). Algunas bibliotecas los etiquetan como assets, snippets, parts, items o subcomponents: la idea es la misma.
Objetos: contenedores y elementos
Un objeto es una pieza dentro de un componente. Hay dos grandes grupos: contenedores (cajas, secciones) y elementos (contenido). Entre los elementos encontrarás texto (label, título, subtítulo, caption), otros componentes (iconos, ilustraciones, botones, tablas), vectores (círculo, rectángulo, polígono) y media (imagen, gif, vídeo).
Propiedades y valores
Las propiedades son las partes variables (talla, estado, color, densidad, etc.). Cada propiedad ofrece un conjunto de valores posibles: por ejemplo, la propiedad “estado” en un botón puede ser normal, hover, pulsado, deshabilitado…
Hay dos familias de valores: variantes y booleanos. Una variante admite más de dos opciones (xs/s/m/l, o info/warn/error), mientras que un booleano representa un sí/no típico (True/False, On/Off, MostrarIcono/OcultarIcono).
Estructura de nombres: modificadores y su posición
Una vez tengas claro qué estás nombrando (componente, objeto, propiedad o valor), debes decidir cómo marcar sus diferencias. Los modificadores ayudan a distinguir variantes, estados y contextos.
Tipos de modificador
Hay varias formas de modificar visualmente un nombre. Puedes usar iconos, signos o palabras clave para reforzar su lectura:
Lo importante es que la convención sea explícita y documentada. Si combinas tipos de modificador, define prioridades y casos de uso para evitar mezcla caótica.
Posición del modificador
El orden debe ser coherente a lo largo de todo el sistema. Puedes anteponer el modificador (Item-List) o posponerlo (List-Item); lo esencial es no alternar sin criterio entre ambos patrones.
Gramática de nombres: tipo, número, iniciales y uniones
Uniformar la gramática hace que los nombres sean legibles y predecibles. Decide una vez y aplícalo siempre, de lo contrario crecerán excepciones difíciles de recordar.
Tipo de término
Elige si el nombre va a ser verbo, adjetivo o sustantivo, y en qué forma se conjuga. Opciones válidas: participio (Collapsed), presente (Collapse), adjetivo (Collapsable), sustantivo (Collapsible) o combinaciones tipo “is Collapsible”, “show Collapsable”, “icon before”.
Singular o plural
Define si nombras en singular o plural y mantén el patrón. Usar Button/Buttons o Size/Sizes de forma consistente facilita búsquedas y lectura. También puedes establecer un genérico (“acciones”) si agrupa mejor múltiples elementos.
Iniciales y estilo visual
Establece cómo capitalizas: Mayúscula + Mayúscula (Icon Before), minúscula + minúscula (icon before), Mayúscula + minúscula (Icon before) o minúscula + Mayúscula (icon Before). La capitalización es parte del sistema, no un detalle menor.
Uniones entre palabras
Cómo unes términos define legibilidad y encaje con el código. Opciones frecuentes: sin espacio (iconBefore), con espacio (icon before), punto (icon.Before), guion (icon-before), guion bajo (icon_before). Evita combinaciones que perjudiquen la lectura si no aportan valor.
En desarrollo existen estilos predefinidos (Case Styles) que combinan iniciales y uniones: camelCase (sin espacios y cada palabra en mayúscula salvo la primera), PascalCase (todas en mayúscula y sin espacios), kebab-case (guion y minúsculas) y snake_case (guion bajo y minúsculas). Elige el que mejor case con tu stack y sé constante.
Cómo ordenar: alfabético, secuencial y jerárquico
Más allá del nombre, la forma de ordenar listas largas también importa para encontrar rápido. Tres enfoques funcionan bien en librerías:
Aplicar el mismo criterio de orden en todas las colecciones evita que cada equipo ordene “a su manera”. Define tu preferencia y documenta ejemplos para casos ambiguos.
Implantación: auditoría y creación del glosario
Con las reglas definidas, llega el momento de llevarlas a la práctica. Tienes dos caminos que incluso puedes combinar para asegurar el aterrizaje:
Auditoría de contenido
Revisa lo ya construido: inventaría componentes, objetos, propiedades y valores con sus nombres actuales. El objetivo es consensuar un único sistema taxonómico con diseño y desarrollo y planificar la migración sin romper prototipos ni handoff.
Creación del glosario
Si empiezas desde cero o ya hiciste la auditoría, define la estructura, gramática y orden por cada tipo de elemento (componente, objeto, propiedad y valor). El glosario se convierte en tu “diccionario oficial” de nombres y en un recurso de consulta para nuevas incorporaciones.
Figma ai para renombrar capas de forma contextual
Renombrar cientos de capas a mano es tedioso. Aquí, Figma AI puede ahorrarte tiempo usando el contenido, la posición y la relación entre capas para proponer nombres contextuales. La herramienta analiza tu selección y aplica nombres coherentes donde detecta el patrón por defecto.
Hay límites deliberados: Figma AI solo renombra marcos, grupos, capas de texto, rectángulos (y redondeados) con relleno de imagen, y ciertas instancias que aún conservan el nombre por defecto del componente principal (solo el contenedor, sin tocar subcapas). Si una capa ya tiene nombre, está bloqueada u oculta, o es una forma vectorial individual (elipse, polígono, estrella, malla) sin imagen, no se renombrará.
Puedes iniciar el renombrado de varias formas: desde el menú contextual con botón derecho, desde Acciones en la barra de herramientas o mediante acciones rápidas escribiendo “Rename layers”. Si todo ya está correctamente nombrado, verás el aviso “No es necesario cambiar el nombre de las capas”, con la opción de “Renombrar de todos modos” si quieres forzar.
Un detalle útil: si tienes capas idénticas sin nombre en varios marcos de nivel superior, Figma AI renombrará las coincidentes. Esto ayuda a preservar animaciones inteligentes y posiciones de scroll en prototipos al mantener la correspondencia nominal.
Variables en figma: tokens reutilizables para diseño y prototipos
Las variables almacenan valores que puedes reutilizar en propiedades de diseño y acciones de prototipo, y conviven con otras herramientas de diseño como programas de diseño 3D para Mac. Son el puente natural para implementar tokens de diseño y para construir lógica interactiva sin duplicar marcos.
Algunos usos prácticos: crear y aplicar tokens (colores, tipografías, espacios), alternar entre tamaños de dispositivo con ajustes inmediatos de espaciado según tu escala, previsualizar textos en distintos idiomas con un cambio de contexto, o armar un carrito que calcule totales de pedido. Todo esto sin multiplicar variantes innecesarias.
Existen tres grandes áreas donde brillan: diseño y sistemas de diseño, prototipado avanzado y API. Dominar estas tres te permite conectar diseño, interacción y automatización en un flujo consistente.
Variables para diseño y sistemas
Usa variables y modos para representar tokens y alternar contextos (claro/oscuro, marcas, regiones). Color y número son los cimientos para paletas, tamaños y densidades, y puedes mapearlos a colecciones y modos para cambiar de un golpe.
Recursos típicos en este ámbito incluyen tutoriales introductorios, guías de colecciones y modos, y comparativas entre variables y estilos para decidir cuándo usar cada uno. En resumen: estilos sirven como presets visuales; variables encapsulan valores parametrizables con modos.
Variables para prototipado avanzado
En prototipos, las variables guardan estados y propiedades que cambian por interacción. Puedes usar acciones para modificar sus valores y así alterar apariencia, contenido o visibilidad sin duplicar marcos.
La combinación de variables con expresiones y condicionales abre la puerta a cadenas dinámicas, operaciones matemáticas y evaluaciones booleanas. Con acciones múltiples y lógica if/else apilas comportamientos complejos en un mismo disparador.
Los modos de variable también juegan en prototipos: fija valores por contexto (p. ej., tema) y úsalo en expresiones para conmutar apariencia en tiempo real. Se reduce drásticamente el número de pantallas necesarias para escenarios ricos.
Variables y api (rest, plugins y widgets)
Las variables están disponibles tanto en la API de plugins como en la REST. Puedes consultar, crear, actualizar y eliminar variables, además de vincularlas a componentes desde plugins. Esto habilita herramientas como importadores/exportadores o conversores de estilos a variables.
Los widgets acceden a variables mediante la API de plugins (lectura y creación), con la salvedad de que no pueden enlazar propiedades del widget directamente a variables. Para sincronizar con el repositorio, existen ejemplos de acciones de GitHub que conectan variables de Figma con tu base de código, además de archivos de área de pruebas en la comunidad para practicar sin riesgos.
Buenas prácticas de nomenclatura para capas y componentes
Establece un prefijo para el tipo (por ejemplo, Btn, Card, Input) y un sufijo para el estado (hover, focus, disabled) o el tamaño (sm, md, lg). El orden recomendado suele ser Tipo/Propósito/Tamaño/Estado, y usa separadores uniformes (kebab-case o PascalCase, lo que encaje con tu stack).
Mantén consistencia entre capas e instancias: el contenedor de la instancia debe heredar el patrón del componente maestro. Evita variaciones locales improvisadas porque rompen la búsqueda y el reemplazo. Cuando toque cambiar, hazlo en el maestro y publica una nueva versión.
Para propiedades booleanas, nombra la propiedad, no el valor: «Icon» con valores On/Off o True/False; evita “conIcono/sinIcono” si tu sistema usa toggles booleanos. Esto alinea el lenguaje con la lógica del prototipo y del código.
Si tu proyecto suma más de un dominio (p. ej., backoffice y customer), añade un ámbito en el nombre de colección o carpeta. Separar por contextos reduce colisiones semánticas y promueve la reutilización adecuada.
Errores habituales y cómo evitarlos
Uno de los fallos más comunes es no documentar la convención y dejar que cada persona nombre “a su estilo”. Sin guía, la biblioteca se fragmenta y la velocidad del equipo cae. Deja ejemplos claros y casos borde para quitar dudas.
Otro error: mezclar estilos de unión y capitalización dentro de la misma familia de componentes (kebab en unos, camel en otros). Esto complica filtros, queries y la lectura del panel de capas. Define un estilo por defecto y aplica excepciones contadas y justificadas.
Evita nombres vacíos de significado (“Frame 27 Copy 3”, “Rectangle 12”). Si Figma AI no puede ayudarte porque ya hay nombres asignados, renómbralos manualmente o en el nivel de componente y aprovecha para consolidar la convención elegida.
No dupliques variantes que ya resuelve una variable o un booleano en el componente. La regla de oro: menos pantallas, más parametrización. Acabarás con una librería más ligera y más controlable.
Ruta de adopción para equipos
Empieza pequeño con un set de componentes de alto impacto (botones, inputs, tipografía, paleta). Socializa la convención, recoge feedback y mejora antes de extender al resto. A partir de ahí, migra por módulos y versiona.
Si buscas acelerar el dominio de estas prácticas, plantéate formaciones intensivas orientadas a producto. Programas impartidos por profesionales en activo ayudan a aterrizar teoría en casos reales y a integrar Figma con procesos de desarrollo.
La clave de todo lo anterior es tratar la nomenclatura como parte del diseño, no como un adorno de última hora. Con un glosario claro, reglas de gramática y estructura, apoyo de Figma AI y variables bien planteadas, tu sistema gana velocidad, consistencia y capacidad de escalar; y tu equipo, tiempo de calidad para centrarse en problemas de usuario y no en pelearse con nombres.
By Roger Casadejús Pérez • Blog 0