Primeros componentes

Ya está disponible la nueva versión del sistema de diseño que semana a semana vamos curando en los directos de YouTube. En ella encontrarás los primeros componentes UX fomo.

Versión 0.9 del UX fomo Design system

¿Qué estilos y componentes encontrarás en esta versión?

Tipografía

Se ha mejorado el line-height de algunos estilos para asegurar una mejor legibilidad.

Acorddion

El componente acordeón fue el primero que construimos. Tiene cadenas de texto Title y Content, con variantes Collapsed y Expanded que puedes conectar a través de un botón.

Button

No podía faltar, tiene Primary, Secondary y Tertiary. Los tamaños disponibles hasta el momento son SM, MD, y LG. Hemos diseñado 5 estados: Enabled, Hovered, Focused, Pressed, y Disabled.

Icon button

El hermano menor del anterior, también implementa las mismas variantes, los tamaños y los estados que el componente Button.

Por cierto, el componente IconButton tiene una nueva variante sin bordes.

Guided tour

El tutorial que hicimos mientras lo diseñamos gustó mucho. El componente tiene propiedades Show close, Show page, Title, Show image, Content y 4 booleanas para mostrar flechas direccionales (Top, Right, Bottom y Left).

Descubre todos los detalles del componente guided tour en este tutorial.

Progress bar

Esta barra de progreso la diseñamos en el mismo directo donde hicimos el acordeón, porque la usamos en dicho componente. Es muy simple pero muy efectiva, tiene variantes Start y End, para que tus prototipos de Figma se vean lo más real posible.

Resource

Por el momento sólo es un container para mostrar imágenes o vídeos, pero le añadiremos más elementos de interfaz, porque lo utilizaremos en muchos de los componentes y patrones del sistema de diseño.

Lo puedes usar en tu Figma pinchando en el siguiente botón.

Compartido bajo licencia Creative Commons 4.0

Me encantaría que lo pruebes, y que me escribas o te unas a la comunidad de UX y UI fácil para saber qué opinas, qué te gustaría añadir, cambiar, etc.