UBICA | Design System

Don Cabaleiro
Feb 3, 2024
Imagen estilo urbana donde hay una persona, no se le ve la cara, con sudadera y capucha, envuelta por humo naranja. y en primer plano se distingue la maraca UBICA / STREETWEAR
UBICA / STREETWEAR

Figma Workshop: Construir un Design System

Para este proyecto me basé en la marca de ropa: UBICA / STREETWEAR. Trabajé desde Figma, donde creé una Biblioteca con Estilos, Componentes y Variants, documenté la Tipografía, Colores, Elevaciones, Breakpoints, Layouts, Grids y Espacios que permitan la construcción de un producto digital de forma ordenada y óptima.

Posteriormente publiqué el resultado de este repositorio en Zeroheight: https://zeroheight.com/149e724c2

Todo esto apoyándome en las herramientas que Figma aporta para realizar este tipo de tareas: Autolayout, Componentes Interactivos, Variants, Hand-Off y algunos plugins.

Brand logo

Componente: Versiones Light y Dark de UBICA / STREETWEAR
Versiones Light y Dark de UBICA / STREETWEAR

Colors

Colores Primarios, Secundarios, Semánticvos y Gradientes del Design System
Colores Primarios, Secundarios, Semánticvos y Gradientes del Design System

Typography, Elevations & Icons

Tipografias, elevaciones e iconos

Buttons

Estilos de botones, versiones y usos

Layouts, Grids & Breakpoints

Cards

Cards para artículos de venta, versiones y usos

Ubica Responsive & Variants test in Figma

Tokens

Tokens UBICA Design System

Repositorio

Puedes visitar el repositorio, en Zeroheight, haciendo click en:
Visitar Repositorio UBICA / Streetwear

Gracias.

--

--

Don Cabaleiro

UX/UI Accesibility Designer. Especializado en Design Systems y Visual Design, intento fortalecer la Accesibidad Digital en nuestros entornos.