Sábado 13 Agosto 2022. La clase trató en su mayoría sobre tips para UI, al final de este articulo se comparten. Como materia se revisa el uso de las variantes.
Las variantes de Figma te permiten crear un componente único donde de otra manera crearías varios, en lugar de eso te permiten cambiar entre variantes de ese componente. Por ejemplo, en un minuto crearemos un componente de ficha de póquer que tiene algunas variantes según el color que queramos usar:
La sintaxis que hace la magia
Los nombres de las variants tienen que seguir esta estructura:
Propiedad1=valor, Propiedad2=valor, Propiedad3=valor
Para crear las variants en Figma, sigue estos pasos:
- Crea un componente.
- Ponle un nombre usando la nomenclatura de texto entre barras (/), así: nombre del set de componentes / valor. (Esto es opcional).
- Haz clic en el icono + del panel Variants para añadir la primera variación.
- Figma creará un componente idéntico, con las mismas propiedades, añadirá ambos componentes como variants en un set de componentes y si has usado la nomenclatura de texto entre barras, el texto antes de / se convertirá en el nombre del set de componentes y lo que hayas puesto después serán los valores.
- Haz los cambios que necesites que tenga la variación.
- Y ya estaría.
Propiedades y valores
- Las propiedades son las características que van a cambiar en el componente. Por ejemplo, en un botón, puede ser el color, el tamaño, el estado o si tiene o no un icono.
- Los valores son las opciones que pueden tener las propiedades. Por ejemplo: por defecto, hover, activo, deshabilitado.
Segunda sección de la clase: Trataba sobre algunos tips para investigar
Glosarios
Top 15 JavaScript Visualization Libraries
Portafolio ux
https://drive.google.com/file/d/17CKUpfZTbtr_stLlbYcVDncRnwbips2C/view
¿Qué son las fichas de diseño? (Design tokens)
Actualmente es traspasar los diseños en Figma (Designs system al código)
Los tokens de diseño son todos los valores necesarios para construir y mantener un sistema de diseño (espaciado, color, tipografía, estilos de objeto, animación, etc.) representados como datos. Estos pueden representar cualquier cosa definida por el diseño: un color como un valor RGB, una opacidad como un número, una facilidad de animación como coordenadas Bezier. Se utilizan en lugar de valores codificados para garantizar la flexibilidad y la unidad en todas las experiencias del producto.
Los tokens de diseño se integran directamente en nuestras bibliotecas de componentes y kits de interfaz de usuario. Cubren las diversas opciones de escalas de plataforma, temas de color, estados de componentes y más.
https://designcode.io/design-system-in-figma
