Figma es la herramienta más usada en el mundo para el diseño colaborativo y prototipado de productos digitales.

En este curso de Figma en español aprenderás paso a paso el proceso de diseño responsive de una Landing Page, pasando por todas las fases de creación:

  • Diseño de contenidos: anatomía de una Landing Page.
  • Diseño de wireframes: definición de la jerarquía de contenidos y experiencia de usuario.
  • Diseño visual: jerarquía visual (peso óptico), sistemas de diseño, coherencia de estilo.

Acompaña a la diseñadora Ana Cirujano a lo largo de todo el proceso de creación de una Landing Page con Figma. Además de enseñarte cómo diseña la web paso a paso, Ana te explica todas las decisiones de diseño que toma en cada momento y te da consejos para la gestión del proyecto y el paso a desarrollo (developer handoff).

Qué vas a aprender en este curso

Al acabar este curso, además de las habilidades que obtendrás respecto al manejo de la herramienta Figma, aprenderás nociones de metodología de procesos de diseño web orientado a la conversión y diseño web freelance.

Herramientas de Figma

  • Gestionar y compartir archivos y páginas
  • Uso de herramientas de creación de formas
  • Frames y grupos
  • Edición de objetos
  • Herramienta Escala
  • Gestión de capas de texto
  • Añadir imágenes y otros rellenos de capa
  • Ajustar alineados y dimensiones
  • Organizar objetos con Smart Selection
  • Medir distancias entre objetos
  • Crear diseños dinámicos con Auto Layout
  • Ajustar propiedades de las capas (Corner Radius, Fill, Stroke, Effects)
  • Gestionar capas (visibilidad, bloqueo, z-index, renombrar, seleccionar en el canvas, etc.)
  • Modos de fusión de capa
  • Aplicar Constraints para definir cómo se redimensionan las capas.
  • Crear Layout Grid
  • Crear y usar componentes con Variants
  • Cambiar una instancia por otra en un archivo
  • Componentes compuestos
  • Crear múltiples componentes
  • Crear, gestionar y aplicar estilos (texto, colores, efectos y Layout Grid)
  • Crear prototipos interactivos (ventana pop-up y pestañas)
  • Opciones colaborativas: gestión de permisos al compartir el diseño
  • Herramienta de comentarios
  • Configurar la exportación de assets y otras buenas prácticas para preparar el archivo para el paso a desarrollo (developer handoff)

Consejos de diseño web

  • Cuáles son los pasos del proceso de diseño de una Landing Page
  • Defender una propuesta de diseño visual de Landing Page
  • Convertir un prototipo para dispositivos móviles en un prototipo para escritorio
  • Qué es un sistema de diseño, para qué sirve, cómo crearlo y aplicarlo en una Landing Page y cómo mantenerlo actualizado y escalable
  • Jerarquía visual para comunicar mejor y guiar al/la usuario/a
  • Percepciones ópticas a tener en cuenta
  • Los elementos del sistema de diseño de nuestro caso práctico: jerarquía tipográfica responsive, paleta de colores, efectos, iconos, botones, espaciados, rejilla responsive
  • Buenas prácticas para el developer handoff
  • Recomendaciones a tener en cuenta al compartir un prototipo
  • Consejos para la gestión freelance de proyectos
  • Nociones de diseño accesible
  • Nociones de diseño adaptado a la ley de protección de datos
  • Nociones de composición tipográfica: mejorar la legibilidad y facilitar la comprensión rápida de los textos
  • Nociones de WPO para diseño

Para quién hemos creado este curso

Este curso está pensado para personas que ya conocen la herramienta Figma y quieren mejorar sus procesos de diseño.

Está dirigido especialmente a diseñadores/as web que quieren diseñar con Figma páginas de aterrizaje optimizadas para la conversión.

Lecciones incluidas

Ahorra más de un 20 % comprando el curso completo

Esta compra incluye las 3 lecciones del curso completo a un precio especial de 87 €, en lugar de los 112 € que pagarías si compraras las lecciones por separado. ¡Un 22 % de ahorro!