Un design system propio, de las variables de Figma a componentes React.
Para quién
Equipos que diseñan y construyen productos web
Alcance
Design System · Avila y Base · Claro y oscuro
Herramientas
Design tokens / Componentes React / Storybook
La Idea
QueFigmayelcódigodiganlomismo.
Ávila es mi sistema de diseño. Lo desarrollé para trabajar la relación entre las variables de Figma, las propiedades de los componentes y su implementación en React. La biblioteca usa cuatro temas y tiene su documentación en Storybook, donde puedo revisar las piezas funcionando.
Las capturas salen del Storybook del sistema, con datos de ejemplo.
Primitivos
Definirlabasedevalores.
Organicé ocho rampas de color y las escalas de espaciado, radios, desenfoque, trazo y tipografía en la capa de primitivos. Los componentes consumen la capa semántica.
Valle
2550100200300400500600700800900950
Blue
2550100200300400500600700800900950
Neutral
White50100200300400500600700800900Black
Green
2550100200300400500600700800900950
Yellow
2550100200300400500600700800900950
Orange
2550100200300400500600700800900950
Red
2550100200300400500600700800900950
Purple
2550100200300400500600700800900950
193
tokens primitivos
153
tokens semánticos
4
temas: dos marcas, claro y oscuro
Roles Semánticos
Asignarunrolacadatoken.
Definí roles que conservan su nombre entre los cuatro temas. Primary toma Valle en Avila y Blue en Base; en modo oscuro también cambia la jerarquía de superficies.
Avila
Proyectos del equipo
El estado de cada iniciativa, en un solo lugar.
InfoSuccessWarningDanger
Ver proyecto
Primary
Valle 600
Canvas
Neutral 100
Avila Dark
Proyectos del equipo
El estado de cada iniciativa, en un solo lugar.
InfoSuccessWarningDanger
Ver proyecto
Primary
Valle 300
Canvas
Neutral 900
Base
Proyectos del equipo
El estado de cada iniciativa, en un solo lugar.
InfoSuccessWarningDanger
Ver proyecto
Primary
Blue 600
Canvas
Slate 100
Base Dark
Proyectos del equipo
El estado de cada iniciativa, en un solo lugar.
InfoSuccessWarningDanger
Ver proyecto
Primary
Blue 300
Canvas
Slate 900
Espaciado
Nombrarlaescaladeespaciado.
Organicé catorce pasos con nombres de uso, como Medium para 12 px. Las muestras se ven a tamaño real sobre una guía de 128 px.
TokenValorMuestraUtilidad
Zero0 pxgap-zero
Micro1 pxgap-micro
Tiny2 pxgap-tiny
Extra Small4 pxgap-extra-small
Compact6 pxgap-compact
Small8 pxgap-small
Medium12 pxgap-medium
TokenValorMuestraUtilidad
Base16 pxgap-base
Large24 pxgap-large
Extra Large32 pxgap-extra-large
Huge48 pxgap-huge
Extra Huge64 pxgap-extra-huge
Hero96 pxgap-hero
Giant128 pxgap-giant
Radio y Elevación
Definirradiosyelevación.
Preparé siete radios, de None a Full, y seis sombras con su desplazamiento, desenfoque y expansión para separar las superficies.
Usé Poppins en los roles Display, Headline, Body y UI, con tamaños, interlineados y pesos definidos para cada estilo.
Display
Ávila
Hero96 / 115 px · 400 · 500 · 600
Ávila
Large72 / 86 px · 400 · 500 · 600
Ávila
Small48 / 58 px · 400 · 500 · 600
Headline
Ávila Design System
H136 / 43 px · 400 · 500 · 600
Ávila Design System
H224 / 28 px · 400 · 500 · 600
Ávila Design System
H320 / 26 px · 400 · 500 · 600
Body
Ávila Design System
Base16 / 20 px · 400 · 500 · 600
Ávila Design System
Small14 / 16 px · 400 · 500 · 600
Ávila Design System
Caption12 / 14 px · 400 · 500 · 600
UI
AV
Avatar L24 / 20 px · 700
AV
Avatar M20 / 20 px · 700
AV
Avatar S16 / 20 px · 700
Ávila Design System
Micro8 / 14 px · 400
Documentación
Documentarelcomponentefuncionando.
Documenté uso, accesibilidad, implementación y recursos en Storybook, con enlaces a los nodos de Figma. La documentación responde al tema activo.
Guías
Darunaentradaacadaperfil.
Preparé guías de inicio para diseño, desarrollo y contenido, junto con los fundamentos y su referencia de tokens.
Patrones
Probarloscomponentesenconjunto.
Armé patrones de pantalla con navegación, búsqueda, filtros y métricas para revisar cómo trabajan juntas las piezas. El cambio de apariencia se resuelve con tokens.
Temas
Combinartemasenunapantalla.
Implementé fronteras de tema con data-brand y data-appearance. Una tarjeta puede usar Base dentro de una página Avila y tener otro modo de apariencia.
Inicio
Reunirelsistemaenunavista.
Construí una pantalla de inicio con métricas, búsqueda, proyectos, favoritos y actividad para revisar el sistema en un contexto de producto.
La Implementación
Cómoloconstruí.
Tokens desde Figma
Usé un snapshot DTCG de las variables de Figma para generar CSS y utilidades de Tailwind. Los componentes consumen tokens semánticos y una comprobación detecta diferencias entre el snapshot y el código.
Temas por atributo
Implementé las fronteras de tema con data-brand y data-appearance. Los elementos heredan ambos atributos y las fronteras se pueden anidar para combinar marcas dentro de una pantalla.
Documentación en Storybook
Documenté cada componente en Storybook con su uso, accesibilidad, implementación y recursos, junto con un enlace al nodo correspondiente en Figma.
