Dominar Figma y FigJam es clave para iniciarte en el diseño de interfaces de forma profesional. Aquí aprenderás lo esencial para crear con orden, eficiencia y coherencia visual, habilidades valiosas si te interesa ofrecer servicios de publicidad digitales.
Índice
¿Qué es Figma y qué es FigJam?
👉 ¿Vas comenzando? Antes de seguir con esta guía, te recomendamos leer la Parte 1: Diseño de UI para principiantes con Figma, donde explicamos cómo configurarlo y los primeros pasos para crear tus diseños de interfaz de usuario. ¡Te servirá de base para aprovechar al máximo esta segunda parte!
Figma es un software de diseño en la nube ideal para crear interfaces, sitios web y prototipos en colaboración y en tiempo real. Su uso es sencillo y se actualiza constantemente. FigJam complementa el proceso al facilitar la organización de ideas y campañas, siendo muy útil en servicios de publicidad.
Primeros pasos en Figma
- Configura tu archivo: Elige el tamaño o proporción de la pantalla desde la
ventana de diseño. - Cuadrícula de disposición: Usa «Guía de disposición» para añadir filas y
columnas que ayuden a organizar los elementos. - Formas y texto:
- R para crear rectángulos (útiles para placeholders de imagen).
- T para texto (cuidando interlineado mayor que el tamaño de letra, como
en diseño editorial).
- Imágenes: Utiliza el plugin de Unsplash para insertar imágenes directamente como relleno de formas.
- Máscaras de recorte: Superpone una imagen sobre una figura, selecciona ambas y aplica máscara.
- Opacidad: Puedes modificarla con los números del teclado (ej. «5» para 50%) o desde el panel de Apariencia.
Proceso de diseño en Figma
1. Inspiración y Moodboards
Empieza importando dos moodboards que representen los conceptos base del
proyecto. Colócalos como referencia en la parte superior del archivo de diseño.
2. Estructura y wireframe
- Usa figuras básicas, íconos y marcos para definir la estructura del sitio o app.
- Si estás diseñando para móvil, incluye detalles como barra de batería, hora, etc.
- Crea cuadrículas y márgenes dentro de cada marco para mantener orden y balance.
3. Tipografía y Color
- Elige fuentes desde Google Fonts o Typewolf según tu concepto.
- Usa tamaños sugeridos como 40–50px para títulos principales.
- Explora paletas en Khroma.co o Adobe Color y agrégalas como estilos.
Buenas prácticas y recursos clave
Auto Layout y espaciado
- Usa múltiplos de 8px como base para separar elementos.
- Aplica Auto Layout para que los componentes se reacomoden automáticamente al modificar contenido o escalarlas a otras resoluciones.
Componentes reutilizables
- Convierte botones, menús o tarjetas en componentes para agilizar el diseño y mantener consistencia.
- Define estilos de texto y color para crear una librería reutilizable.
Estructura final del proyecto
- Separa las pantallas finales en una nueva página dentro del archivo.
- Nombra correctamente capas y grupos.
- Asegúrate de que los elementos estén alineados y con márgenes correctos.
- Documenta tu librería visual para facilitar el trabajo en equipo.
Conclusión
Aprender Figma facilita el diseño visual, mejora la colaboración y optimiza la productividad. Dominar grids, componentes y Auto Layout ayuda a crear interfaces funcionales y estéticas. Si te dedicas a los servicios de publicidad, estas herramientas te darán una ventaja para crear campañas visuales efectivas.
