Fundamentos de diseño
Consulta los fundamentos de diseño del Kit Digital USS
Qué incluye la librería
Todas las bases para el diseño están en esta librería. Tipografías, colores, layout (Grids, espaciados y guías para tamaños de pantalla), set de íconos, logotipos y certificaciones de USS, formas y sombras. Habilita la librería en tu archivo para tener disponibles los recursos.
Tipografías
Escala de tamaños y estilos disponibles para definir una jerarquía de contenidos. Las tipografías usadas son de licencia libre y están instaladas en Figma por defecto. No es necesario descargar o instalar ninguna familia tipográfica. Una vez habilitada la librería sólo debes seleccionar un elemento de texto y aplicar uno de los estilos disponibles.
Layout
En la página de layout se encuentra la guía de breakpoints para distintos tamaños de pantalla y sus grids correspondientes. También se encuentra la guía de tamaños de espaciados para diseñar interfaces consistentes.
Los distintos grids de layout están creados como estilos, sólo debes seleccionar un frame y aplicarle el grid correspondiente según el tamaño del frame. Puedes usar los frames de ejemplo buscándolos en los assets de la librería, por ejemplo: “pantalla XL desktop”
Color
En esta página encontraras las paletas base de colores (Neutral, Primary, Secondary, Feedback) y la guía de tokens, que son los usos semánticos de las paletas base que permiten que los diseños sean consistentes y accesibles en términos de color. Los tokens consisten en asignar un color de la paleta base a un uso específico, por ejemplo: backgrounds, borders, text, links. Algunos de estos grupos de tokens tienen sus variantes para los distintos estados de interacción, por ejemplo: Surface-default, surface-hover, surface-active, surface-disabled.
Tokens de color
En la página de colores de la librería encuentras un listado con todos los tokens en su variante light y dark mode con una descripción de uso para cada uno.
Formas y sombras
En esta página se encuentra una guía para el uso de sombras en light y dark mode, los border radius permitidos y el ancho para bordes.
Íconos
El Kit Digital USS usa una selección de íconos de la librería de licencia libre Remix icons en su versión outlined (no fill). Al [habilitar la librería de Fundamentos de diseño] en tu archivo de Figma tendrás disponible todo el set de íconos. No es necesario descargar ninguno de los recursos del sitio web.
¿Cómo habilitar la librería?
Te explicamos paso a paso como habilitar esta librería en tus archivos de Figma.
1. Busca el botón de librerías
Abre tu archivo de Figma, ve a la pestaña “Assets” del panel izquierdo y haz click en el botón de librerías
2. Habilita la librería de fundamentos y las demás que necesites
Luego de hacer click en el botón de librerías, se despliega el listado de librerías disponibles para tu cuenta. Habilita la de USS - Fundamentos de diseño y las demás que necesites.
3. Usa los estilos disponibles
Una vez que hayas habilitado la librería podrás usar los estilos en tus diseños
