Formación de Figma

Índice

1. Título del curso
2. Objetivo de la formación
3. Duración
4. Modalidad
5. Importe
6. Requisitos técnicos
7. Temario

1. Título del curso

Creación de Sistemas de Diseño en Figma

2. Objetivo de la formación

Aprender Figma desde lo básico hasta el diseño avanzado basado en componentes reutilizables, sistemas de diseño y colaboración eficiente.

3. Duración

24 horas lectivas

4. Modalidad

Online (recomendada) o presencial.

1. En modalidad online no se recomienda más de 3 horas y media al día.
2. En modalidad presencial se debe incrementar el importe con los gastos de transporte y alojamiento si los hubiera.

5. Importe

Consultar. Ir al formulario de contacto.

Por favor, en su consulta indique el número de alumnos, el lugar de realización del curso si es presencial y si desea alguna modificación del temario para adaptarlo a las necesidades de su empresa.

6. Requisitos técnicos

El curso se impartirá con licencia de empresa.

Requisitos hardware

• Un ordenador por alumno.

Requisitos software

• Navegador web (chrome).

Requisitos del aula (modalidad presencial)

• Conexión Wifi con salida a internet.
• Proyector y cable con conexión hdmi o vga (o chromecast).
• Pizarra

7. Temario

Bloque 0 - Introducción

• Presentación

Bloque I. Primeros pasos

• ¿Por qué Figma?
• Equipos, proyectos y permisos.
• Tipos de documentos.
• Diseñando en Figma: Conociendo la interfaz
  • Activación de librerías.
  • Versionado y ramas.
  • Modo colaborativo.
  • Dev Mode.
  • Tus alidados del día a día
    • Frames mejor que Grupos.
    • Autolayout: Diferencias entre fill, fixed, hug.
    • Aspect ratio.
    • Position absolute.
    • IA
    • Práctica: Aplicar conceptos clave de estructura, comportamiento y posicionamiento en Figma mediante el uso correcto de frames, autolayout y otras herramientas avanzadas.

Bloque II. Introducción a Sistemas de Diseño

• Qué es un Sistema de Diseño.
• Ventajas.
• Diferenciación entre átomos, moléculas y organismos.
• Organización según las necesidades. (post relacionado)

Bloque III. Creación del Sistema de Diseño

• Crear documento
  • Recomendaciones
  • Organización
• Foundations
  • ¿Qué son?
  • Definiendo estilos de colores accesibles.
  • Definiendo estilos de texto.
  • Layout
  • Plugins útiles.
  • Práctica: Vas a definir la base visual de un sistema de diseño en Figma, centrándote en la accesibilidad, la consistencia tipográfica, y una estructura limpia de layout.
• Variables
  • ¿Qué son?
  • Tipos de variables: color, string, number, boolean.
  • Compartir variables con desarrollo.
  • Plugins útiles.
  • Práctica: Vas a crear una estructura de diseño basada en variables, ideal para mantener la consistencia, facilitar el mantenimiento de un sistema de diseño y adaptarlo a ciertas necesidades.
• Componentes
  • ¿Qué es un componente, una variante y una instancia.
  • Propiedades boolean, True/false, nested instance, estados, puntos de corte...
  • Nombrado y ordenación de capas.
  • Aplicando variables.
  • Estresado y pruebas con el componente.
  • Publicación de librería.
  • Definition of Done (DoD).
  • Práctica: Vas a crear una serie de componentes reutilizables que puedan adaptarse a diferentes situaciones, manteniendo una estructura clara, ordenada y conectada con los fundamentos del sistema de diseño.

Bloque IV - Prototipado

• Interacciones en los componentes
  • Práctica: Vas a trabajar el modo prototipo de Figma para dar vida a tus componentes, creando interacciones básicas y avanzadas que simulan el comportamiento real en una interfaz.
• Interacciones en pantallas
  • Práctica: Vas a crear un pequeño flujo de navegación entre pantallas utilizando las funcionalidades de prototipado de Figma, con foco en la experiencia de usuario.
• Prototipado con variables y condiciones
  • Práctica: Vas a crear un flujo interactivo en Figma utilizando variables y condiciones lógicas.

Bloque V. Entrega a desarrollo

• Devo mode: HTML, CSS e inspect de los componentes.
• Exportación de imágenes e iconos.
• Vinculación con herramientas de desarrollo: Storybook, Github, Chromatic, Notion...

Proyecto final: Crear un Sistema de Diseño desde cero

• Creación de un pequeño sistema de diseño
  • Estructuración de la librería.
  • Creación de los diferentes componentes consistentes y reutilizables (cumpliendo los requisitos de DoD.
  • Prototipado de components y pantallas.