El plan Starter permite el trabajo básico, pero tiene límites de organización y colaboración.
El curso usa un archivo, una página y varios marcos, sin depender de funciones pagadas.
Figma guarda los cambios en tu cuenta.
Espera a que aparezca el indicador de guardado antes de salir.
Más adelante también guardarás una copia local.
Las pantallas y los nombres pueden cambiar. Busca la función descrita y revisa el resultado; no memorices dónde están los botones.
Álvaro guarda la dirección en favoritos para no tener que buscar el archivo de nuevo.
Ficha completada · ejemplo de la lección
1Producto: Figma Design
2Archivo: Luz de Rua
3Comprobación: volver a abrir con permiso para editar
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Crea un archivo de Design, ponle nombre y confirma que puedas volver a abrirlo.
Álvaro revisa la ficha: volver a abrir con permiso para editar.
Ilustración didáctica creada con Codex: Tainá y Álvaro planean las piezas con fotografías y tarjetas. Es una escena ilustrativa, no una captura de Figma.
Ponte a prueba
El archivo solo permite ver. ¿Qué debes revisar antes de buscar herramientas?
Si te trabaste aquí, es normalSi no puedes iniciar sesión o editar, deja la práctica pendiente. Los siguientes pasos requieren un archivo accesible.
Practica ahora 0/3
Abre un archivo que puedas encontrar de nuevo
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando puedas volver a abrir el archivo con nombre y editarlo.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Abre un archivo que puedas encontrar de nuevo
Producto: Figma Design — <tu decisión>
Archivo: Luz de Rua — <tu decisión>
Comprobación: volver a abrir con permiso para editar — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás crear y volver a abrir un archivo de Figma Design.
Resumen de la lección
Abre un archivo que puedas encontrar de nuevo
Producto: Figma Design
Archivo: Luz de Rua
Comprobación: volver a abrir con permiso para editar
Tu siguiente paso
Ya tienes criterios para crear y volver a abrir un archivo de Figma Design.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Usa cinco reglas para encontrar el problema
Material complementario · módulo 1Producción y cuidados para retomar después de la práctica breve.
Figma Design es el espacio de trabajo de este curso
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Confirma el acceso antes de producir
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Observa el ejemplo de antes y después de esta lección.
La versión revisada organiza el llamado a la acción, la explicación y la fotografía.
Anota el problema que más dificulta la lectura.
Elige un cambio relacionado: quitar excesos, ampliar espacios, alinear o crear contraste.
Guarda tu evaluación con una captura de la pieza o una nota.
Si no ves ningún problema, anota qué criterios se cumplieron.
El ejercicio termina con un diagnóstico y una decisión, sin exigir un rediseño innecesario.
Álvaro puede explicar qué información debe leerse primero.
Composiciones originales · no son capturas de Figma
Versión para revisar
LUZ DE RUA ¡FOTOGRAFÍA! ¡MIRA! ¡APRENDE! ¡NUEVA EXPERIENCIA!
Demasiados llamados tienen la misma importancia.
Versión organizada · ejemplo didáctico
Luz de Rua
Aprende a observar la ciudad.
Un mensaje, pocas tipografías, espacio, repetición y contraste.
La segunda pieza prioriza el llamado y amplía la fotografía. Revisa los cinco criterios, sin juzgar solo por gusto.
3Comprueba la decisión según el uso
Elige un mensaje y corrige el problema que más dificulta su lectura.
Álvaro revisa la ficha: decisión: hacer un cambio justificado o conservar la pieza.
Ilustración didáctica creada con Codex: Muchos recortes compiten con una tarjeta de foco único. La escena ilustra la selección; el ejemplo con texto está en el marco de la lección.
Ponte a prueba
El título compite con cuatro llamados del mismo tamaño. ¿Qué cambio resuelve el problema?
Si te trabaste aquí, es normalNo necesitas términos de diseño. Señala qué leíste primero y qué fue difícil de entender.
Practica ahora 0/3
Usa cinco reglas para encontrar el problema
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando revises los cinco criterios y tomes una decisión justificada.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Usa cinco reglas para encontrar el problema
Lista: cinco criterios observables — <tu decisión>
Diagnóstico: un problema principal o ninguno — <tu decisión>
Decisión: hacer un cambio justificado o conservar la pieza — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás evaluar una pieza por su mensaje, tipografía, espacio, repetición y lectura.
Resumen de la lección
Usa cinco reglas para encontrar el problema
Lista: cinco criterios observables
Diagnóstico: un problema principal o ninguno
Decisión: hacer un cambio justificado o conservarla
Tu siguiente paso
Ya tienes criterios para evaluar una pieza por su mensaje, tipografía, espacio, repetición y lectura.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Planea una portada y tres páginas
Material complementario · módulo 1Producción y cuidados para retomar después de la práctica breve.
La claridad se puede observar
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Haz una corrección a la vez
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Elige un color de fondo, uno para el texto y otro de acento.
Reserva un lugar para el nombre y la numeración.
En el ejercicio, usaremos crema, azul petróleo y ocre.
Estas decisiones ayudan a reconocer la familia sin exigir imágenes idénticas.
Si vienes de Canva, piensa en una página del diseño.
En Figma, cada pieza estará en un marco.
Una página del archivo puede contener muchos marcos.
Así evitas crear varios archivos para un solo carrusel.
Álvaro distingue la página del archivo de los cuatro marcos que contiene.
Ficha completada · ejemplo de la lección
1Portada: presenta Luz de Rua
2Páginas: luz, detalle y serie
3Elementos fijos: colores, tipografía y firma
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Dale una función y un llamado a cada marco, y mantén una familia visual.
Álvaro revisa la ficha: elementos fijos: colores, tipografía y firma.
Ilustración didáctica creada con Codex: Cuatro tarjetas comparten colores y cambian las fotos. No tienen texto; la guía de práctica indica el mensaje de cada pieza.
Ponte a prueba
En Figma Design, ¿cómo organizas cuatro piezas de un mismo carrusel?
Si te trabaste aquí, es normalUsa los cuatro títulos del ejemplo si no tienes ideas. Añade una frase sencilla para cada uno.
Practica ahora 0/3
Planea una portada y tres páginas
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando las cuatro piezas tienen contenido definido y elementos fijos identificados.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Planea una portada y tres páginas
Portada: presenta Luz de Rua — <tu decisión>
Páginas: luz, detalle y serie — <tu decisión>
Elementos fijos: colores, tipografía y firma — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás escribir el contenido de cuatro piezas antes de diseñarlas.
Resumen de la lección
Planea una portada y tres páginas
Portada: presenta Luz de Rua
Páginas: luz, detalle y serie
Elementos fijos: colores, tipografía y firma
Tu siguiente paso
Ya tienes criterios para escribir el contenido de cuatro piezas antes de diseñarlas.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Crea un marco con dimensiones conocidas
Material complementario · módulo 1Producción y cuidados para retomar después de la práctica breve.
Cuatro piezas, una secuencia
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Elige los elementos que se repetirán
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 3 · Figma para Creadores v6.2 · INEMA.CLUB PRO
Módulo 2 · Lección 4 de 18
Crea un marco con dimensiones conocidas
Puedes crear un marco vertical de 1080 por 1350.
Un objeto grande en el espacio de trabajo no define la pieza final. El marco delimita lo que se exportará.
En 1 minuto
Marco: 00-Capa
Dimensiones: W 1080 y H 1350
El zoom cambia la vista, no el tamaño.
1El marco guarda las dimensiones y el contenido
En el archivo Luz de Rua, elige Frame en la barra de herramientas o presiona F fuera de la edición de texto.
Dibuja un marco vacío.
Con el marco seleccionado, busca W y H: ancho y alto.
Define 1080 y 1350.
Si hace falta, desactiva la proporción vinculada.
Cambia el nombre del marco a 00-Capa en la lista de capas.
El formato 4:5 es el objetivo de este ejercicio, no una regla permanente de la plataforma.
Para la entrega, revisa el destino real.
Una miniatura horizontal puede usar otro marco de 1280 por 720.
Tainá define el tamaño antes de colocar la fotografía.
Decisión poco sólida
Cambiar el zoom esperando modificar el tamaño del archivo exportado.
Decisión comprobable
Define el ancho y el alto del marco; usa el zoom solo para cambiar la vista.
Observa qué características hacen que la segunda decisión se pueda comprobar.
2El zoom de pantalla no cambia el archivo
Reducir el zoom ayuda a ver el marco completo.
Eso no cambia sus dimensiones.
Cambiar W y H modifica el marco.
Esta diferencia evita cambiar el tamaño de la pieza cuando solo querías verla mejor.
Selecciona 00-Capa en la lista para revisar el contorno del marco.
Deja espacio en el área de trabajo para duplicarlo después.
No hace falta crear otra página del archivo.
Mantén todas las piezas juntas para compararlas.
Álvaro reduce el zoom sin tocar los valores W y H.
Ficha completada · ejemplo de la lección
1Marco: 00-Capa
2Dimensiones: W 1080 y H 1350
3El zoom cambia la vista, no el tamaño
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Define el ancho y el alto del marco; usa el zoom solo para cambiar la vista.
Álvaro revisa la ficha: el zoom cambia la vista, no el tamaño.
Ilustración didáctica creada con Codex: Los papeles muestran formatos verticales y horizontales. Son una analogía de los límites del marco, no controles reales del programa.
Ponte a prueba
Reduces el zoom al 25%. ¿Qué pasa con las dimensiones del marco?
Si te trabaste aquí, es normalSi estás escribiendo texto, presiona Escape antes de F. Confirma que seleccionaste el marco, no una forma dentro de él.
Practica ahora 0/3
Crea un marco con dimensiones conocidas
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando el marco con nombre conserva 1080 por 1350 aunque cambies el zoom.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Crea un marco con dimensiones conocidas
Marco: 00-Capa — <tu decisión>
Dimensiones: W 1080 y H 1350 — <tu decisión>
Zoom: cambia la vista, no el tamaño — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás crear un marco vertical de 1080 por 1350.
Resumen de la lección
Crea un marco con dimensiones conocidas
Marco: 00-Capa
Dimensiones: W 1080 y H 1350
El zoom cambia la vista, no el tamaño
Tu siguiente paso
Ya tienes criterios para crear un marco vertical de 1080 por 1350.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Entiende el orden de las capas
Material complementario · módulo 2Producción y cuidados para retomar después de la práctica breve.
El marco guarda las dimensiones y el contenido
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
El zoom de pantalla no cambia el archivo
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 4 · Figma para Creadores v6.2 · INEMA.CLUB PRO
Módulo 2 · Lección 5 de 18
Entiende el orden de las capas
Puedes organizar dos formas dentro del marco y revisar cómo se superponen.
Si algo desaparece, quizá quedó cubierto o fuera del marco. Revisa la estructura antes de volver a dibujarlo.
En 1 minuto
Estructura: dos formas dentro de 00-Capa
Orden: tarjeta sobre fondo
Prueba: ocultar, mostrar y revisar el recorte
1Cada objeto ocupa una capa
Selecciona 00-Capa.
Usa Rectangle o R para dibujar dos rectángulos superpuestos dentro del marco.
Aplica colores distintos en Fill.
Observa los dos elementos en la lista de capas.
Lo que está más arriba suele quedar delante.
Ponles Fondo y Tarjeta a los rectángulos.
En la lista, arrastra Tarjeta encima de Fondo.
Revisa el cambio en pantalla.
Ambos deben quedar dentro de 00-Capa.
La sangría de la lista muestra la relación; arrástralos al marco si quedaron fuera.
Tainá nombra la forma antes de bloquearla.
Prompts para comparar · ejemplo didáctico
PromptEliminar objetos al azar cuando desaparece la fotografía.
Faltan límites observables para evaluar el trabajo.
PromptRevisar el orden, la visibilidad y si está dentro del marco antes de cambiar algo.
Hay criterios claros para comprobar la decisión.
Compara las dos instrucciones. Son ejemplos escritos para la lección, sin una respuesta simulada de la herramienta.
2Ocultar es una prueba reversible
Usa el control de visibilidad de una capa para ocultarla y volver a mostrarla.
Si el objeto vuelve a aparecer, encontraste la capa correcta.
Bloquear evita cambios accidentales.
Desbloquéalo cuando necesites ajustar el elemento.
La opción Clip content del marco recorta el contenido que sobrepasa sus límites.
No elimina el archivo original.
Mueve una forma parcialmente hacia afuera y observa el recorte.
Luego devuélvela a su lugar y conserva solo lo que quieres usar.
Álvaro usa la visibilidad para encontrar un objeto sin borrarlo.
Ficha completada · ejemplo de la lección
1Estructura: dos formas dentro de 00-Capa
2Orden: Tarjeta encima de Fondo
3Prueba: ocultar, mostrar y revisar el recorte
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Revisa el orden, la visibilidad y si está dentro del marco antes de cambiar algo.
Álvaro revisa la ficha: prueba: ocultar, mostrar y revisar el recorte.
Ilustración didáctica creada con Codex: Los papeles superpuestos representan el orden de los objetos. La escena muestra el mecanismo, no el panel de capas de Figma.
Ponte a prueba
La tarjeta aparece en la lista, pero otra forma la cubre. ¿Qué conviene revisar?
Si te trabaste aquí, es normalDeshacer recupera la prueba reciente. Cambia una cosa a la vez para descubrir qué capa cubría el tema.
Practica ahora 0/3
Entiende el orden de las capas
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando pruebes el orden y ambas formas estén dentro del marco.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Entiende el orden de las capas
Estructura: dos formas dentro de 00-Capa — <tu decisión>
Orden: Tarjeta encima de Fondo — <tu decisión>
Prueba: ocultar, mostrar y revisar el recorte — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás organizar dos formas dentro del marco y revisar cómo se superponen.
Resumen de la lección
Entiende el orden de las capas
Estructura: dos formas dentro de 00-Capa
Orden: Tarjeta encima de Fondo
Prueba: ocultar, mostrar y revisar el recorte
Tu siguiente paso
Ya tienes criterios para organizar dos formas dentro del marco y revisar cómo se superponen.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Coloca la imagen sin recortar el tema principal
Material complementario · módulo 2Producción y cuidados para retomar después de la práctica breve.
Cada objeto ocupa una capa
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Ocultar es una prueba reversible
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Compara una versión que recorta el arco con otra que lo conserva.
La foto invita a observar la arquitectura.
Perder el arco puede debilitar esa intención.
Si usas otra foto, decide primero qué detalle debe mantenerse.
La imagen del kit se generó con Codex y representa una calle ficticia.
No demuestra que exista un recorrido ni un lugar.
Puedes usar una fotografía propia y autorizada.
Guarda la fuente por separado para cambiar el encuadre cuando cambie el formato.
Álvaro guarda la imagen fuente para probar otro formato después.
Ficha completada · ejemplo de la lección
1Fuente: imagen guardada en la computadora
2Modo: Fit, Fill o Crop con un motivo
3Comprobación: conservar visible el arco de la ventana
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Elegir un recorte que conserve el detalle que sostiene el mensaje.
Álvaro revisa la ficha: conservar visible el arco de la ventana.
Ilustración didáctica creada con Codex: Dos encuadres muestran el arco con márgenes distintos. Compara el espacio alrededor antes de decidir el recorte de la portada.
Ponte a prueba
Fill recorta el arco que explica la imagen. ¿Qué paso conviene dar?
Si te trabaste aquí, es normalSi el archivo queda fuera del marco, busca su capa en la lista y muévela a 00-Capa. No necesitas importarlo de nuevo.
Practica ahora 0/3
Coloca la imagen sin recortar el tema principal
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando la imagen esté en el marco y el detalle principal siga visible.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Coloca la imagen sin recortar el tema principal
Fuente: imagen guardada en la computadora — <tu decisión>
Modo: Fit, Fill o Crop con un motivo — <tu decisión>
Comprobación: conservar visible el arco de la ventana — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás insertar una imagen y elegir entre ajustarla o recortarla.
Resumen de la lección
Coloca la imagen sin recortar el tema principal
Fuente: imagen guardada en la computadora
Modo: Fit, Fill o Crop con un motivo
Comprobación: conservar visible el arco de la ventana
Tu siguiente paso
Ya tienes criterios para insertar una imagen y elegir entre ajustarla o recortarla.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Haz que tres niveles de texto trabajen juntos
Material complementario · módulo 2Producción y cuidados para retomar después de la práctica breve.
Una imagen puede llenar una forma
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
El recorte debe respetar el mensaje
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Para revisar el espacio entre líneas, haz una copia del título.
Reduce el ancho de la caja hasta que el título ocupe dos líneas.
En Line height, prueba 72 píxeles con letras de tamaño 64.
Compáralo con un valor menor y observa si las líneas quedan apretadas.
Después restaura la portada de una línea y elimina la prueba.
Lee una frase con tildes, como Observação da cidade.
Comprueba que la fuente elegida muestre todos los caracteres.
Después reduce la vista al tamaño aproximado de uso.
Si debes ampliar para leer, ajusta la pieza antes de agregar adornos.
Álvaro revisa las tildes antes de duplicar la pieza.
Ejemplo de jerarquía · diagrama original
Luz de Rua
Aprende a observar la ciudad.
Ejemplo didáctico
Tres niveles visibles. Este ejemplo se redujo para que se lea en el curso; en un marco de 1080 por 1350, empieza con 64, 32 y 28.
3Comprueba la decisión según el uso
Usar tres funciones de texto y revisar tamaño, saltos de línea e interlineado.
Álvaro usa la ficha para revisar: revisión: tildes, saltos e interlineado.
Ilustración didáctica creada en Codex: Los bloques de distintos tamaños ilustran la jerarquía. El ejemplo con texto real está en el marco de la lección; los bloques no demuestran legibilidad.
Ponte a prueba
Las líneas del título están muy juntas. ¿Qué propiedad controla directamente ese espacio?
Es normal trabarse aquíSi T escribe una letra en el texto actual, pulsa Escape y selecciona la herramienta Text. Revisa la capa antes de cambiar sus propiedades.
Practica ahora 0/3
Haz que tres niveles de texto trabajen juntos
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando las tres capas de texto se pueden editar, no están recortadas y tienen un orden de lectura claro.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Haz que funcionen juntos tres niveles de texto
Encabezado: 64 como punto de partida — <tu decisión>
Texto de apoyo y firma: 32 y 28 — <tu decisión>
Revisión: tildes, saltos e interlineado — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás crear un encabezado, un texto de apoyo y una firma que se lean con claridad.
Resumen de la lección
Haz que tres niveles de texto trabajen juntos
Encabezado: 64 como punto de partida
Texto de apoyo y firma: 32 y 28
Revisión: tildes, saltos e interlineado
Tu siguiente paso
Ya tienes criterios para crear un encabezado, un texto de apoyo y una firma legibles.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Alinea desde el mismo inicio y repite los espacios
Material complementario · módulo 3Producción y cuidados para retomar después de la práctica breve.
El texto es una capa editable
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
El interlineado organiza el bloque
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 7 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 3 · Lección 8 de 18
Alinea desde el mismo inicio y repite los espacios
Puedes organizar tres objetos con alineación y espacios regulares.
Los objetos casi alineados generan ruido visual. Usa los controles para comprobar lo que notaste a simple vista.
En 1 minuto
Selección: tres objetos del mismo conjunto
Espacio de prueba: 24 unidades
Margen inicial del texto: 64 unidades
1La selección define la alineación
Selecciona tres objetos del mismo marco y mantén Shift al hacer clic.
Usa Align left para alinearlos desde el borde izquierdo.
Comprueba qué objetos quedaron seleccionados.
Cuando solo se marca un objeto, la alineación puede usar el marco principal como referencia.
Para practicar, usa tres rectángulos de prueba fuera de la portada.
Colócalos en una columna, selecciona los tres y usa Tidy up o la distribución vertical.
Observa el espacio entre ellos.
Si está disponible, escribe 24 en el campo de espaciado.
Tainá selecciona solo los objetos que deben compartir el espacio.
Prompts para comparar · ejemplo didáctico
SolicitudArrastrar cada elemento hasta que parezca más o menos alineado.
Faltan límites observables para evaluar el trabajo.
SolicitudSeleccionar los objetos correctos, alinearlos y revisar los espacios.
Hay criterios claros para comprobar la decisión.
Compara las dos instrucciones. Son ejemplos escritos para la lección, sin una respuesta simulada de la herramienta.
2El margen es parte de la composición
En la portada, reserva un margen inicial de 64 unidades para la zona de texto.
Es una elección para este ejercicio, no una norma universal.
Comprueba que el encabezado, el texto de apoyo y la firma comiencen en el mismo punto.
Usa guías visuales y campos de posición para ajustarlos.
No apliques la organización automática a toda la pieza sin revisarla.
El programa no sabe qué importancia tiene cada elemento.
Tidy up puede mover más elementos de los que quieres.
Pruébalo en una copia o deshazlo si la composición deja de tener sentido.
Álvaro revisa el margen de la portada después de la prueba por separado.
Ficha completada · ejemplo de la lección
1Selección: tres objetos del mismo conjunto
2Espacio de prueba: 24 unidades
3Margen inicial del texto: 64 unidades
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Seleccionar los objetos correctos, alinearlos y revisar los espacios.
Álvaro usa la ficha para revisar: margen inicial del texto: 64 unidades.
Ilustración didáctica creada en Codex: La regla y las fotos ilustran la alineación y la repetición de espacios. Es una analogía física, no medidas exactas para copiar.
Ponte a prueba
Tidy up cambió toda la composición de una forma no deseada. ¿Qué debes hacer?
Es normal trabarse aquíSi no aparecen los controles, comprueba que seleccionaste varios objetos. Alinear y distribuir son acciones distintas.
Practica ahora 0/3
Alinea desde el mismo inicio y repite los espacios
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando la prueba tiene tres objetos alineados y los textos de la portada comparten el mismo inicio.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Alinea desde el mismo inicio y repite los espacios
Selección: tres objetos del mismo conjunto — <tu decisión>
Espacio de prueba: 24 unidades — <tu decisión>
Margen inicial del texto: 64 unidades — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás organizar tres objetos con alineación y espacios regulares.
Resumen de la lección
Alinea desde el mismo inicio y repite los espacios
Selección: tres objetos del mismo conjunto
Espacio de prueba: 24 unidades
Margen inicial del texto: 64 unidades
Tu siguiente paso
Ya tienes criterios para organizar tres objetos con alineación y espacios regulares.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Distingue relleno, contorno y degradado
Material complementario · módulo 3Producción y cuidados para retomar después de la práctica breve.
La selección define la alineación
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
El margen es parte de la composición
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 8 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 3 · Lección 9 de 18
Distingue relleno, contorno y degradado
Puedes probar un color sólido, un borde y un degradado sin confundir sus funciones.
Cambiar la propiedad equivocada puede recargar la pieza. Identifica qué parte del objeto estás modificando.
En 1 minuto
Fill: área interior
Stroke: contorno del objeto
Linear: transición entre puntos
1El relleno cubre un área; el contorno marca su borde
Crea tres cuadrados de prueba.
En el primero, elige Fill sólido en azul petróleo #173B46.
En el segundo, quita el relleno y agrega Stroke, el contorno.
Ajusta su grosor y revisa el borde.
En el tercero, prueba un relleno Linear, el degradado.
En un degradado, cada punto controla un color y su opacidad.
Usa azul petróleo en un extremo y reduce la opacidad en el otro.
La línea de control cambia la dirección de la transición.
Esto puede servir para suavizar un área detrás del texto.
Tainá usa el contorno para separar una tarjeta sin cubrir la imagen.
Decisión poco sólida
Sumar un borde grueso, un relleno intenso y un degradado en todos los objetos.
Decisión comprobable
Asignar una función concreta a cada propiedad y revisar el resultado.
Observa qué características hacen que la segunda decisión se pueda comprobar.
2La paleta necesita funciones claras
Usa crema #F7F1E6 para el fondo, azul #173B46 para el texto y ocre #C58B35 para destacar.
Copia cada código en el campo de color.
Es la identificación del color, no un comando.
No uses ocre automáticamente en texto pequeño; revisa el contraste de la combinación.
Quita los efectos de los cuadrados para observar solo la propiedad que estás estudiando.
Después aplica una elección a la portada y revisa la lectura.
Un degradado bonito puede competir con la fotografía.
Consérvalo solo si ayuda a separar la información.
Álvaro identifica el color del texto por su código y no solo por el nombre.
Ficha completada · ejemplo de la lección
1Fill: área interior
2Stroke: borde del objeto
3Linear: transición entre puntos
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Asignar una función concreta a cada propiedad y revisar el resultado.
Álvaro usa la ficha para revisar: linear: transición entre puntos.
Ilustración didáctica creada en Codex: Las muestras rellenas, los bordes vacíos y una transición ilustran tres funciones. Revisa los controles reales en el objeto seleccionado.
Ponte a prueba
Quieres solo un marco, sin área de color en el centro. ¿Qué debes configurar?
Es normal trabarse aquíSi el color no cambia, comprueba qué capa está seleccionada. El Fill del texto cambia las letras; el fondo necesita otra forma o el propio marco.
Practica ahora 0/3
Distingue relleno, contorno y degradado
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando existen las tres pruebas y anotaste una elección para la portada.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Distingue relleno, contorno y degradado
Fill: área interior — <tu decisión>
Stroke: borde del objeto — <tu decisión>
Linear: transición entre puntos — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás probar un color sólido, un borde y un degradado sin confundir sus funciones.
Resumen de la lección
Distingue relleno, contorno y degradado
Fill: área interior
Stroke: borde del objeto
Linear: transición entre puntos
Tu siguiente paso
Ya tienes criterios para probar un color sólido, un borde y un degradado sin confundir sus funciones.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Separa el texto de la fotografía
Material complementario · módulo 3Producción y cuidados para retomar después de la práctica breve.
El relleno cubre un área; el contorno marca su borde
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
La paleta necesita funciones claras
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 9 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 4 · Lección 10 de 18
Separa el texto de la fotografía
Puedes crear un área de lectura sin ocultar el tema principal.
Una foto tiene zonas claras y oscuras. Un encabezado puede desaparecer en una zona y verse bien en otra.
En 1 minuto
Orden: foto, superposición, texto
Alternativa: tarjeta sólida para medir el contraste
Prueba: frase legible y tema reconocible
1La superposición necesita un orden claro
Selecciona 00-Capa en la lista y elige Duplicate en el menú contextual.
El atajo es Ctrl+D en Windows o Cmd+D en Mac.
Trabaja en la copia para conservar la versión actual.
Sobre la fotografía, crea un rectángulo azul #173B46.
Deja el rectángulo debajo del texto y encima de la foto.
Reduce la opacidad del relleno para ver la imagen por debajo.
Ajusta el área y la intensidad mirando la frase completa.
No hay un porcentaje que sirva para todas las fotos.
Si el texto aún se lee mal, coloca una tarjeta de color sólido detrás.
La imagen puede seguir visible en el resto del área.
Tainá usa una tarjeta sólida cuando la foto dificulta la lectura.
Decisión poco sólida
Colocar texto claro en cualquier parte de la foto y agregar una sombra intensa.
Decisión comprobable
Crear un área de lectura estable y revisar el contraste y el tema.
Observa qué características hacen que la segunda decisión se pueda comprobar.
Revisar el contraste: Foreground Color es el color del texto; Background Color es el fondo.
2La prueba es la lectura, no el efecto
El crema #F7F1E6 sobre azul #173B46 forma la combinación de texto del ejemplo.
Revisa la relación con el verificador recomendado.
Para texto normal, usa 4,5 a 1 como referencia mínima.
Sobre una fotografía, la relación cambia según el punto; un fondo sólido facilita medirla.
Compara la versión anterior y la nueva en el tamaño de uso.
El encabezado debe verse claro y la ventana debe seguir siendo reconocible.
Si la superposición oculta el tema, reduce su área o cambia la posición del texto.
Conserva visible la información principal.
Álvaro comprueba que la ventana siga reconocible después de agregar la superposición.
Ficha completada · ejemplo de la lección
1Orden: foto, superposición, texto
2Alternativa: tarjeta sólida para medir el contraste
3Prueba: frase legible y tema reconocible
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Crear un área de lectura estable y revisar el contraste y el tema.
Álvaro usa la ficha para revisar: prueba: frase legible y tema reconocible.
Ilustración didáctica creada en Codex: El acetato representa una capa entre la foto y la tarjeta. El diseño real necesita texto legible; la escena no mide el contraste.
Ponte a prueba
La superposición casi no deja ver la foto. ¿Qué ajuste conserva su función?
Es normal trabarse aquíSi el rectángulo cubre las letras, ajusta el orden en la lista de capas. La opacidad del relleno y el orden resuelven problemas distintos.
Practica ahora 0/3
Separa el texto de la fotografía
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando comparaste dos versiones y revisaste un área de lectura.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Separa el texto de la fotografía
Orden: foto, superposición, texto — <tu decisión>
Alternativa: tarjeta sólida para medir el contraste — <tu decisión>
Prueba: frase legible y tema reconocible — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás crear un área de lectura sin ocultar el tema principal.
Resumen de la lección
Separa el texto de la fotografía
Orden: foto, superposición, texto
Alternativa: tarjeta sólida para medir el contraste
Prueba: frase legible y tema reconocible
Tu siguiente paso
Ya tienes criterios para crear un área de lectura sin ocultar el tema principal.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Usa el desenfoque para apoyar la información
Material complementario · módulo 4Producción y cuidados para retomar después de la práctica breve.
La superposición necesita un orden claro
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
La prueba es la lectura, no el efecto
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 10 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 4 · Lección 11 de 18
Usa el desenfoque para apoyar la información
Puedes probar un fondo desenfocado y decidir si mejora la pieza.
El exceso de desenfoque puede distraer o volver lento el editor. Conserva nítido un tema y prueba la función del fondo.
En 1 minuto
Layer blur: afecta la capa misma
Background blur: afecta el contenido de atrás
Decisión: ¿ayuda el efecto o funciona mejor la versión sencilla?
1El desenfoque puede afectar distintas capas
En una copia de la portada, duplica la foto.
Coloca el duplicado debajo del original en la lista de capas y agrándalo para llenar el marco.
Reduce el original que está encima para dejar visibles los bordes del fondo.
Selecciona solo el duplicado.
En Effects, agrega un efecto y elige Layer blur.
Aumenta el valor poco a poco; el fondo debe perder nitidez y la foto principal debe seguir nítida.
Background blur funciona de otra manera: desenfoca lo que está detrás de la forma seleccionada.
Para notar el resultado, el relleno de esa forma debe ser transparente.
Úsalo solo si hay contenido detrás y revisa el efecto en el conjunto.
Tainá mantiene nítida la ventana principal para conservar el mensaje.
Prompts para comparar · ejemplo didáctico
SolicitudAplicar mucho desenfoque a todo, incluido el tema y el texto.
Faltan límites observables para evaluar el trabajo.
SolicitudDesenfocar solo el apoyo y conservar nítida la información principal.
Hay criterios claros para comprobar la decisión.
Compara las dos instrucciones. Son ejemplos escritos para la lección, sin una respuesta simulada de la herramienta.
2El vidrio y la atmósfera son opcionales
Una tarjeta translúcida con desenfoque puede parecer de vidrio.
Solo ayuda si el texto sigue siendo legible.
Una tarjeta sólida también funciona.
Compara las dos opciones sin cambiar el encabezado para saber qué produjo la mejora.
No copies un valor alto, como 180, sin tener en cuenta el tamaño de la pieza.
Empieza con poco y observa.
Varios efectos pueden reducir el rendimiento.
Si la edición se vuelve lenta, oculta los efectos de prueba y conserva la alternativa sencilla.
Álvaro prefiere la tarjeta sólida si el efecto no mejora la lectura.
Ficha completada · ejemplo de la lección
1Layer blur: afecta la capa misma
2Background blur: afecta el contenido de atrás
3Decisión: ¿ayuda el efecto o funciona mejor la versión sencilla?
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Desenfocar solo el apoyo y conservar nítida la información principal.
Álvaro usa la ficha para revisar: decisión: ¿ayuda el efecto o funciona mejor la versión sencilla?
Ilustración didáctica creada en Codex: La escena presenta un tema nítido y una versión difusa como apoyo. Ilustra la diferencia visual, pero no muestra el control de Figma.
Ponte a prueba
Aplicas Layer blur al título y pierde nitidez. ¿Qué ocurrió?
Es normal trabarse aquíNo tienes que conservar el desenfoque para terminar. La entrega de esta lección es una prueba y una decisión registrada.
Practica ahora 0/3
Usa el desenfoque para apoyar la información
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando probaste el efecto y registraste la decisión en una versión real.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Usa el desenfoque para apoyar la información
Layer blur: afecta la capa misma — <tu decisión>
Background blur: afecta el contenido de atrás — <tu decisión>
Decisión: ¿ayuda el efecto o funciona mejor la versión sencilla? — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás probar un fondo desenfocado y decidir si mejora la pieza.
Resumen de la lección
Usa el desenfoque para apoyar la información
Layer blur: afecta la capa misma
Background blur: afecta el contenido de atrás
Decisión: ¿ayuda el efecto o funciona mejor la versión sencilla?
Tu siguiente paso
Ya tienes criterios para probar un fondo desenfocado y decidir si mejora la pieza.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Usa una máscara para revelar un detalle
Material complementario · módulo 4Producción y cuidados para retomar después de la práctica breve.
El desenfoque puede afectar distintas capas
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
El vidrio y la atmósfera son opcionales
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 11 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 4 · Lección 12 de 18
Usa una máscara para revelar un detalle
Puedes crear y revisar un recorte circular reversible.
Recortar el archivo original elimina opciones. Una máscara permite probar el área visible dentro de la composición.
En 1 minuto
Máscara: forma debajo de la foto
Selección: forma y foto para crear el grupo
Revisión: detalle visible sin perder su propósito
1La forma define la ventana visible
Haz la prueba fuera de la portada con una copia de la foto.
Elige Ellipse o pulsa O.
Dibuja la elipse manteniendo Shift para formar un círculo y colócala sobre el detalle.
En la lista de capas, coloca la elipse debajo de la foto.
Selecciona ambas y elige Use as mask en el menú contextual.
La máscara limita la parte de la foto que se muestra.
Revisa el grupo creado en la lista.
Si desaparece todo, revisa el orden, la posición y la selección.
La forma de la máscara no detecta automáticamente el contorno de un objeto; revela el área que dibujaste.
Tainá prueba el recorte en una copia para conservar la portada.
Decisión poco sólida
Borrar partes de la foto original para probar un detalle.
Decisión comprobable
Usar una máscara reversible y revisar qué capa se está moviendo.
Observa qué características hacen que la segunda decisión se pueda comprobar.
2Mover la foto y mover la máscara son cosas distintas
Dentro del grupo, selecciona la foto para ajustar el detalle visible.
Selecciona la máscara para cambiar la forma de la ventana.
Observa qué capa está resaltada antes de arrastrar.
Para deshacer la prueba, elige Undo o quita la función de máscara.
Una máscara circular puede destacar la textura o una perilla, pero ocultar la forma del arco.
Decide si el recorte ayuda al mensaje.
No confundas una máscara con quitar el fondo con IA.
El ejercicio usa una ventana geométrica y no requiere un servicio adicional.
Álvaro selecciona la foto dentro del grupo antes de ajustar el detalle.
Ficha completada · ejemplo de la lección
1Máscara: forma debajo de la foto
2Selección: forma y foto para crear el grupo
3Revisión: detalle visible sin perder su propósito
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Usar una máscara reversible y revisar qué capa se está moviendo.
Álvaro usa la ficha para revisar: revisión: detalle visible sin perder su propósito.
Ilustración didáctica creada en Codex: El papel recortado deja ver una parte de la imagen. Es una analogía; en Figma, la máscara queda debajo de la fotografía en la lista de capas.
Ponte a prueba
Quieres cambiar el detalle dentro del círculo sin moverlo. ¿Qué debes seleccionar?
Es normal trabarse aquíComprueba que la elipse esté debajo de la foto y que ambas se superpongan. Una máscara lejos del tema puede parecer vacía.
Practica ahora 0/3
Usa una máscara para revelar un detalle
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando la máscara funciona y revisaste qué ocurre al mover la foto.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Usa una máscara para revelar un detalle
Máscara: forma debajo de la foto — <tu decisión>
Selección: forma y foto para crear el grupo — <tu decisión>
Revisión: detalle visible sin perder su propósito — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás crear y revisar un recorte circular reversible.
Resumen de la lección
Usa una máscara para revelar un detalle
Máscara: forma debajo de la foto
Selección: forma y foto para crear el grupo
Revisión: detalle visible sin perder su propósito
Tu siguiente paso
Ya tienes criterios para crear y revisar un recorte circular reversible.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Guarda estilos para repetir tus elecciones
Material complementario · módulo 4Producción y cuidados para retomar después de la práctica breve.
La forma define la ventana visible
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Mover la foto y mover la máscara son cosas distintas
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 12 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 5 · Lección 13 de 18
Guarda estilos para repetir tus elecciones
Puedes crear y aplicar un estilo de texto local.
Repetir valores a mano aumenta las diferencias accidentales. Un estilo reúne propiedades para volver a usarlas.
En 1 minuto
Estilo: Title/Light
Prueba: dos capas de texto vinculadas responden al cambio
Por separado: color y alineación
1El estilo de texto guarda la apariencia de las letras
Selecciona el título y revisa Inter, Bold, tamaño 64 e interlineado 72.
En Typography, abre el selector de estilos y crea Title/Light.
Aplica ese estilo a una capa de texto de prueba.
Los estilos de texto guardan la fuente, el peso, el tamaño y los espaciados.
El color y la alineación son independientes del estilo de texto.
Revisa Fill para el color y el control de alineación para la posición.
Un título puede usar el mismo estilo tipográfico con otro color si sigue siendo legible.
Tainá nombra el estilo según su función para encontrarlo otra vez.
Decisión poco sólida
Copiar valores parecidos en cada título y llamar a eso un estilo.
Decisión comprobable
Aplicar un estilo local y comprobar si al cambiarlo se actualizan los textos vinculados.
Observa qué características hacen que la segunda decisión se pueda comprobar.
2Edita el estilo para comprobar el vínculo
Abre el estilo que creaste y cambia temporalmente el tamaño a 68.
Revisa el título y el texto de prueba vinculados.
Después restablece 64.
Si uno no cambia, comprueba si recibió el estilo o solo valores parecidos.
Guarda una captura de esta comprobación.
El curso usa estilos locales dentro del mismo archivo.
No necesitas publicar una biblioteca para un equipo.
Publicar y compartir bibliotecas depende del plan.
También puedes crear estilos de color desde el selector Fill, pero es un paso aparte.
Álvaro revisa el color por separado, sin deshacer el estilo.
Ficha completada · ejemplo de la lección
1Estilo: Title/Light
2Prueba: dos capas de texto vinculadas responden al cambio
3Por separado: color y alineación
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Aplicar un estilo local y comprobar si al cambiarlo se actualizan los textos vinculados.
Álvaro usa la ficha para revisar: por separado: color y alineación.
Ilustración didáctica creada en Codex: Las tarjetas con un tratamiento repetido ilustran la coherencia. En el archivo, comprueba el vínculo por el nombre del estilo.
Ponte a prueba
Cambió el estilo tipográfico, pero no el color. ¿Qué explicación corresponde a esta función?
Es normal trabarse aquíComprueba si editaste el estilo o solo un texto. Tener valores iguales no demuestra que las capas estén vinculadas.
Practica ahora 0/3
Guarda estilos para repetir tus elecciones
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando dos capas de texto usan el estilo y respondieron a la prueba de edición.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Guarda estilos para repetir tus elecciones
Estilo: Title/Light — <tu decisión>
Prueba: dos capas de texto vinculadas responden al cambio — <tu decisión>
Por separado: color y alineación — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás crear y aplicar un estilo de texto local.
Resumen de la lección
Guarda estilos para repetir tus elecciones
Estilo: Title/Light
Prueba: dos capas de texto vinculadas responden al cambio
Por separado: color y alineación
Tu siguiente paso
Ya tienes criterios para crear y aplicar un estilo de texto local.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Crea un componente y revisa sus copias
Material complementario · módulo 5Producción y cuidados para retomar después de la práctica breve.
El estilo de texto guarda la apariencia de las letras
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Edita el estilo para comprobar el vínculo
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 13 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 5 · Lección 14 de 18
Crea un componente y revisa sus copias
Puedes probar un cambio en el componente principal y en dos instancias.
Duplicar una forma común crea copias independientes. Un componente mantiene vinculada una parte que se repite.
En 1 minuto
Componente principal: Marca/Ponto
Instancias: dos copias vinculadas
Prueba: el color cambia en el componente principal y en las dos copias
1El componente principal funciona como matriz
Fuera de la portada, dibuja una elipse de 32 por 32 y elige ocre en Fill.
Selecciona solo esa elipse y elige Create component.
Ponle el nombre Marca/Ponto.
Ese es el componente principal.
Duplícalo dos veces para crear instancias, las copias vinculadas.
En la lista, una instancia aparece identificada como componente.
También puedes insertarla desde el panel Assets, en los componentes locales.
No uses el componente principal como un adorno perdido en la portada.
Déjalo en un área de referencia del mismo archivo.
Tainá guarda el componente principal fuera del área de exportación.
Prompts para comparar · ejemplo didáctico
SolicitudDuplicar círculos comunes y esperar que todos cambien juntos.
Faltan límites observables para evaluar el trabajo.
SolicitudCrear el componente principal, insertar instancias y probar una propiedad sin cambios locales.
Hay criterios claros para comprobar la decisión.
Compara las dos instrucciones. Son ejemplos escritos para la lección, sin una respuesta simulada de la herramienta.
2Prueba antes de repetirlo en toda la serie
Cambia a azul petróleo el color del componente principal.
Comprueba si se actualizan las dos instancias.
Después restaura el ocre.
En esta prueba, no cambies por separado el color de las instancias.
Los cambios locales pueden reemplazar una propiedad heredada y modificar el resultado esperado.
Usa una instancia como marcador pequeño en cada pieza si ayuda a la lectura.
No hace falta convertir toda la portada en un componente.
Primero comprende un objeto sencillo.
Si una copia no se actualiza, revisa el vínculo y los cambios locales antes de rehacer todo.
Álvaro prueba dos instancias antes de repetir la marca en las páginas.
Ficha completada · ejemplo de la lección
1Principal: Marca/Ponto
2Instancias: dos copias vinculadas
3Prueba: cambia el color en el principal y las dos copias
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Crea el principal, agrega instancias y prueba una propiedad sin cambios locales.
Álvaro usa la ficha para revisar: prueba: cambia el color en el principal y las dos copias.
Ilustración didáctica creada en Codex: Tres tarjetas repiten un marcador pequeño. La escena ilustra la repetición; comprueba el vínculo en Figma.
Ponte a prueba
Dos instancias sin cambios locales deben recibir un color nuevo. ¿Dónde debes editarlo?
Es normal trabarse aquíSi solo cambió una copia, comprueba si es una instancia y si su color tiene un cambio local.
Practica ahora 0/3
Crea un componente y revisa sus copias
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando el principal y las dos instancias responden a la prueba de color.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Crea un componente y revisa sus copias
Principal: Marca/Ponto — <tu decisión>
Instancias: dos copias vinculadas — <tu decisión>
Prueba: cambia el color en el principal y las dos copias — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás probar un cambio en el componente principal y dos instancias.
Resumen de la lección
Crea un componente y revisa sus copias
Principal: Marca/Ponto
Instancias: dos copias vinculadas
Prueba: cambia el color en el principal y las dos copias
Tu siguiente paso
Ya tienes criterios para probar un cambio en el componente principal y dos instancias.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Dibuja una línea y evalúa los complementos
Material complementario · módulo 5Producción y cuidados para retomar después de la práctica breve.
El principal funciona como matriz
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Prueba antes de repetirlo en toda la serie
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 14 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 5 · Lección 15 de 18
Dibuja una línea y evalúa los complementos
Puedes crear una línea sencilla y decidir si necesitas un complemento.
Buscar complementos antes de entender la tarea puede sumar costos sin resolver la composición.
En 1 minuto
Línea: tres puntos y dos segmentos
Apariencia: Stroke azul petróleo, grosor 4
Complemento: necesidad anotada o ninguno
1La pluma conecta puntos editables
En un área de prueba, elige Pen o pulsa P.
Haz clic en tres posiciones para dibujar una línea con dos segmentos.
Termina con Esc.
Selecciona la línea, quita Fill si aparece y configura Stroke en azul petróleo con grosor 4.
Usa pocos puntos.
La línea debe guiar la mirada entre tres detalles, sin parecer un mapa real.
Para curvar un tramo, prueba arrastrar al crear un punto en una copia.
La práctica obligatoria usa segmentos rectos.
No requiere herramientas avanzadas de dibujo.
Tainá empieza con pocos puntos para controlar el dibujo.
Decisión poco sólida
Agregar una extensión porque parece popular, sin una tarea concreta.
Decisión comprobable
Resuelve la línea con la pluma y considera un complemento solo si tienes una necesidad clara.
Observa qué características hacen que la segunda decisión se pueda comprobar.
2Los complementos agregan funciones de terceros
Antes de usar un complemento, anota qué problema resolvería.
En el área de herramientas, busca Plugins y lee la descripción, quién lo mantiene y las condiciones.
Un elemento de la comunidad puede requerir pago o acceso a datos.
Que exista un botón no significa que haga falta esa función.
Para esta serie bastan las formas, los textos y las imágenes del propio archivo.
Si ese es el caso, anota que no hace falta un complemento.
Las funciones adicionales de dibujo o video pueden depender del plan.
Ninguna es necesaria para exportar las piezas estáticas del curso.
Álvaro anota que no necesita un complemento para la tarea actual.
Ficha completada · ejemplo de la lección
1Línea: tres puntos y dos segmentos
2Apariencia: Stroke azul petróleo, grosor 4
3Complemento: necesidad anotada o ninguno
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Resuelve la línea con la pluma y considera un complemento solo si tienes una necesidad clara.
Álvaro usa la ficha para revisar: complemento: necesidad anotada o ninguno.
Ilustración didáctica creada en Codex: Aparece una curva debajo de tres íconos de cámara. Ilustra un recorrido visual; la práctica usa tres puntos y dos segmentos rectos.
Ponte a prueba
Solo tienes que conectar tres detalles con una línea. ¿Qué primer paso sirve para el caso?
Es normal trabarse aquíSi aparece un bloque relleno, quita Fill. Si desaparece la línea, revisa Stroke y el grosor.
Practica ahora 0/3
Dibuja una línea y evalúa los complementos
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando se ve la línea y justificaste tu decisión sobre el complemento.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Dibuja una línea y evalúa los complementos
Línea: tres puntos y dos segmentos — <tu decisión>
Apariencia: Stroke azul petróleo, grosor 4 — <tu decisión>
Complemento: necesidad anotada o ninguno — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás crear una línea sencilla y decidir si necesitas un complemento.
Resumen de la lección
Dibuja una línea y evalúa los complementos
Línea: tres puntos y dos segmentos
Apariencia: Stroke azul petróleo, grosor 4
Complemento: necesidad anotada o ninguno
Tu siguiente paso
Ya tienes criterios para crear una línea sencilla y decidir si necesitas un complemento.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Revisa la pieza con preguntas concretas
Material complementario · módulo 5Producción y cuidados para retomar después de la práctica breve.
La pluma conecta puntos editables
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Los complementos agregan funciones de terceros
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 15 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 6 · Lección 16 de 18
Revisa la pieza con preguntas concretas
Puedes preparar una revisión y registrar una decisión sobre la portada.
Preguntar solo si quedó bonita produce respuestas difíciles de usar. Una revisión debe mostrar el problema y el criterio.
En 1 minuto
Preguntas: mensaje principal y dificultad de lectura
Registro: comentario, interpretación y decisión en campos separados
Estado: evaluación propia hecha; conversación externa hecha o pendiente
1Pide que la lean antes de explicar
Muestra la portada y pregunta: ¿cuál es el mensaje principal?
Después pregunta qué fue difícil de leer.
Registra las palabras de la persona aparte de tu interpretación.
En Figma, Share reúne las opciones de acceso.
Para una revisión, elige acceso de lectura cuando esté disponible, sin conceder edición innecesaria.
Los permisos dependen de la cuenta, el lugar del archivo y el plan.
Los borradores de Starter tienen límites de colaboración.
Como alternativa, muestra la pieza en tu pantalla o envía una imagen exportada en la próxima lección.
No muevas el archivo a un equipo sin revisar las condiciones.
Tainá anota el comentario recibido antes de proponer una solución.
Decisión poco sólida
Pedir aprobación general y cambiar todos los colores tras una opinión.
Decisión comprobable
Preguntar por el mensaje y la lectura, registrar el comentario y probar un cambio relacionado con el problema.
Observa qué características hacen que la segunda decisión se pueda comprobar.
2Una observación se vuelve decisión cuando tiene un criterio
Ejemplo ficticio: la persona leyó «fotografía», pero no notó la indicación de observar la ciudad.
Hipótesis: el subtítulo destaca poco.
Prueba: darle más destaque y conservar el título principal.
Después compara.
No inventes un testimonio real para justificar ese cambio.
La práctica breve prepara dos preguntas y registra tu propia revisión con los cinco criterios de la lección 2.
Puedes conversar con otra persona después.
Si aún no ocurrió, anota «revisión externa pendiente».
Separa el comentario recibido, tu interpretación y tu decisión en campos distintos.
Álvaro puede mostrar la pieza en pantalla sin dar acceso de edición al archivo.
Ficha completada · ejemplo de la lección
1Preguntas: mensaje principal y dificultad de lectura
2Registro: comentario, interpretación y decisión en campos separados
3Estado: evaluación propia hecha; conversación externa hecha o pendiente
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Preguntar por el mensaje y la lectura, registrar el comentario y probar un cambio relacionado con el problema.
Álvaro usa la ficha para revisar: estado: evaluación propia hecha; conversación externa hecha o pendiente.
Ilustración didáctica creada en Codex: Tainá y Álvaro revisan fotos juntos. La escena ilustra una revisión; no representa un testimonio ni una prueba reales.
Ponte a prueba
Una persona dijo que no leyó el subtítulo. ¿Qué registro separa el hecho de la hipótesis?
Es normal trabarse aquíSi no hay nadie disponible, haz tu propia evaluación y deja pendiente la conversación externa. No registres comentarios que no recibiste.
Practica ahora 0/3
Revisa la pieza con preguntas concretas
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando registraste las preguntas y tu propia evaluación e indicaste el estado de la conversación externa.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Revisa la pieza con preguntas concretas
Preguntas: mensaje principal y dificultad de lectura — <tu decisión>
Registro: comentario, interpretación y decisión en campos separados — <tu decisión>
Estado: evaluación propia hecha; conversación externa hecha o pendiente — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al completar estos pasos, podrás preparar una revisión y registrar una decisión sobre la portada.
Resumen de la lección
Revisa la pieza con preguntas concretas
Preguntas: mensaje principal y dificultad de lectura
Registro: comentario, interpretación y decisión en campos separados
Estado: evaluación propia hecha; conversación externa hecha o pendiente
Tu siguiente paso
Ya tienes criterios para preparar una revisión y registrar una decisión sobre la portada.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Exporta y abre el archivo para revisarlo
Material complementario · módulo 6Producción y cuidados para retomar después de la práctica breve.
Pide que la lean antes de explicar
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Una observación se vuelve decisión cuando tiene un criterio
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
Revisa las funciones y los costos en tu cuenta actual. Las guías pueden mostrar rutas distintas según la versión y el dispositivo.
Lección 16 · Figma para Criadores v6.2 · INEMA.CLUB PRO
Módulo 6 · Lección 17 de 18
Exporta y abre el archivo para revisarlo
Puedes exportar una portada en PNG y revisar el resultado fuera de Figma.
Ver la composición en el editor no demuestra que el archivo entregado esté bien. También debes revisarlo después de guardarlo.
En 1 minuto
Selección: marco 00-Capa
Formato: PNG en 1x, 1080 por 1350
Revisión: archivo abierto fuera del editor
1Exporta el marco completo
Selecciona el marco 00-Capa en la lista de capas.
En Export, agrega una configuración con el signo más.
Elige PNG y escala 1x.
Revisa la vista previa y exporta.
Guarda el archivo en una carpeta Luz-de-Rua/entrega.
El navegador puede usar la carpeta predeterminada de descargas.
Abre el PNG fuera de Figma.
Comprueba las dimensiones, 1080 por 1350, el título completo, la foto, el fondo y que no haya objetos de prueba.
Si aparece un solo objeto, vuelve y selecciona el marco.
Si desaparece el fondo, revisa Fill y si está incluido en la exportación.
Tainá revisa la vista previa antes de guardar el marco.
Prompts para comparar · ejemplo didáctico
SolicitudEnviar el primer archivo guardado sin revisar qué estaba seleccionado.
Faltan límites observables para evaluar el trabajo.
SolicitudSeleccionar el marco completo, exportar en 1x y abrir el PNG para revisarlo.
Hay criterios claros para comprobar la decisión.
Compara las dos instrucciones. Son ejemplos escritos para la lección, sin una respuesta simulada de la herramienta.
2Elige el formato según la entrega
PNG conserva bien los textos y las formas en piezas estáticas.
JPG puede servir para fotos con un archivo más pequeño, pero no conserva la transparencia.
PDF sirve para revisar documentos; SVG conserva formas vectoriales con algunas limitaciones.
Ninguno reemplaza el archivo editable de trabajo de Figma.
Como prueba adicional, exporta el mismo marco en PDF y abre el resultado.
Revisa el texto y los efectos: no se comportan igual en todos los formatos.
Para el proyecto final, entregaremos cuatro PNG en 1x.
La copia editable se guardará aparte en la próxima lección.
Álvaro abre el archivo guardado para comprobar que la portada esté completa.
Ficha completada · ejemplo de la lección
1Selección: marco 00-Capa
2Formato: PNG en 1x, 1080 por 1350
3Revisión: archivo abierto fuera del editor
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Seleccionar el marco completo, exportar en 1x y abrir el PNG para revisarlo.
Álvaro usa la ficha para revisar: revisión: archivo abierto fuera del editor.
Ilustración didáctica creada en Codex: Una carpeta reúne cuatro imágenes. La escena ilustra una entrega organizada, pero no demuestra que se exportaran archivos desde Figma.
Ponte a prueba
La imagen exportada contiene solo un círculo. ¿Qué debes revisar primero?
Es normal trabarse aquíRevisa qué capa está seleccionada. Exportar un objeto aislado no entrega los demás elementos del marco.
Practica ahora 0/3
Exporta y abre el archivo para revisarlo
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir tiempo adicional. Terminas cuando el PNG se abre fuera de Figma y contiene la portada completa con las dimensiones previstas.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Exporta y abre el archivo para revisarlo
Selección: marco 00-Capa — <tu decisión>
Formato: PNG en 1x, 1080 por 1350 — <tu decisión>
Revisión: archivo abierto fuera del editor — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendientes reales:
Al terminar estos pasos, podrás exportar una portada en PNG y revisar el resultado fuera de Figma.
Resumen de la lección
Exporta y abre el archivo para revisarlo
Selección: marco 00-Capa
Formato: PNG en 1x, 1080 por 1350
Comprobación: archivo abierto fuera del editor
Tu siguiente paso
Ya tienes criterios para exportar una portada en PNG y revisar el resultado fuera de Figma.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Completa la serie y guarda una copia editable
Material complementario · módulo 6Producción y cuidados para retomar después de la práctica breve.
Exporta el marco completo
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
Elige el formato según la entrega
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
2La imagen terminada y el archivo editable cumplen funciones distintas
En el menú principal, busca File y Save a local copy.
Guarda una copia .fig de tu propio archivo.
Esta copia te permite retomar la edición.
Los PNG sirven para ver y compartir las piezas.
Guarda también la imagen fuente y una nota con la fecha y la dirección del archivo en línea.
La práctica de diez minutos es la revisión final, después de producir las páginas.
Reserva de ocho a doce horas para el curso completo y el montaje.
Si falta una pieza, deja la entrega pendiente.
No confundas el kit de referencia con una serie creada por ti en Figma.
Álvaro guarda la copia editable junto con la nota para continuar después.
Ficha completada · ejemplo de la lección
1Serie: portada, luz, detalle y serie
2Entrega: cuatro PNG abiertos y revisados
3Archivo: copia .fig, imagen fuente y nota con fecha y dirección
Usa esta ficha como referencia. Cambia el ejemplo por tu propio proyecto.
3Comprueba la decisión según el uso
Revisa los cuatro PNG, la copia .fig, la imagen fuente y la nota del proyecto.
Álvaro revisa la ficha: archivo: copia .fig, imagen fuente y nota con fecha y dirección.
Ilustración didáctica creada con Codex: Las cuatro fotografías juntas representan la idea de una serie. La entrega real incluye texto y debe crearse y revisarse en Figma.
Ponte a prueba
Debes cambiar un título después de entregar el trabajo. ¿Qué material conserva el proyecto editable?
Si te trabaste aquí, es normalSi falta una página, créala antes de la revisión final. La lista ayuda a localizar lo pendiente, pero no convierte una ausencia en un resultado terminado.
Practica ahora 0/3
Completa la serie y guarda una copia editable
Reserva 10 minutos de trabajo activo para esta parte. El acceso a la cuenta y el procesamiento pueden requerir más tiempo. Terminas cuando revises los cuatro PNG y guardes la copia .fig con la imagen fuente y la nota.
Usa referencias propias o autorizadas. Identifica las imágenes ilustrativas y conserva los originales. Las funciones de IA pueden depender de tu cuenta y plan; revisa antes de generar.
Proyecto: Luz de Rua
Lección: Completa la serie y guarda una copia editable
Serie: portada, luz, detalle y serie — <tu decisión>
Entrega: cuatro PNG abiertos y revisados — <tu decisión>
Archivo: copia .fig, imagen fuente y nota con fecha y dirección — <tu decisión>
Archivo o marco revisado:
Decisión: conservar o ajustar
Pendiente real:
Al terminar estos pasos, podrás revisar cuatro piezas exportadas y una copia local del proyecto.
Resumen de la lección
Completa la serie y guarda una copia editable
Serie: portada, luz, detalle y serie
Entrega: cuatro PNG abiertos y revisados
Archivo: copia .fig, imagen fuente y nota con fecha y dirección
Tu siguiente paso
Ya tienes criterios para revisar cuatro piezas exportadas y una copia local del proyecto.
Guarda la entrega de esta lección en la carpeta del proyecto. La usarás en el siguiente paso.
Siguiente: Aplica el sistema a una pieza nueva y compárala con las reglas documentadas.
Material complementario · módulo 6Producción y cuidados para retomar después de la práctica breve.
Aplica las decisiones a las cuatro piezas
Experimenta con calma
Repite el proceso en una copia de la pieza y cambia solo una decisión. Compara antes de conservar el cambio.
Qué observar
Los nombres y la ubicación de los controles pueden variar. Revisa tu selección y permiso de edición antes de buscar la función.
La imagen terminada y el archivo editable cumplen funciones distintas.
Experimenta con calma
Conserva la versión anterior y anota qué cambió en la lectura. Deshaz el cambio si no ayuda.
Qué observar
El caso Luz de Rua es ficticio. Las imágenes son ilustraciones de Codex; los diagramas muestran el método, no la interfaz real de Figma.
