flntfnd/figma-design-system

Sistemas de Diseño en Figma

Cómo construyo sistemas de diseño en Figma para iOS/iPadOS/macOS, Android y Web, sobre el servidor MCP oficial de Figma. Cada valor es una variable. Los estilos son para compuestos construidos a partir de variables: estilos de texto, estilos de efecto, estilos de degradado de pintura. Los estilos de color sólido son heredados.

Las llamadas a herramientas MCP pertenecen a los skills de plugin que vienen con el plugin de Figma (figma:figma-use, figma:figma-generate-library, figma:figma-generate-design y sus hermanos). Figma los mantiene. Cárgalos junto con este. En mecánica, el skill del plugin tiene prioridad. En proceso e integridad, este la tiene.

Referencia Rápida

Tema	Referencia
Nomenclatura de tokens para cada skill: niveles, familias, regla de conversión por plataforma, sintaxis de código; colecciones de variables, modos, tipografía, espaciado, radio	reference/token-architecture.md
Listas de componentes y estados, Auto Layout, propiedades, Slots, cableado obligatorio de estados interactivos	reference/component-architecture.md
Construcción de Liquid Glass en Figma: kit de Apple, parámetros, tokens de glass, límites de API	reference/liquid-glass.md
Aplicación de un estilo visual a un diseño existente (reestructuración, no un intercambio de tokens)	reference/applying-styles.md
Órdenes de operación para construir desde cero y replicar una app, estructura de archivos, entrega en Modo Dev, accesibilidad, anti-patrones	reference/workflows-and-handoff.md
Los cuatro gates en detalle, cómo escalan con la tarea, el conjunto mínimo de pantallas por plataforma	reference/gates.md
Hechos de Figma que cambian: gates del plan, límites, estado beta, nombres de herramientas MCP y skills, enlaces a kits, fechados	reference/platform-status.md

Gates

Cuatro reglas, mías, verificadas al inicio de la sesión y en todo momento. Fallan en silencio y cuestan más en la entrega.

1. Lienzo oscuro primero. El lienzo de cada página es #1E1E1E antes de que exista cualquier contenido. Si es blanco, detente y arréglalo.
2. Sin páginas ni marcos vacíos. Créalo, pueblalo por completo, continúa. Una plataforma no está completa sin el conjunto mínimo de pantallas.
3. Los nombres de tokens coinciden exactamente con la base de código. Usa los nombres que ya están en producción. No inventes nuevos.
4. Claro y oscuro, ambos. Cada color semántico tiene ambos valores y cada pantalla se construye y revisa en ambos modos antes de darla por completa.

Una construcción completa aplica los cuatro gates en su totalidad. Una edición pequeña a un archivo existente solo no puede empeorar el archivo, y cualquier cosa ya rota se reporta, no se arregla en silencio. reference/gates.md tiene las razones, las reglas de escalado y el conjunto mínimo de pantallas.

En Figma:

Lienzo oscuro:

figma.currentPage.backgrounds = [{
  type: 'SOLID',
  color: { r: 0.118, g: 0.118, b: 0.118 },  // #1E1E1E
  opacity: 1
}];

figma.currentPage es una página. Repite por página usando la regla de cambio de página en figma:figma-use, y establécela en cada página nueva a medida que se crea. A mano: clic derecho en lienzo vacío → Color de fondo. Toma una captura de pantalla y verifica.

Sin páginas vacías. Crea una página en el mismo paso en que la poblas. Si existe una página 🎨 Tokens, las colecciones de variables están en ella antes de tocar la página 🎛 Components.

Nombres de tokens. La ruta de la variable y la sintaxis de código de cada variable siguen reference/token-architecture.md. Donde la base de código ya nombre un token, ese nombre es el que se usa.

Claro y oscuro. Modos Claro y Oscuro en la colección de Color Semántico. Revisa cada pantalla con su marco superior configurado en cada modo.

Carriles

Este skill tiene el proceso de Figma y los nombres de tokens. Los valores y las reglas de plataforma provienen del skill que los posee.

Necesidad	Propietario
Los cuatro gates y el conjunto mínimo de pantallas	Este skill (reference/gates.md)
Valores de paleta y a qué primitivo aliasa cada rol semántico	color-system
Tamaños de tipo de Apple, colores del sistema, la regla y apariencia de Liquid Glass, versiones de SO	apple-platform
Roles de color de Material, escala de forma, clases de tamaño de ventana, versiones de librerías	android-platform
Tokens web en CSS, breakpoints en código	web-platform
Nombres y valores de tokens de movimiento	motion-design
El catálogo de estilos	visual-styles

Inicio de Sesión

1. Carga figma:figma-use y el skill de plugin para el trabajo: figma-generate-library para tokens y componentes, figma-generate-design para pantallas, figma-design-to-code antes de leer un diseño para implementación.
2. Abre una sesión. create_session con la clave del archivo y una tarea de una línea, antes de cualquier otra herramienta de archivo, incluido trabajo de solo lectura. Archivo nuevo: create_new_file primero, luego create_session.
3. Lee antes de escribir. Un archivo existente tiene páginas, colecciones y convenciones. Encuéntralos antes de añadir a ellos.
4. Verifica los gates, escalados a la tarea.

Estilo de Diseño

Confirma el estilo visual con el skill visual-styles antes de construir cualquier token o componente. Sin estilo especificado, el lenguaje de diseño propio de la plataforma es el predeterminado. Los niveles de tokens, la estructura de componentes, el Auto Layout y el cableado de estados se mantienen iguales entre estilos. Solo cambian los valores y los detalles estructurales. reference/applying-styles.md muestra cómo se aplica un estilo en Figma.

Filosofía

El sistema de diseño es un contrato entre diseño y código. Los tokens definidos en Figma son los mismos tokens utilizados en SwiftUI, Compose y CSS. Nombres, valores y jerarquía coinciden en los tres. Un sistema de diseño construido sin la ingeniería como audiencia es una hoja de pegatinas.

Diseña todo. Cada pantalla, cada estado, cada caso extremo. Vacío, cargando, error, contenido parcial, desbordamiento, texto largo, texto corto, deshabilitado. Un diseño que cubre solo el camino feliz es un mood board. La ingeniería inventará los estados faltantes en código, y estarán equivocados.

Pixel perfect significa exactamente eso. Vincula todo a variables, mide todo. Un componente que mide 17px de ancho porque "se ve más o menos bien" no es pixel perfect.

Dos Modos de Trabajo

Construir desde cero. Sistema de diseño primero, componentes después, pantallas al final. Los tokens se definen antes de tocar un solo componente.

Replicar una aplicación existente. Auditar primero, extraer el sistema implícito, formalizarlo, luego reconstruir componentes sobre los tokens formalizados. Nunca te saltes la auditoría.

Ambos están paso a paso en reference/workflows-and-handoff.md.