Kit de diseño

Kit de Figma

La librería de Figma se genera de los mismos archivos de tokens que el código, así un cambio de token aparece en ambos. Un plugin escribe en tu archivo las variables, los estilos, los íconos, cada set de componentes con su página de spec, y plantillas responsive.

Sets de componentes

Variables

Modos

Íconos

Lo que construye el plugin

Un archivo listo para usar: páginas para los fundamentos, los íconos y cada categoría, sets de componentes con las mismas variantes que las props de React, y sus propiedades. Haz clic en una variante, o cambia una propiedad.

Botón

Propiedades

Variant
State
Ícono al inicio
Etiqueta: Save

Código

<Button variant="primary" iconStart={<Sparkles />}>

Variables

Cuatro colecciones, con los mismos nombres que las variables CSS y sintaxis de código para Dev Mode. Theme tiene un modo Dark y uno Light enlazados a las primitivas, así cambiar el modo de un frame cambia el estilo de todo lo que contiene.

Primitives 90

Theme 65

Size 49

Motion 21

Nombre	Value
`purple/50`	`#faf2ff`
`purple/100`	`#f5e2ff`
`purple/200`	`#edcaff`
`purple/300`	`#e1a4ff`
`purple/400`Seed color	`#cd57ff`
`purple/500`	`#c144f4`
`purple/600`	`#ae2ae0`
`purple/700`	`#940dc2`
`purple/800`	`#7d01a5`
`purple/900`	`#6a068b`
`purple/950`	`#2f183b`
`yellow/50`	`#fff5d9`
`yellow/100`	`#ffe8a9`
`yellow/200`Seed color	`#ffce1f`
`yellow/300`	`#e9ba00`
`yellow/400`	`#c29b00`
`yellow/500`	`#a98700`
`yellow/600`	`#947600`
`yellow/700`	`#7b6100`
`yellow/800`	`#675100`
`yellow/900`	`#574400`
`yellow/950`	`#2d2200`
`violet/50`	`#f5f4ff`
`violet/100`	`#e9e7ff`
`violet/200`	`#d8d3ff`
`violet/300`	`#c0b5ff`
`violet/400`	`#a189ff`
`violet/500`Seed color	`#8b6cf0`
`violet/600`	`#7d5cdf`
`violet/700`	`#6848c2`
`violet/800`	`#573ba4`
`violet/900`	`#49328b`
`violet/950`	`#241f3a`
`neutral/50`	`#f6f5f4`
`neutral/100`	`#ebe9e7`
`neutral/200`	`#dbd9d5`
`neutral/300`	`#c3c0ba`
`neutral/400`	`#a49f98`
`neutral/500`Seed color	`#8c8780`
`neutral/600`	`#7e7972`
`neutral/700`	`#68645e`
`neutral/800`	`#57534d`
`neutral/900`	`#494641`
`neutral/950`	`#242322`
`green/50`	`#e5fcec`
`green/100`	`#c7f8d5`
`green/200`	`#9af0b6`
`green/300`Seed color	`#3ddc84`
`green/400`	`#00be6a`
`green/500`	`#00a65c`
`green/600`	`#00914f`
`green/700`	`#007941`
`green/800`	`#006535`
`green/900`	`#00552c`
`green/950`	`#022c15`
`red/50`	`#fff2f1`
`red/100`	`#ffe2e0`
`red/200`	`#ffcac7`
`red/300`	`#ffa49f`
`red/400`	`#fc6968`
`red/500`Seed color	`#e5484d`
`red/600`	`#d4363f`
`red/700`	`#b6212e`
`red/800`	`#9a1624`
`red/900`	`#83151e`
`red/950`	`#391817`
`amber/50`	`#fff4e6`
`amber/100`	`#ffe5c6`
`amber/200`	`#ffd095`
`amber/300`Seed color	`#f5a524`
`amber/400`	`#d88e00`
`amber/500`	`#bd7b00`
`amber/600`	`#a56b00`
`amber/700`	`#8a5900`
`amber/800`	`#734900`
`amber/900`	`#623e00`
`amber/950`	`#331f01`
`blue/50`	`#f0f6ff`
`blue/100`	`#deebff`
`blue/200`	`#c4dbff`
`blue/300`	`#9cc2ff`
`blue/400`	`#639eff`
`blue/500`Seed color	`#3b82f6`
`blue/600`	`#2c73e6`
`blue/700`	`#1b5ec8`
`blue/800`	`#124daa`
`blue/900`	`#104290`
`blue/950`	`#14233c`
`white`	`#ffffff`
`black`The Alea black (warm, not pure)	`#111011`

Una página de spec para cada componente

AnatomíaCada parte numerada, con la clase y los tokens que usa.
PropiedadesLas propiedades de Figma junto a las props de React a las que corresponden.
AccesibilidadLo que hace el componente para lectores de pantalla, foco y contraste.
TecladoCada tecla a la que responde.
TokensLas variables a las que está enlazado, en ambos modos.
MovimientoVariantes interactivas con Smart Animate en la curva ease-out del kit.

Constrúyelo en tu archivo

Genera los tokensEl paquete de tokens genera figma.json desde la misma fuente que el CSS.
```
npm run tokens   # tokens.css, tokens.json, figma.json
```
Importa el pluginEn la app de escritorio de Figma: Plugins, Development, Import plugin from manifest, y elige packages/figma/manifest.json.
Ejecuta Alea for FigmaElige qué construir (fundamentos, íconos, componentes, plantillas) y pulsa Build. Ejecutarlo de nuevo reconstruye lo que hizo y conserva tus propias capas.
Cambia el temaPon un frame en modo Dark o Light, o usa el selector de tema del plugin en planes con un modo por colección.

Más para Figma

Plugins que hablan Alea

Revisión de contraste, escalas tipográficas, desvíos de tokens, entrega de accesibilidad y pruebas de estrés de texto, hechos para archivos construidos así.

Ver los plugins

Lo que construye el plugin

Variables

Una página de spec para cada componente

Constrúyelo en tu archivo

Plugins que hablan Alea

Preguntas

¿Funciona en un plan gratis de Figma?

¿Qué pasa cuando cambian los tokens?

¿Cómo se mantienen en sintonía diseño y desarrollo?

¿El movimiento también está en Figma?