Copia - miau

Figma: un básico del UI

Ejercicio de refuerzo

Empezar

QUIZ

Lee con atención cada reactivo y selecciona la respuesta correcta

Empezar

Instrucciones: Revisa con atención cada fotografía y selecciona la respuesta correcta

Layout grid es la herramienta que permite crear un sistema de guías en el espacio de trabajo o frame. Para colocar una guía basada en columnas cuál es la opción a elegir:

Incorrecto

Aunque sería lo ideal, esto es poco probable que suceda. Toda imagen puede redimensionarse.

Inténtalo de nuevo

Incorrecto

No, esta opción te permite crear un nuevo estilo de grid personalizado con otras especificaciones precisas.

Inténtalo de nuevo

Incorrecto

No, la pestaña Rows permite colocar líneas que si bien sirven de referencia para la colocación de los elementos, no aplica columnas.

Inténtalo de nuevo

¡Correcto!

Así es, es en la pestaña de columnas podrás seleccionar cuántas columnas necesitas, el color y opacidad, así como la ubicación de las columnas en el frame y la distancia entre ellas.

¿A qué se le conoce como instancia?

Instrucciones: Haz clic sobre la respuesta correcta.

Es una copia de un componente o máster, la cual hereda sus características, como: color, estilo de tipografía, tamaño y efectos como drop shadow o sombra.

Son un grupo de elementos que se repiten en diferentes pantallas del producto digital.

Es un elemento que tiene una serie de características, como: color, estilo de tipografía, tamaño y efectos como drop shadow o sombra.

Retroalimentación

Excelente

¡Bingo! Las instancias son las copias del diseño principal y que se pueden reutilizar, así que siempre que se repita un diseño en varias secciones, crear un componente es tu mejor opción.

Retroalimentación

Ups...

Recuerda: Crear componentes permite ahorrar mucho tiempo, ya que puedes utilizarlos en cualquier parte del diseño e incluso si requieres realizar un ajuste, bastará con modificar el componente principal o máster. Inténtalo de nuevo.

Inténtalo de nuevo

Retroalimentación

Ups...

Recuerda: Crear componentes permite ahorrar mucho tiempo, ya que puedes utilizarlos en cualquier parte del diseño e incluso si requieres realizar un ajuste, bastará con modificar el componente principal o máster. Inténtalo de nuevo.

Inténtalo de nuevo

Instrucciones: Lee con atención y selecciona la respuesta correcta

¿Cómo puedes hacer para redimensionar una imagen en un recuadro, conservando sus dimensiones?

Basta con arrastrar el cursor por cada lado de la imagen hasta que se ajuste en el recuadro

No es posible, la imagen debe tener el tamaño de la misma figura creada

Presionar de forma simultánea las teclas shift + opcion y clic sostenido

Incorrecto

Redimencionar la imagen únicamente con el cursor hará que pierda las dimenciones e la imagen original.

Inténtalo de nuevo

¡Correcto!

Así es, con esta selección de teclas puedes redimencionar cualquier imagen al tamaño que necesites en tu diseño.

Instrucciones: Revisa con atención cada fotografía y selecciona la respuesta correcta

¿Cuáles son las opciones para crear un estilo de texto?

Seleccionar el texto/ Effects/ Create new effect style

Selecciona el texto/ Text styles/ Create new text style

Basta con seleccionar el texto y en el apartado Text seleccionar: tamaño, tipo de texto, interlineado etc.

¡Correcto!

Al seleccionar los 4 puntos en el apartado Text puedes crear los estilos de textos que necesites en tus diseños.

Incorrecto

Esta opción sí permite crear estilos, pero son estilos de efectos como inner o drop shadow, no de texto.

Inténtalo de nuevo

Incorrecto

En este apartado sí puedes dar el formato que necesites a tus textos, pero tendrás que hacerlo en cada recuadro de texto que generes. Crear estilos de texto evitará que tengas que hacerlo.

Inténtalo de nuevo

Instrucciones: Haz clic sobre la respuesta correcta.

¿Qué son las variantes?

Extensiones que funcionan como herramientas externas a Figma, sirven para añadir imágenes, iconos, ilustraciones o textos.

Definen el color, el tamaño, estilos de tipografía y los efectos aplicados a los objetos; así como la estructura y la apariencia de las cuadrículas de diseño.

Son las diferentes versiones y estados que puede tener un mismo elemento o componente. Generalmente las ocupamos para botones, menús, checkbox, inputs y selectores.

Retroalimentación

Excelente

Correcto. Las variantes nos permiten simular los diferentes estados de los componentes. También es posible combinar versiones con diferentes colores o tamaños.

Retroalimentación

Ups...

Si bien los variantes son parecidos, es decir son elementos que se repiten, la diferencia es que los estilos hacen referencia a las características propias de un elemento.

Inténtalo de nuevo

Retroalimentación

Ups...

No. Estos son los plugins, herramientas valiosas que puedes incorporar para acelerar el proceso de diseño.

Inténtalo de nuevo

Comenzar de nuevo