Volver a flashcards

Flashcards con solución de Figma

¿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).

¿Cuáles son las cuatro regiones principales de la interfaz de un archivo de Figma?

La barra de herramientas (Toolbar), la barra lateral izquierda, la barra lateral derecha y el lienzo (Canvas).

¿Qué función cumple la barra lateral izquierda en Figma?

Gestiona las capas, activos (assets), páginas y herramientas de organización del archivo.

¿Para qué se utiliza la barra lateral derecha en el editor de Figma?

Controla las propiedades de los objetos, la configuración de prototipos y las opciones de uso compartido.

¿Qué permite la función Auto Layout en Figma?

Permite crear diseños responsivos donde los elementos se organizan dinámicamente según el contenido, espaciado y alineación.

¿Cuáles son los tres flujos de organización que ofrece Auto Layout?

Horizontal, Vertical y Grid (cuadrícula).

En Auto Layout, ¿qué define la propiedad de 'Padding'?

Es el espacio en blanco entre el borde de un marco padre y sus objetos hijos.

En Auto Layout, ¿qué define la propiedad 'Gap between'?

Es la distancia o distribución específica entre los objetos dentro de un marco.

¿Qué sucede cuando un marco de Auto Layout se configura en 'Hug contents'?

El marco reduce sus dimensiones al tamaño mínimo necesario para rodear a sus objetos hijos respetando el espaciado.

¿Qué comportamiento tiene un objeto configurado en 'Fill container' dentro de un marco de Auto Layout?

El objeto se estira para ocupar todo el espacio disponible dentro de su marco padre.

¿Cuál es la función de 'Ignore auto layout' (antes posición absoluta)?

Permite posicionar un objeto de forma precisa en un marco de Auto Layout excluyéndolo del flujo automático de sus hermanos.

¿Qué son las variables en Figma?

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.

¿Cuáles son los cuatro tipos de variables que se pueden crear actualmente en Figma?

Color, Número, String (Cadena) y Booleana.

¿Qué diferencia fundamental existe entre una variable y un estilo de color?

Las variables almacenan un solo valor atómico, mientras que los estilos pueden combinar múltiples valores como degradados o efectos complejos.

¿Qué permiten los 'modos' de variable en una colección?

Permiten representar diferentes contextos (como temas claro y oscuro) almacenando un valor distinto por modo para cada variable.

¿A qué se refiere el término 'Aliasing' en el sistema de variables?

Es la capacidad de una variable para hacer referencia o tomar el valor de otra variable ya existente.

¿Qué propósito tienen los 'Tokens Primitivos' en un sistema de diseño?

Definen los valores básicos y crudos del sistema (como un color hex específico) y sirven como referencia para otros tokens.

¿Qué información comunican los 'Tokens Semánticos'?

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.

¿Cuándo se utilizan los 'Tokens de Componente'?

Se emplean para definir valores específicos de elementos individuales de la interfaz, como el color de fondo exclusivo de un botón primario.

¿Qué es 'Dev Mode' en Figma?

Es un espacio de trabajo dedicado a desarrolladores para inspeccionar diseños y extraer activos o especificaciones listos para programar.

¿Qué permite la herramienta 'Code Connect' en el ecosistema de Figma?

Mapea los componentes de Figma directamente con sus equivalentes en el código de producción (ej. React o Swift).

En la interfaz UI3, ¿dónde se ubica ahora la barra de herramientas principal?

Se ha movido a una barra flotante en la parte inferior del editor para maximizar el espacio de trabajo del lienzo.

¿Qué permite la acción de prototipado 'Set variable'?

Permite cambiar dinámicamente el valor de una variable durante la interacción con el prototipo.

¿Para qué se utilizan los condicionales (If/Else) en los prototipos avanzados?

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.

¿Qué función cumplen las 'Expresiones' en el prototipado con variables?

Permiten realizar operaciones matemáticas básicas (como suma o resta) y concatenación de cadenas dentro de las interacciones.

El atajo de teclado para añadir Auto Layout a una selección es _____.

Shift + A

¿Qué son las variables booleanas en Figma?

Son variables que almacenan valores de verdadero o falso, útiles para alternar la visibilidad de capas en prototipos.

¿Qué utilidad tiene la propiedad 'Scoping' en la configuración de una variable?

Define y restringe en qué propiedades específicas del diseño (ej. solo texto o solo rellenos) se puede aplicar dicha variable.

¿Cómo ayuda la IA en Figma 2026 respecto a la accesibilidad?

Herramientas de IA pueden sugerir diseños accesibles y señalar automáticamente problemas de contraste o etiquetas faltantes.

¿Qué es un 'Design Token' según la filosofía de sistemas de diseño?

Es la unidad atómica de información que actúa como lenguaje universal entre diseño y código para asegurar consistencia.

¿Qué beneficio ofrece el 'Version History' en los archivos de Figma?

Permite rastrear la evolución de un proyecto, restaurar versiones anteriores y documentar hitos importantes.

¿Cuál es la recomendación para almacenar porcentajes (ej. opacidad) en variables?

Deben almacenarse como variables de tipo Número en formato decimal (ej. $0.5$ para $50\%$).

¿Para qué sirve una 'Spec page' en la organización de un archivo de Figma?

Se utiliza para proporcionar documentación detallada y especificaciones técnicas a los desarrolladores y partes interesadas.

En UI3, ¿qué permite el botón 'Minimize UI'?

Colapsa tanto el panel de navegación como el de propiedades para ofrecer una vista expandida del lienzo.

¿Qué es 'Figma Make'?

Es una funcionalidad de IA que permite generar prototipos funcionales a partir de indicaciones (prompts) o wireframes.

¿Qué permite la función de 'Multiple actions' en un prototipo?

Permite apilar un número ilimitado de acciones (como navegar y cambiar una variable) en un mismo disparador.

¿Cómo se accede al modo de inspección de variables en Dev Mode?

Haciendo clic en el nombre de la variable en el panel de inspección para abrir el modal de detalles de la misma.

¿Qué es la 'Single source of truth' (Fuente única de verdad) en Figma?

Es la centralización de decisiones de diseño en tokens y variables que se sincronizan directamente con el código.

¿Cuál es la función de 'Suggested variables' en Dev Mode?

Identifica valores manuales (raw values) en el diseño y sugiere variables existentes que coincidan para mejorar la consistencia.

¿Qué permite el sistema de 'Branching and merging'?

Permite que los equipos experimenten en ramas separadas y luego integren los cambios validados en el archivo principal.

¿Qué son las 'Smart components' en Figma 2026?

Son componentes que utilizan IA para adaptarse automáticamente a cambios de diseño y asegurar consistencia en todo el archivo.

¿Para qué sirve el panel 'Local Variables'?

Es el centro de gestión para crear, organizar en grupos y editar las colecciones de variables del archivo local.

¿Cuál es el rol del 'Admin' en un equipo de Figma?

Gestionar el uso compartido, la estructura del equipo y los permisos de acceso de los colaboradores.

En Auto Layout Grid, ¿qué permite la propiedad 'Span'?

Permite que un objeto se extienda a través de múltiples filas o columnas en el diseño de cuadrícula.

¿Cómo se define el 'Auto mode' para las variables en capas?

Es el estado predeterminado donde los objetos heredan automáticamente el modo de su contenedor padre.

¿Qué importancia tienen las 'Naming conventions' (convenciones de nombre)?

Facilitan la navegación rápida, reducen la fricción en la incorporación de nuevos miembros y mantienen el orden sistémico.

¿Qué es un 'Component Slot'?

Es un espacio reservado dentro de un componente base que permite insertar otros componentes libremente sin romper la estructura principal.

En prototipado avanzado, ¿qué sucede si el orden de las acciones se cambia?

Puede cambiar el resultado final del prototipo, ya que las acciones se ejecutan secuencialmente de arriba hacia abajo.

¿Qué permite la exportación de variables en formato JSON?

Facilita que los desarrolladores consuman los tokens de diseño directamente en sus scripts de construcción.

¿Qué significa 'Detaching' en el contexto de un componente o variable?

Es la acción de romper el vínculo con el elemento original, convirtiéndolo en un objeto con valores estáticos e independientes.

¿Cuál es la ventaja de usar variables de tipo String para la localización?

Permite cambiar el idioma de toda la interfaz simplemente alternando el modo de la colección de textos.

¿Qué función tiene el panel de 'Assets'?

Permite buscar, previsualizar e insertar rápidamente componentes de las librerías compartidas en el archivo actual.

¿Qué es 'Smart Animate'?

Es una configuración de transición que anima automáticamente los cambios entre dos marcos que comparten capas con el mismo nombre.

La propiedad de Auto Layout que empuja objetos al siguiente reglón cuando no hay espacio horizontal se llama _____.

Wrap (Envolver)

¿Qué permite la característica de 'resizable panels' en UI3?

Permite ampliar los paneles laterales para gestionar mejor nombres largos de componentes o jerarquías profundas de capas.

¿Qué son los 'Property labels' en la nueva interfaz?

Son etiquetas de texto que proporcionan contexto sobre la función de cada control en el panel de propiedades.

¿Cuál es la utilidad de los 'Min/Max dimensions' en capas?

Establecen límites para que los elementos no crezcan o se encojan más allá de lo estéticamente aceptable al redimensionar.

¿Qué es un 'Graveyard page'?

Es una página organizativa donde se trasladan los diseños obsoletos o descartados para mantener limpio el espacio de trabajo activo.

¿Cómo beneficia Figma a los equipos distribuidos?

Al ser una herramienta basada en la nube, garantiza que todos los miembros trabajen siempre sobre la versión más reciente del archivo.

¿Qué son las 'Constraint' (restricciones) en Figma?

Definen cómo deben comportarse las capas hijos cuando se redimensiona su marco padre.

¿Qué ventaja operativa ofrece ocultar variables de la publicación (hide from publishing)?

Evita que los consumidores del sistema de diseño se confundan usando tokens primitivos que solo deben ser de uso interno.

¿Para qué sirve el historial de versiones (Version History)?

Permite restaurar estados anteriores del diseño y capturar hitos del proyecto para documentación y control de cambios.

En el contexto de variables, ¿qué es una 'Colección'?

Es un conjunto organizado de variables y grupos que comparten una misma estructura de modos.

¿Qué permite la acción 'Scroll to' en prototipos?

Dirige automáticamente la vista del usuario a una capa o punto específico dentro de la misma página al interactuar.

¿Qué es 'Figma Buzz'?

Es una herramienta de IA diseñada para producir activos de marca a escala de forma automatizada.

¿Cuál es el beneficio de 'aliasing' para el mantenimiento de un sistema?

Permite actualizar un único token primitivo y que el cambio se propague automáticamente a todos los tokens semánticos vinculados.

¿Qué información proporciona el modal de 'Variable details' en Dev Mode?

Muestra el nombre, la colección, el valor actual, la cadena de alias y fragmentos de código para el desarrollador.

¿Cómo se representa visualmente una variable aplicada frente a un estilo?

Las variables suelen mostrarse como círculos de color, mientras que los estilos se representan con rectángulos.

¿Qué es un 'Cover page'?

Es una página inicial que proporciona una visión general del proyecto, a menudo funcionando como miniatura visual del archivo.

¿Qué permite la función 'Multi-edit' en Figma?

Permite seleccionar y editar simultáneamente múltiples capas similares a través de diferentes marcos o grupos.

¿Qué es el 'Model Context Protocol' (MCP) en el ecosistema actual de Figma?

Es una integración que permite conectar Figma con herramientas de desarrollo externas como Cursor para automatizar flujos de trabajo.

¿Para qué se usan las variables de tipo String en los nombres de familias tipográficas?

Permiten cambiar la fuente de todo un sistema de forma global desde la tabla de variables locales.

¿Qué permite la funcionalidad 'Export modes'?

Genera un archivo JSON con todos los valores de los modos de una colección para su integración en el desarrollo.

¿Qué es 'Figma Sites'?

Es una herramienta que permite publicar sitios web completamente responsivos directamente desde los diseños de Figma.

¿Cuál es el impacto de usar Auto Layout en la colaboración con desarrolladores?

Reduce los malentendidos sobre el comportamiento responsivo al imitar fielmente las propiedades de Flexbox y CSS Grid.

Página 1 / 1

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .