Hoy te hablaré del design system UX fomo, quiero compartirlo contigo y te voy a dar algunos detalles del mismo.
Pero antes y brevemente, como lo hice con las personas que reciben mi newsletter, te diré porqué «mis prisas» en hacerlo.
Llevo semanas pensando en diseñar con Variables de Figma todo el día.
Cuando construyo un componente o monto un diseño introduciendo valores a mano tengo la sensación de no avanzar.
El tema tampoco me quita el sueño, exagero un poco, lo sé.
Pero cierto es que desde el lunes me he propuesto usarlas en los tutoriales que grabo y subo a YouTube, en los que hago en directo y en los que monto dentro de las tutorías privadas.
Empieza a usar el design system UX fomo
Para poder hacerlo tenía que dar un primer paso, publicar el que será el design system del proyecto UX fomo, la comunidad de diseño UX y UI que estamos construyendo en todo al canal de YouTube y mi sitio web.
Digo “el que será” porque ahora mismo no es más que una librería de Figma con Variables, bases o foundations, y algunos pocos átomos y componentes.
¿Recuerdas que en los primeros mails que mandé a la lista hablé de la construcción de un sistema de diseño y de los pasos que daría para construirlo?
Pues…
El design system UX fomo es la respuesta a todo aquello.
Compartido bajo licencia Creative Commons 4.0
Cuando lo tenga más avanzado lo subiré a mi perfil de Figma Community, donde también publico playgrounds, componentes, etc.
En mi roadmap tengo apuntadas acciones para todas las semanas. Esto quiere decir que en los próximos mails seguramente dedique un párrafo al design system para comentarte qué he añadido, qué cambios hice, etc.
¿Qué tiene la versión 0.7?
Colores
Las primeras Variables de color están ordenadas en 3 colecciones.
Primitive colors
En esta colección organicé los colores: Primary, Neutral, Base y Semantic (Success, Information, Error y Warning).
Próximamente añadiré colores Secondary y Tertiary.
Primitive spacing
Aquí metí los primeros valores de espaciado siguiendo la regla del 8.
Una regla muy personal, podría decir que está un pelín rota pero no tanto. Es la que uso a diario para trabajar y me va muy bien con ella.
La nomenclatura es bastante convencional: #spacing-none, #spacing-01, #spacing-02, etc.
Tokens
En la tercera colección he creado varios grupos: Breakpoints, Margins, Paddings, Gaps, Gutters y Icon sizes.
Te dejo algunos ejemplos del naming que usé para todas estas Variables: breakpoing-xs, margin-md, padding-lg, gap-xs, gutter-sm, radius-2xl y icon-xl.
Tipografía
También he creado los primeros estilos de texto que ojito, no son los definitivos: Display, Heading, Body, Toolip y Breadcrumb.
Digo “no son los definitivos” porque muchas de las bases de este design system no están definidas.
Añadiré nuevos tamaños y haré cambios en el naming.
Insisto, a partir de YA actualizaré el sistema de diseño todas las semanas.
Grids
Y por último, los estilos de grids con número de columnas, margins y gutters.
En principio los he creado para los tamaños de los breakpoints que definí en las Variables locales: xs, sm, md, lg, xl y 2xl.
Los átomos y componentes que he creado aún no saldrán con la versión 0.7, primero quiero terminar de definir los foundations que faltan. Los que me “ayudarán” a construir todo lo demás.
«Juan, este sistema de diseño tiene pocas cosas.»
¡Claro!
Pero te lo dije unos renglones arriba, esta historia acaba de empezar.
La quiero compartir porque me interesa contar el paso a paso, desde el inicio hasta el fin.
Y lo haré publicando vídeos en YouTube y más artículos aquí en el blog.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
