Figma: primeros pasos y sistemas de diseño

1Interfaz de Figma y organización del archivo

Cinco zonas principales: barra superior (nombre del archivo, modos Design/Prototype/Dev Mode, Present y Share), panel izquierdo Layers (árbol de capas y páginas), lienzo central (Canvas), panel derecho Design (propiedades del elemento seleccionado) y panel derecho Assets (componentes y estilos disponibles). Figma Design es la herramienta de prototipado; FigJam es una pizarra colaborativa sin capacidad interactiva.

Pages (pestañas del panel de capas) no son lo mismo que "pantallas" (frames). Convenciones de nombres recomendadas:

• Frames por pantalla: 01 — Login, 02 — Lista de tareas.
• Capas por función: Header, Content Area, Bottom Nav (evitar nombres por defecto).
• Auto Layout en lugar de posicionamiento manual.

2Jerarquía de capas

Consecuencias de una jerarquía rota: los elementos no se organizan en filas/columnas con Auto Layout, el contenido no forma parte de instancias de componentes, Smart Animate no reconoce las capas correspondientes, los lectores de pantalla anuncian el contenido en orden incorrecto, y las capas "flotantes" no se mueven ni exportan bien.

Corrección: arrastra las capas dentro del frame desde el panel Layers (más fiable que desde el lienzo), o usa Ctrl/Cmd + Shift + ] para reparentar.

Cambiar el idioma a castellano

Ruta: Avatar → Settings / Configuración → Language → elige Español (despliegue gradual según cuenta) → recarga o reinicia Figma.

3Importación de sistemas de diseño

Conceptos: Design System (colección de componentes guiada por estándares), UI Kit (recursos visuales preconstruidos: botones, campos, modales), Design Tokens (variables agnósticas de plataforma), Material Theme Builder — MTB (plugin oficial de Google para generar temas y tokens JSON), Shared Libraries (archivos Figma cuyos componentes/estilos se publican centralizadamente).

Opción A — Material Design 3 oficial

1. Explore Community (o Shift + I) → busca "Material 3 Design Kit" (Google).
2. Open in Figma para duplicarlo en tus borradores.
3. En un plan de equipo/organización: abre el kit y pulsa Publish en el panel de Assets.
4. En tu proyecto: Assets (Alt + 2 / Option + 2) → icono Libraries → activa el kit.

Opción B — Tema personalizado vía JSON

1. Exporta el esquema de color en .json desde MTB, Android Studio o Tokens Studio.
2. Abre el plugin Material Theme Builder (Shift + I → Plugins).
3. Icono de Ajustes → Import Theme / Tokens → Upload JSON → carga theme.json → Apply / Import.

Resultado: una colección de Local Variables con Color Roles (primary, onPrimary, surface...) con modos Light/Dark.

4Layout Grids y retículas

Conceptos: Frame (contenedor con renderizado, recorte y restricciones), Viewport, Grid System (columnas, filas y guías), Responsive Breakpoints.

Configuración estándar para apps móviles:

1. Pulsa F y elige un marco de teléfono (Android Large o iPhone 14/15).
2. Panel derecho → Layout Grid → + → tipo Columns: Count 4, Type Stretch, Margin 16-20 px, Gutter 16 px.
3. Añade una segunda Layout Grid de tipo Rows (4-8 px) como línea base vertical.

5Master layouts, Auto Layout y slot components

Conceptos: Auto Layout (motor tipo Flexbox), Component/Instance (fuente única y copia vinculada con herencia), Slot Component (marco vacío placeholder para inyectar contenido sin romper la estructura), Constraints (reglas de escalado al cambiar el tamaño del contenedor).

A. Crear el layout base: construye Header + Content Area (vacía) + Bottom Nav; la Content Area con Fill container; aplica Auto Layout (Shift + A) dirección Vertical.

B. Convertir en componente: clic derecho → Create Component (Ctrl/Cmd + Alt/Option + K); arrastra una instancia desde Assets al lienzo para crear una pantalla concreta; reemplaza el contenido en los slots manteniendo fijos el encabezado y el pie.

6Variables en Figma

Mecanismo nativo para centralizar valores de diseño (Design Tokens): cambiar una variable actualiza automáticamente todos los elementos que la usan.

Tipos: Color (color/primary, color/bg-surface), Number (spacing/md = 16, radius/card = 12), String (label/cta-button = "Continuar", textos traducibles), Boolean (show/badge).

A. Crear colección: sin nada seleccionado → panel derecho → Local Variables → Create collection (p. ej. "Tokens") → + para añadir variables con estructura de carpeta.

B. Modos (Light/Dark): junto a "Mode 1" → + para un nuevo modo (p. ej. "Dark") → define un valor distinto por modo → para probar: selecciona el frame → Change Variable Mode.

C. Vincular variable a propiedad: selecciona la capa → en la propiedad (Fill, Corner radius...) pulsa el icono rombo/hexágono → elige la variable.

D. Alias: separa los tokens de valor (blue/500 = #6200EE) de los tokens semánticos (color/primary → apunta a blue/500): un cambio se propaga en cascada.

Selector de idioma con variables condicionales

1. Crea una colección "Textos" con una variable String por cada texto: label/titulo, label/boton-guardar, label/placeholder-input.
2. Añade un segundo Mode: renombra el primero a "Español" y el nuevo a "Inglés".
3. Rellena el valor de cada variable String en ambos modos.
4. Vincula el contenido de cada capa de texto a su variable.
5. Diseña un botón/interruptor con dos estados visuales (ES/EN).
6. En Prototype, sobre ese botón: Trigger On click → Action Set Variable Mode → colección "Textos" y modo destino.
7. Repite la interacción en sentido inverso.

✓Ideas clave que debes dominar

• Sé identificar las 5 zonas de la interfaz de Figma y diferenciar Figma Design de FigJam.
• Sé organizar un archivo en Pages y nombrar frames/capas con convenciones semánticas.
• Entiendo por qué la jerarquía de capas debe ser correcta y sé corregirla.
• Sé cambiar el idioma de Figma a español.
• Sé importar un kit de diseño desde Explore Community y activarlo en Assets → Libraries.
• Sé importar un tema personalizado en JSON con Material Theme Builder.
• Sé configurar una Layout Grid de columnas y una de filas.
• Sé construir un layout maestro con Auto Layout y convertirlo en componente.
• Sé la diferencia entre duplicar e instanciar un componente.
• Sé crear una colección de Variables con tipos Color, Number, String y Boolean.
• Sé crear un segundo Mode (Dark) en una colección y cambiarlo con Change Variable Mode.
• Sé montar un selector de idioma con variables String y Set Variable Mode.