Inicio

Fundamentos de Figma

Guía completa para dominar Figma y crear diseños profesionales

1. Interfaz y herramientas

V

Selección

Seleccionar, mover y redimensionar elementos

V
F

Frame

Crear contenedores y artboards

F
R

Formas

Crear rectángulos, círculos y otras formas

R
T

Texto

Añadir y editar texto

T
P

Pen Tool

Crear formas personalizadas

P
K

Scale Tool

Escalar elementos manteniendo proporciones

K

2. Auto-layout y constraints

↔️

Auto-layout Horizontal

Distribuye elementos horizontalmente con espaciado consistente

Shift + A
↕️

Auto-layout vertical

Organiza elementos verticalmente con espaciado automático

Shift + A
📏

Constraints

Mantén elementos anclados al redimensionar frames

Pro Tip: Usa Auto-layout para crear interfaces responsivas que se adapten automáticamente al contenido.

3. Componentes y estilos

🔄

Componentes

Elementos reutilizables que mantienen consistencia

Ctrl/Cmd + Alt + K
🎨

Estilos de color

Define y reutiliza colores en todo el proyecto

Ctrl/Cmd + Alt + G
T

Estilos de texto

Mantén tipografía consistente con estilos predefinidos

Componente principal

Master Component

Instancia 1

Variante

Instancia 2

Variante

4. Prototipado

Inicio
Detalle
Contacto
🔗

Conexiones

Crea flujos de navegación entre pantallas

Interacciones

Añade animaciones y transiciones

📱

Vista previa

Prueba el prototipo en dispositivos reales

5. Colaboración

👥

Trabajo en equipo

Edición simultánea y control de versiones

💬

Comentarios

Feedback directo sobre el diseño

🔄

Bibliotecas

Comparte recursos entre proyectos

6. Exportación

💻

Para Desarrollo

CSS, SVG y especificaciones técnicas

🖼️

Para Presentación

PNG, JPG y PDF

📱

Para Apps

Assets optimizados para diferentes plataformas

Pro Tip: Usa "Export Settings" para configurar diferentes formatos y escalas para cada elemento.