Para diseñadores
BetaCómo activar las librerías de FDS en Figma, elegir el token correcto y usar los componentes sin romperlos.
Polen vive en tres archivos de Figma. No necesitás abrirlos para diseñar: los activás como librería y trabajás desde tu propio archivo.
| Librería | Qué trae |
|---|---|
| 🌻 FDS Design Tokens | Variables (color, spacing, radius, tamaños…), text styles y elevación. |
| 🌻 FDS Components | Button, Input, Select, Modal, Card y el resto de componentes. |
| 🌻 FDS Iconography | 1172 iconos en dos sets: Line y Duocolor. |
1. Activá las librerías
En tu archivo: panel Assets → icono de libro (Libraries) → buscá FDS → Add to file en las tres. Cuando haya actualizaciones, Figma te muestra un aviso en el mismo panel: aceptalas siempre, así tu archivo no queda viejo.
2. Usá roles, no primitivas
Las variables de color están en dos niveles:
- Primitives — las rampas crudas (
Primary/9,Grey/6). No las uses en tus diseños. - Semantic — los roles (
text/default,border/default,primary/solid). Esto es lo que se aplica.
¿Por qué? Porque text/default sabe qué color ser en light y en dark;
Grey/12 no. Un diseño hecho con roles funciona en ambos temas sin tocarlo.
Atajos mentales:
| Necesito… | Uso |
|---|---|
| Fondo de página / de una card | bg/default / bg/elevated |
| Un borde o un divisor | border/default (suave: border/subtle) |
| Texto principal / secundario / de apoyo | text/default / text/muted / text/subtle |
| Algo verde de marca, sólido | primary/solid + primary/on-solid para lo de adentro |
| Algo verde de marca, suave | primary/subtle + primary/text |
| Un link o un label verde | primary/accent |
| Error / éxito / aviso / info | El mismo esquema con danger, success, warning, info |
3. Espaciado, radius y tamaños también son variables
Al escribir un padding o un gap en auto-layout, hacé clic en el icono de
variable y elegí spacing-*. Igual con el radio (radius-*) y los altos de
control (control/md). Un componente bien hecho no tiene números sueltos.
Guías: Espaciado, Radius,
Tamaños.
4. Texto: siempre con text style
Tres familias × seis tamaños × cuatro pesos: Text md/Medium,
Heading lg/Semibold, Display sm/Bold. Si un texto no tiene style aplicado,
está mal. Ver Tipografía.
5. Usar un componente
- Arrastralo desde Assets (o
Shift + Iy escribí el nombre). - Configuralo solo desde el panel de propiedades de la derecha: estilo, tamaño, estado, iconos, textos.
- Para cambiar un icono usá la propiedad Icon swap, no entres a la capa.
Las propiedades se llaman igual en todos los componentes:
| Propiedad | Qué controla |
|---|---|
Style | La variante visual (Fill, Stroke, Tonal…). |
Color | El rol: Neutral, Info, Success, Warning, Error. |
Size | sm · md · lg (· xl). |
Radius | Full o Semi, según el contexto de la página. |
State | Default, Hover, Focus, Pressed, Disabled — para maquetar estados. |
Show … / Icon left | Interruptores de partes opcionales. |
6. Dark mode
Seleccioná el frame de la pantalla → panel Layer → icono de variables (Apply variable mode) → Primitives → Dark. Todo lo que esté hecho con roles cambia solo. Lo que no cambie, está usando un color suelto: ahí está el error.
7. Entregar a desarrollo
- En Dev Mode, cada variable muestra su nombre de código
(
var(--primary-subtle)), y cada componente linkea a su página en este sitio. - El snippet de código de cada componente ya está escrito como template de Code Connect; se verá en Dev Mode cuando el plan de Figma lo permita. Hasta entonces, la correspondencia está en la pestaña Specs de cada componente.
- Nombrá los frames por pantalla y estado (
Inscripción / Paso 2 / Error). - Si usaste algo que no existe en el sistema, marcalo con una anotación: es mejor decidirlo juntos que descubrirlo en QA.
Checklist antes de entregar
- Ningún color suelto: todo es un rol de Semantic.
- Ningún número suelto en padding, gap ni radius.
- Todos los textos con text style.
- Ninguna instancia desvinculada.
- La pantalla se ve bien en Dark.
- Un solo botón Fill por sección.