Durante mi trabajo en EPAM NEORIS creé y mantuve un sistema de diseño en Figma para Cencosud. Organicé los componentes en seis familias con Atomic Design y definí variables de color, espaciado, radios y tipografía para usarlas en pantallas de escritorio y móvil.
Las piezas son exportaciones del archivo de Figma y conservan los textos de ejemplo de su documentación.
Color
Organizarelcolorporfunción.
Separé las variables en Theme para marca, Feedback para estados y Neutral para superficies y texto, con pares Softest y Stronger.
Theme
PrimaryTheme/Primary#2563EB
HoverTheme/Hover#1D4ED8
TonalTonal/Default#F1F5F9
Feedback · Softest / Stronger
Success#DCFCE7#16803C
Warning#FEF3C7#B45309
Error#FEE2E2#B91C1C
Info#DBEAFE#1D4ED8
Neutral
StrongestNeutral/Strongest#0F172A
WhiteNeutral/White#FFFFFF
BlackMonochrome/Black#000000
Tipografía
Definirlosrolesdeltexto.
Organicé DM Sans en Headline, Title, Text y Caption, con tres pesos y hasta cuatro tamaños. Todas las piezas usan el mismo componente Text.
Headline
Cencosud
Headline XL96 px · 700 · 500 · 400
Cencosud
Headline L72 px · 700 · 500 · 400
Cencosud
Headline M60 px · 700 · 500 · 400
Cencosud
Headline S48 px · 700 · 500 · 400
Title
Body text
Title XL36 px · 700 · 500 · 400
Body text
Title L30 px · 700 · 500 · 400
Body text
Title M24 px · 700 · 500 · 400
Body text
Title S20 px · 700 · 500 · 400
Text
Body text
Text XL18 px · 700 · 500 · 400
Body text
Text L16 px · 700 · 500 · 400
Body text
Text M14 px · 700 · 500 · 400
Body text
Text S12 px · 700 · 500 · 400
Caption
Body text
Caption10 px · 700 · 500 · 400
Espaciado
Compartirlasescalasdeespacio.
Definí espaciado, radios y elevación como variables. Spacing/2, /4 y /8 corresponden a 8, 16 y 32 px; botones y cajas comparten un radio de 8 px.
Espaciado
Spacing/28 px
Spacing/416 px
Spacing/832 px
Pasos de 4 px
Radio
Rounded/ButtonRounded/Box8 px
Elevación
Shadow Down/M0 · 1 · 8 · −1 · 20 %
Variantes
Documentarlosestadosdelbotón.
Preparé siete estilos, de Primary a Overlay, con hover, presionado, deshabilitado y carga, en tres tamaños.
Formularios
Contemplarlosestadosdelcampo.
Incluí etiqueta, ayuda y validación, con variantes vacías y completas en dos tamaños y estados que llegan hasta solo lectura.
Controles
Mantenerconsistenciaentrecontroles.
Trabajé Checkbox, Radio button y Switch como controles independientes y dentro de campos, con estados activos y deshabilitados.
Feedback
Darestructuraalosmensajes.
Definí una estructura compartida de ícono, título y mensaje para alertas y tooltips, con una acción cuando corresponde.
Modos
Prepararlasdosapariencias.
Diseñé versiones claras y oscuras de las notificaciones, conservando el contenido y las acciones de cada estado.
Contenido
Presentarpreciosydatos.
Construí tarjetas de producto con precios y ofertas, y gráficos de barras con leyenda y tooltip.
En Contexto
Usarlabibliotecaenplantillas.
Armé plantillas de escritorio con los componentes del archivo para revisar su uso en dashboards y formularios de registro.
Sidebar
Expandirlanavegaciónsindesplazar.
Diseñé la sidebar con un riel de íconos que se expande al pasar el cursor. La navegación se abre sobre el contenido y conserva su posición.
La Implementación
Cómoloconstruí.
Variables con nombre
Definí las variables de Figma que usan los componentes: Theme/Primary para marca, Spacing/2, /4 y /8 para la escala en pasos de 4 px, y DM Sans en los roles Headline, Title, Text y Caption.
Documentado en el archivo
Documenté cada componente en su página, con una matriz de variantes y una descripción de uso. Incluí plantillas de escritorio construidas con la misma biblioteca.
Design System for Cencosud
El sistema de diseño que trabajé para Cencosud.
Figma Variables
Color, espaciado, radios y tipografía.
Component Sets
Variantes por tipo, tamaño y estado.
Atomic Design
Seis familias, de acciones a navegación.
DM Sans
Headline, Title, Text y Caption.
Plantillas
Pantallas de escritorio con la biblioteca.
EPAM NEORIS para Cencosud · 2023 – 2025
Trabajo corporativo: muestro lo básico, con los textos de ejemplo del archivo.
