Modos y temas
Aplicar los modos al diseño
Cómo se elige el modo de un marco o de una página en Figma, cómo lo heredan los elementos que contiene, cómo combinan las pantallas de DesignToken101 sus dos colecciones y qué pasa con las instancias de un componente.
Última revisión:
Tus colecciones ya tienen sus modos. Falta decirle a cada pantalla qué modo usa. En esta lección verás cómo se elige el modo de un marco o de una página, cómo lo heredan los elementos de dentro, cómo combinan las pantallas de DesignToken101 sus dos colecciones y un caso que conviene conocer: las instancias de un componente.
En esta página
- Elegir el modo de un marco
- Auto y la herencia
- Un marco dentro de otro
- Las pantallas de DesignToken101
- Instancias y componentes
- Lo que te llevas
Elegir el modo de un marco
Según la ayuda de Figma (Figma: Modes for variables):
En un elemento (una capa, un grupo o un contenedor, como un marco):
- Selecciona el elemento.
- En la sección Appearance, haz clic en Apply variable mode.
- Pasa el cursor por la colección y elige el modo.
En una página:
- Deselecciona todo el contenido del lienzo.
- En la sección Page, haz clic en Apply variable mode.
- Pasa el cursor por la colección y elige el modo.
El modo se elige por colección. Un mismo marco puede tener Dark en Semantic color y Mobile en Layout: son dos elecciones independientes.
Auto y la herencia
Un elemento sin modo elegido está en Auto: usa el modo del contenedor que lo contiene. Si ese contenedor también está en Auto, Figma sigue subiendo por la jerarquía hasta encontrar un modo elegido o, si no lo encuentra, usa el modo por defecto de la colección (Figma: Modes for variables).
- El elemento, Sin modo elegido: está en Auto
- Sus contenedores, Del más cercano al más lejano
- La página, Si tiene un modo elegido
- El modo por defecto, La columna de la izquierda
- El elemento. Si tiene un modo elegido para esa colección, usa ese. Si no, está en Auto.
- Sus contenedores. Figma mira el marco que lo contiene, después el marco que contiene a ese, y así hacia arriba. El primero con un modo elegido decide.
- La página. Si ningún contenedor tiene un modo elegido, cuenta el de la página.
- El modo por defecto. Si nadie ha elegido, se usa la columna de la izquierda.
Lo comprobamos el 2026-10-05 con la API de plugins de Figma, en una colección temporal con Light y Dark:
- Sin ningún modo elegido, los elementos usaron Light, el modo por defecto.
- Con Dark elegido en un marco, lo usaron todos sus elementos, también los de un marco anidado. Los elementos seguían en Auto: no tenían modo propio.
- Con Dark elegido en la página, lo usaron los marcos que no tenían modo.
Recomendación
Elige el modo en el marco de cada pantalla, no en cada elemento. Los elementos de dentro lo heredan, y cambiar la pantalla de tema es cambiar un modo en un sitio.
Un marco dentro de otro
Un contenedor dentro de una pantalla puede elegir otro modo. En la misma prueba, con Dark elegido en el marco exterior y Light en un marco anidado, los elementos del marco anidado usaron Light, y el resto, Dark.
Sirve, por ejemplo, para mostrar una tarjeta en Light dentro de una pantalla en Dark, o para comparar los dos modos de un componente en una misma página de documentación.
Las pantallas de DesignToken101
Las plantillas de lección del archivo de Figma de DesignToken101 eligen el modo de las dos colecciones en el marco de cada pantalla:
| Pantalla | Semantic color | Layout |
|---|---|---|
| Escritorio, tema claro | Light | Desktop |
| Escritorio, tema oscuro | Dark | Desktop |
| Móvil, tema claro | Light | Mobile |
| Móvil, tema oscuro | Dark | Mobile |
Cuatro pantallas cubren todas las combinaciones de los dos ejes. Con una colección por eje, no hace falta ningún modo combinado: cada marco elige un modo de cada colección (Un eje por colección).
El ancho no elige el modo. En Figma, el modo de Layout lo eliges tú en cada marco: un marco de móvil en Desktop muestra los títulos de escritorio. En la web es al revés: el modo depende del ancho de la ventana, a partir de 64rem (1024 px). Ese corte no existe como variable en Figma; es un token de código (Los modos en código).
Instancias y componentes
Una instancia se comporta como cualquier elemento: hereda el modo del marco donde la colocas. Con una excepción que comprobamos el 2026-10-05 con la API de plugins de Figma:
- Con el componente principal sin modo elegido, su instancia dentro de un marco en Dark usó Dark.
- Con el componente principal con Light elegido, la misma instancia pasó a usar Light, aunque su marco estuviera en Dark. La instancia tomó el modo elegido en el componente principal.
Es decir: si eliges un modo en un componente principal, todas sus instancias lo usan, estén donde estén.
Recomendación
No elijas modo en un componente principal, salvo que el componente tenga que verse siempre en ese modo. Si quieres ver el componente en Dark mientras lo diseñas, elige el modo en la página o en un marco que lo contenga, no en el componente. Verás cómo se prueba un componente en todos los modos en El componente en Figma.
Lo que te llevas
- El modo se elige por colección, en un elemento o en la página, y los elementos en Auto lo heredan de su contenedor.
- Las pantallas de DesignToken101 eligen un modo de
Semantic colory uno deLayouten su marco: cuatro pantallas, cuatro combinaciones. - Un modo elegido en un componente principal lo usan todas sus instancias, estén donde estén.