Figma desde Cero: Interfaz y Conceptos Básicos

Si Canva es la herramienta para crear diseños rápidos y accesibles, Figma es la herramienta profesional que usan los equipos de diseño de Google, Meta, Airbnb, Uber, Mercado Libre y prácticamente todas las empresas tech del mundo. Aprender Figma te abre puertas a una carrera en diseño UI/UX y te da un nivel de control sobre tus diseños que Canva no puede ofrecer.

Figma es una herramienta de diseño de interfaces (UI) y prototipos que funciona completamente en el navegador. Fue adquirida por Adobe pero se mantiene como producto independiente. Su principal ventaja es que permite colaboración en tiempo real, como Google Docs pero para diseño.

Diferencias clave con Canva:

1. Andá a figma.com
2. Registrate con Google o email
3. Elegí el plan Starter (gratuito)
4. El plan Starter permite:
   • 3 archivos de Figma
   • Archivos FigJam ilimitados
   • Colaboradores ilimitados
   • Plugins de la comunidad
   • Historial de versiones (30 días)

Cuando abrís un archivo nuevo en Figma, ves estas áreas:

Barra de herramientas (arriba)

De izquierda a derecha:

• Menú hamburguesa (≡): Acceso a preferencias y ajustes
• Move tool (V): Seleccionar y mover elementos
• Frame tool (F): Crear frames (lienzos)
• Shape tools: Rectángulo (R), Elipse (O), Línea (L), Polígono, Estrella
• Pen tool (P): Dibujo vectorial libre
• Text tool (T): Agregar texto
• Hand tool (H): Navegar por el lienzo
• Comment tool (C): Dejar comentarios para colaboradores

Panel izquierdo: Layers (Capas)

• Muestra la estructura jerárquica de tu archivo
• Cada elemento, frame y grupo aparece acá
• Podés renombrar, agrupar, ocultar y bloquear elementos
• Arrastrá elementos para cambiar el orden de las capas

Panel izquierdo: Assets (Recursos)

• Componentes reutilizables que creaste o importaste
• Estilos guardados (colores, tipografías, efectos)
• Búsqueda de componentes

Lienzo central

• Espacio infinito donde diseñás
• Zoom con scroll del mouse o Ctrl +/-
• Navegá con Space + arrastrar o con el Hand tool
• El lienzo es infinito: no tiene bordes

Panel derecho: Design (Diseño)

Cambia según lo que tengas seleccionado:

• Sin selección: Propiedades del archivo, color de fondo del lienzo
• Frame seleccionado: Tamaño, posición, auto layout, fill, stroke, effects
• Texto seleccionado: Fuente, tamaño, peso, alineación, color, espaciado
• Forma seleccionada: Dimensiones, color de relleno, bordes, efectos, opacidad

Panel derecho: Prototype

Para agregar interacciones y transiciones entre frames. Lo veremos en detalle más adelante.

Panel derecho: Inspect (Dev Mode)

Muestra las propiedades CSS/código del elemento seleccionado. Ideal para desarrolladores.

Frames vs. Grupos vs. Secciones

Frame (F): Es el concepto más importante de Figma. Un frame es un contenedor que puede tener:

• Dimensiones fijas o responsivas
• Su propio layout (Auto Layout)
• Clip content (corta lo que sobresale)
• Constraints (cómo se comportan los hijos al redimensionar)

Pensá en un Frame como un <div> en HTML. Todo en Figma debería estar dentro de frames.

Uso típico de frames:

• Pantallas completas (ej: iPhone 14 Pro - 393x852)
• Componentes (botones, cards, headers)
• Secciones de una pantalla
• Contenedores de layout

Grupo (Ctrl+G): Agrupa elementos visualmente pero sin las propiedades de un frame. Útil para mover varios elementos juntos pero sin layout automático.

Sección (Shift+S): Organiza frames relacionados en el lienzo. Es como una carpeta visual. No afecta el diseño interno.

El Lienzo Infinito

A diferencia de Canva donde diseñás dentro de un tamaño fijo, en Figma el lienzo es infinito. Vos creás frames dentro del lienzo que representan pantallas o componentes.

Buenas prácticas de organización en el lienzo:

• Colocá las pantallas de izquierda a derecha en el orden del flujo de usuario
• Dejá espacio entre pantallas (200-400px)
• Usá secciones para agrupar pantallas relacionadas
• Poné los componentes en una página separada

Páginas

Un archivo de Figma puede tener múltiples páginas (como las pestañas de una hoja de cálculo).

Estructura recomendada:

• Página 1 - Cover: Portada del proyecto
• Página 2 - Designs: Todas las pantallas
• Página 3 - Components: Componentes reutilizables
• Página 4 - Prototype: Flujos conectados
• Página 5 - Archive: Versiones anteriores

Paso 1: Crear un Frame

1. Presioná F para activar la herramienta Frame
2. En el panel derecho, elegí un preset (iPhone 14, Desktop, etc.)
3. O dibujá un frame personalizado arrastrando en el lienzo
4. Renombrá el frame haciendo doble click en su nombre en el panel de capas

Paso 2: Agregar un fondo

1. Seleccioná el frame
2. En el panel derecho, en "Fill", clickeá el color
3. Elegí un color sólido, gradiente, o imagen

Paso 3: Agregar formas

1. R para rectángulo, O para círculo
2. Dibujá en el lienzo
3. En el panel derecho, ajustá:
   • Fill: Color de relleno
   • Stroke: Borde (color, grosor, posición)
   • Corner radius: Redondeo de esquinas
   • Effects: Sombras, blur

Paso 4: Agregar texto

1. Presioná T para la herramienta de texto
2. Clickeá donde querés poner texto
3. Escribí tu contenido
4. En el panel derecho ajustá:
   • Font family: La fuente
   • Font weight: Regular, Medium, Bold, etc.
   • Font size: Tamaño en px
   • Line height: Interlineado
   • Letter spacing: Espaciado entre letras
   • Paragraph spacing: Espacio entre párrafos

Paso 5: Agregar imágenes

1. Arrastrá una imagen desde tu computadora al lienzo
2. O copiá una imagen (Ctrl+C) y pegala (Ctrl+V)
3. Para usar una imagen como relleno de una forma:
   • Seleccioná la forma
   • En Fill, cambiá de "Solid" a "Image"
   • Elegí la imagen
   • Ajustá: Fill, Fit, Crop, Tile

Figma tiene una comunidad de plugins que extienden su funcionalidad. Andá a Menú > Plugins > Browse plugins:

Unsplash

Fotos gratuitas directamente en Figma. Seleccioná un frame, abrí el plugin y elegí una foto.

Iconify

Miles de íconos de colecciones populares (Material Icons, Feather, Font Awesome) insertados directamente.

Lorem Ipsum

Generador de texto placeholder para prototipos.

Stark

Verificá contraste de accesibilidad y simulá daltonismo en tus diseños.

Content Reel

Insertá datos realistas (nombres, avatares, direcciones) en tus prototipos.

📺 Tutorial de Figma en español - Desde cero para principiantes

1. Creá un nuevo archivo en Figma
2. Agregá un frame de iPhone 14 (393x852)
3. Poné un fondo blanco
4. Agregá un header con:
   • Rectángulo de color como barra superior
   • Texto con el nombre de una app ficticia
5. Agregá 3 cards rectangulares con:
   • Imagen de fondo
   • Título
   • Descripción breve
6. Organizá todo con espaciado consistente

Resumen

En la próxima lección, vamos a dominar dos de las funcionalidades más poderosas de Figma: Componentes y Auto Layout.