Introducción a Figma

Aprende a utilizar Figma desde cero, la herramienta más eficiente para el diseño de prototipos y descubre un mundo de posibilidades para el desarrollo web

• Bienvenida
• Introducción a Figma
• Conoce la interfaz de Figma
• Instalar plugins
• Las mesas de trabajo
• Uso de Capas
• Usar las formas básicas
• Alinear y distribuir elementos
• Editar y combinar formas
• Práctica: crear iconos sencillos
• Crear y editar contenidos textuales
• Estilos de texto
• Usar y editar colores
• Estilos de color: relleno
• Estilos de color: trazo
• Efectos visuales
• Práctica: crear estilos
• Trabajar con imágenes
• Usar mascarillas
• Las retículas de diagramación
• Crear una tarjeta básica
• Plugins de composición de elementos
• Crear una tarjeta avanzada
• Práctica: tarjeta de usuario
• Los componentes
• Crear un componente
• Crear múltiples componentes
• Los componentes maestros
• Los componentes booleanos
• Los componentes variables
• Práctica: sistema de componentes
• Sistemas de diseño
• Ejemplos de sistemas de diseño
• Elementos básicos de un sistema de diseño
• Establecer la guía de estilo tipográfico
• Establecer la guía de color
• Crear una librería de componentes
• Práctica: sistema de diseño
• Descripción de prototipo
• Herramientas de prototipado en Figma
• Desplazamientos verticales y horizontales
• Prototipo
• Emplear interacciones
• Emplear animaciones inteligentes
• Hacer un proyecto en colaboración
• Práctica: construir un prototipo

En la actualidad, las páginas web y las aplicaciones móviles son el espacio perfecto para conectar las marcas con sus clientes. Según el diseñador web Arturo Servín, también conocido como Monky, Figma es la herramienta más eficiente para diseñar prototipos de interfaces gráficas. Descubre cómo trabajar sin restricciones técnicas y con libertad creativa para llevar el desarrollo web al siguiente nivel.

En este Domestika Basics formado por 6 cursos, Arturo Servín te enseñará a utilizar Figma desde cero. Si deseas profundizar en las técnicas y métodos que ha ido aprendiendo a lo largo de su carrera profesional, puedes consultar sus cursos anteriores: Diseño web responsive con Adobe Muse, Adobe Photoshop para diseño web, Introducción a Adobe XD para aplicaciones móviles y Diseño web responsive con Adobe Dreamweaver.

En el primer curso, tu profesor te presentará la interfaz del programa, los plug-ins y las herramientas principales, como las capas y formas. También practicarás con la creación de iconos.

Seguirás aprendiendo cómo insertar y editar textos. Además, explorarás con colores y efectos visuales para potenciar y dar personalidad a tus futuros proyectos.

Las imágenes serán el foco del tercer curso. Arturo te mostrará cómo aplicarlas, usar máscaras y retículas de diagramación. Verás cómo crear tarjetas básicas y avanzadas de información.

A continuación, en el cuarto curso, tendrás la oportunidad de construir, editar y activar múltiples componentes, considerando los maestros, booleanos y variables.

Pasarás al quinto curso para conocer la importancia de los sistemas de diseño. Arturo te explicará paso a paso cómo establecer una guía de estilo tipográfico, otra de color y cómo implementar una librería de componentes.

En el sexto y último curso, aprenderás qué es un prototipo y cómo crear uno con interacciones y animaciones. Para terminar, Arturo te guiará para hacer un proyecto en colaboración con un equipo y clientes.

Requisitos técnicos

⦁ Un ordenador con sistema operativo Windows 8.1 o superior o sistema operativo MacOS Sierra o posterior.
⦁ Navegadores web Chrome 64 o posterior, Firefox 78 o posterior, Safari 11.1 o posterior.
⦁ Tarjeta de video con 1 GB de memoria GPU o superior.
⦁ 4 GB de memoria RAM como mínimo.
⦁ Tener una cuenta de Figma, puedes utilizar la versión gratuita o descargar la versión de escritorio.
⦁ Conexión a internet de 20 MB como mínimo.

• Bienvenida
• Introducción a Figma
• Conoce la interfaz de Figma
• Instalar plugins
• Las mesas de trabajo
• Uso de Capas
• Usar las formas básicas
• Alinear y distribuir elementos
• Editar y combinar formas
• Práctica: crear iconos sencillos
• Crear y editar contenidos textuales
• Estilos de texto
• Usar y editar colores
• Estilos de color: relleno
• Estilos de color: trazo
• Efectos visuales
• Práctica: crear estilos
• Trabajar con imágenes
• Usar mascarillas
• Las retículas de diagramación
• Crear una tarjeta básica
• Plugins de composición de elementos
• Crear una tarjeta avanzada
• Práctica: tarjeta de usuario
• Los componentes
• Crear un componente
• Crear múltiples componentes
• Los componentes maestros
• Los componentes booleanos
• Los componentes variables
• Práctica: sistema de componentes 1
• Práctica: sistema de componentes 2
• Práctica: sistema de componentes 3
• Sistemas de diseño
• Ejemplos de sistemas de diseño
• Elementos básicos de un sistema de diseño
• Establecer la guía de estilo tipográfico
• Establecer la guía de color
• Crear una librería de componentes
• Práctica: sistema de diseño 1
• Práctica: sistema de diseño 2
• Descripción de prototipo
• Herramientas de prototipado en Figma
• Desplazamientos verticales y horizontales
• Prototipo
• Emplear interacciones
• Emplear animaciones inteligentes
• Hacer un proyecto en colaboración
• Práctica: construir un prototipo 1
• Práctica: construir un prototipo 2
• Práctica: construir un prototipo 3
• Práctica: construir un prototipo 4
• Práctica: construir un prototipo 5