¿Qué es Figma en el contexto del diseño digital de 2026?
Es una herramienta de diseño basada en la nube para crear, prototipar y colaborar en interfaces (UI) y experiencias de usuario (UX).
Es una herramienta de diseño basada en la nube para crear, prototipar y colaborar en interfaces (UI) y experiencias de usuario (UX).
La barra de herramientas (Toolbar), la barra lateral izquierda, la barra lateral derecha y el lienzo (Canvas).
Gestiona las capas, activos (assets), páginas y herramientas de organización del archivo.
Controla las propiedades de los objetos, la configuración de prototipos y las opciones de uso compartido.
Permite crear diseños responsivos donde los elementos se organizan dinámicamente según el contenido, espaciado y alineación.
Horizontal, Vertical y Grid (cuadrícula).
Es el espacio en blanco entre el borde de un marco padre y sus objetos hijos.
Es la distancia o distribución específica entre los objetos dentro de un marco.
El marco reduce sus dimensiones al tamaño mínimo necesario para rodear a sus objetos hijos respetando el espaciado.
El objeto se estira para ocupar todo el espacio disponible dentro de su marco padre.
Permite posicionar un objeto de forma precisa en un marco de Auto Layout excluyéndolo del flujo automático de sus hermanos.
Son valores reutilizables (como colores o números) que se pueden aplicar a diversas propiedades de diseño para mantener una fuente única de verdad.
Color, Número, String (Cadena) y Booleana.
Las variables almacenan un solo valor atómico, mientras que los estilos pueden combinar múltiples valores como degradados o efectos complejos.
Permiten representar diferentes contextos (como temas claro y oscuro) almacenando un valor distinto por modo para cada variable.
Es la capacidad de una variable para hacer referencia o tomar el valor de otra variable ya existente.
Definen los valores básicos y crudos del sistema (como un color hex específico) y sirven como referencia para otros tokens.
Transmiten el significado, propósito y uso previsto de un valor de diseño, como un color asignado específicamente al fondo de un error.
Se emplean para definir valores específicos de elementos individuales de la interfaz, como el color de fondo exclusivo de un botón primario.
Es un espacio de trabajo dedicado a desarrolladores para inspeccionar diseños y extraer activos o especificaciones listos para programar.
Mapea los componentes de Figma directamente con sus equivalentes en el código de producción (ej. React o Swift).
Se ha movido a una barra flotante en la parte inferior del editor para maximizar el espacio de trabajo del lienzo.
Permite cambiar dinámicamente el valor de una variable durante la interacción con el prototipo.
Se usan para crear reglas lógicas que definen qué acción debe ocurrir dependiendo de si se cumple o no una condición específica.
Permiten realizar operaciones matemáticas básicas (como suma o resta) y concatenación de cadenas dentro de las interacciones.
Shift + A
Son variables que almacenan valores de verdadero o falso, útiles para alternar la visibilidad de capas en prototipos.
Define y restringe en qué propiedades específicas del diseño (ej. solo texto o solo rellenos) se puede aplicar dicha variable.
Herramientas de IA pueden sugerir diseños accesibles y señalar automáticamente problemas de contraste o etiquetas faltantes.
Es la unidad atómica de información que actúa como lenguaje universal entre diseño y código para asegurar consistencia.
Permite rastrear la evolución de un proyecto, restaurar versiones anteriores y documentar hitos importantes.
Deben almacenarse como variables de tipo Número en formato decimal (ej. $0.5$ para $50\%$).
Se utiliza para proporcionar documentación detallada y especificaciones técnicas a los desarrolladores y partes interesadas.
Colapsa tanto el panel de navegación como el de propiedades para ofrecer una vista expandida del lienzo.
Es una funcionalidad de IA que permite generar prototipos funcionales a partir de indicaciones (prompts) o wireframes.
Permite apilar un número ilimitado de acciones (como navegar y cambiar una variable) en un mismo disparador.
Haciendo clic en el nombre de la variable en el panel de inspección para abrir el modal de detalles de la misma.
Es la centralización de decisiones de diseño en tokens y variables que se sincronizan directamente con el código.
Identifica valores manuales (raw values) en el diseño y sugiere variables existentes que coincidan para mejorar la consistencia.
Permite que los equipos experimenten en ramas separadas y luego integren los cambios validados en el archivo principal.
Son componentes que utilizan IA para adaptarse automáticamente a cambios de diseño y asegurar consistencia en todo el archivo.
Es el centro de gestión para crear, organizar en grupos y editar las colecciones de variables del archivo local.
Gestionar el uso compartido, la estructura del equipo y los permisos de acceso de los colaboradores.
Permite que un objeto se extienda a través de múltiples filas o columnas en el diseño de cuadrícula.
Es el estado predeterminado donde los objetos heredan automáticamente el modo de su contenedor padre.
Facilitan la navegación rápida, reducen la fricción en la incorporación de nuevos miembros y mantienen el orden sistémico.
Es un espacio reservado dentro de un componente base que permite insertar otros componentes libremente sin romper la estructura principal.
Puede cambiar el resultado final del prototipo, ya que las acciones se ejecutan secuencialmente de arriba hacia abajo.
Facilita que los desarrolladores consuman los tokens de diseño directamente en sus scripts de construcción.
Es la acción de romper el vínculo con el elemento original, convirtiéndolo en un objeto con valores estáticos e independientes.
Permite cambiar el idioma de toda la interfaz simplemente alternando el modo de la colección de textos.
Permite buscar, previsualizar e insertar rápidamente componentes de las librerías compartidas en el archivo actual.
Es una configuración de transición que anima automáticamente los cambios entre dos marcos que comparten capas con el mismo nombre.
Wrap (Envolver)
Permite ampliar los paneles laterales para gestionar mejor nombres largos de componentes o jerarquías profundas de capas.
Son etiquetas de texto que proporcionan contexto sobre la función de cada control en el panel de propiedades.
Establecen límites para que los elementos no crezcan o se encojan más allá de lo estéticamente aceptable al redimensionar.
Es una página organizativa donde se trasladan los diseños obsoletos o descartados para mantener limpio el espacio de trabajo activo.
Al ser una herramienta basada en la nube, garantiza que todos los miembros trabajen siempre sobre la versión más reciente del archivo.
Definen cómo deben comportarse las capas hijos cuando se redimensiona su marco padre.
Evita que los consumidores del sistema de diseño se confundan usando tokens primitivos que solo deben ser de uso interno.
Permite restaurar estados anteriores del diseño y capturar hitos del proyecto para documentación y control de cambios.
Es un conjunto organizado de variables y grupos que comparten una misma estructura de modos.
Dirige automáticamente la vista del usuario a una capa o punto específico dentro de la misma página al interactuar.
Es una herramienta de IA diseñada para producir activos de marca a escala de forma automatizada.
Permite actualizar un único token primitivo y que el cambio se propague automáticamente a todos los tokens semánticos vinculados.
Muestra el nombre, la colección, el valor actual, la cadena de alias y fragmentos de código para el desarrollador.
Las variables suelen mostrarse como círculos de color, mientras que los estilos se representan con rectángulos.
Es una página inicial que proporciona una visión general del proyecto, a menudo funcionando como miniatura visual del archivo.
Permite seleccionar y editar simultáneamente múltiples capas similares a través de diferentes marcos o grupos.
Es una integración que permite conectar Figma con herramientas de desarrollo externas como Cursor para automatizar flujos de trabajo.
Permiten cambiar la fuente de todo un sistema de forma global desde la tabla de variables locales.
Genera un archivo JSON con todos los valores de los modos de una colección para su integración en el desarrollo.
Es una herramienta que permite publicar sitios web completamente responsivos directamente desde los diseños de Figma.
Reduce los malentendidos sobre el comportamiento responsivo al imitar fielmente las propiedades de Flexbox y CSS Grid.
Página 1 / 1