En este artículo vinculo 18 videos con una duración de casi 2 horas (115 minutos) en donde se ven todos los conceptos básicos de Figma, desde como es su entorno hasta las interacciones. La intención de este tutorial no es profundizar en técnicas de diseño avanzadas, sino conocer todos los elementos básicos de Figma.
FIGMA 01 Interfaz de Figma
Revisión del interfaz de Figma
FIGMA 02 Plugins
Concepto e instalación de plugins (Content Reel y unsplash)
FIGMA 03 Campos de Trabajo
Creación de Frame o campos de trabajo de forma libre o predefinida a través de un dispositivo
FIGMA 04 Capas
Como metemos un frame dentro de otro. Agrupación de varios elementos (Ctrl+G). Crear varias páginas
FIGMA 05 Alinear elementos
Alinear arriba/abajo/centrado, distribuir elementos horizontalmente/verticalmente. Autolayout (cambiar orientación, dar espacios, alinear elementos, espaciado, sacar un elemento y ver como se redimensiona)
FIGMA 06 Editar y combinar elementos
Editar elementos haciendo doble sobre un elemento. Unir elementos, restar elementos, intersección y exclusión)
FIGMA 07 Iconos
Creación de un icono de lupa y una campana
FIGMA 08 Crear Textos
Incluir texto manual, con Content Reel. Cambiar fuente, bold, tamaño, interlineado, espacio de párrafo, alineación horizontal y vertical, ver las opciones avanzadas pulsando sobre los tres puntos.
FIGMA 09 Crear Estilos
Crear estilo de texto. Utilizar un estilo creado sobre un nuevo texto. Desvincular un texto de su estilo
FIGMA 10 Colores
Poner un color a un elemento, revisión de las diferentes codificaciones de color. Degradados lineales, radiales, angular o diamante. Cambios en el borde del elemento (sólidos o con degradados)
FIGMA 11 Estilos de relleno
Almacenar colores como estilos para poder reutilizarse. Crearlos en una estructura con una / entre el tipo y el nombre (Degradados/Básico). Crear dos fondos a un mismo elemento.
FIGMA 12 Efectos
Poner sombra externa, interna, blur, y combinación de efectos. Añadir los efectos a un estilo para reutilizarlo. Poder ver todos los estilos guardados y poder reorganizarlos.
FIGMA 13 Imagen
Colocar una imagen desde disco en nuestro diseño, de una en una o varias a la vez. Poner Gif animados. Poner imágenes desde unsplash fuera y dentro de una figura
FIGMA 14 Mascaras
Poner esquinas curvas a la imagen, cambiar brillo, contraste… a la imagen. Utilizar la herramienta de corte. Realizar cortes a través del botón “use a mask”
Figma 15 Grid
Colocar una rejilla, poner un grid horizontal o vertical y cambio de parámetros (calle, margen, cantidad de columnas…). Almacenar un grid en un estilo.
FIGMA 16 Plugins iconos
Utilizar Brandfetch para seleccionar elementos de marca de empresas conocidas. Feather Icons posee una amplia colección de iconos
FIGMA 17 Componentes
Creación de componentes para reutilizarlos en diferentes sitios. Modificar el componente patrón y se modifican todas las copias. Modificar un hijo y solo le afecta a él. Desvincular un hijo del componente origen
FIGMA 18 Interacciones
Crear interacciones entre diferentes pantallas. Utilizar diferentes efectos para su visualización. Utilizar la interacción de volver a atrás.
