() translation by (you can also view the original English article)
Como diseñador de UI, Figma puede ahorrarte mucho tiempo. En este tutorial práctico, aprenderás cómo ahorrar tiempo y esfuerzo trabajando con componentes y auto layouts en Figma. Como un bono adicional, también usaremos contenido dinámico rellenando muchos de los datos repetidos directamente desde una hoja de cálculo de Google.
Lo que aprenderás en este tutorial de Figma
- Cómo crear un botón en Figma
- Cómo utilizar los auto layouts de Figma
- Cómo crear y usar componentes de Figma
- Cómo crear marcos anidados en Figma
- Cómo utilizar el plugin Google Sheets Sync para contenido dinámico en Figma
- Cómo colocar imágenes en Figma
Si necesitas más inspiración sobre cómo ajustar o mejorar tu diseño final de UI, en Envato Elements podrás encontrar muchos recursos. ¡Elements cuenta con miles de kits de UI y UX, compatibles con tus herramientas de diseño favoritas (incluyendo Figma) por un solo precio de suscripción!
Lo que necesitarás
Para completar este tutorial necesitarás los siguientes recursos (pero si lo prefieres, no dudes en utilizar tus propias alternativas):
- Imagen de una modelo con una camiseta de moda y pantalón corto vaquero.
- Imagen de moda y accesorios de estilo campestre.
- Imagen de una modelo con ropa y accesorios de moda
1. Componentes y Auto Layouts en Figma
Introducción a los Auto Layouts de Figma
Las interfaces web son fluidas. Con Auto Layout de Figma, puedes crear estructuras dinámicas que se expanden o se comprimen cada vez que cambias el contenido dentro de ellas. Gracias a Auto Layout, los botones cambian de tamaño según su texto y las listas se reorganizan automáticamente a medida que mueves o eliminas elementos dentro de un marco. Los marcos de Auto Layout se pueden anidar dentro de otros marcos de Auto Layout, lo que facilita editar elementos de diseño complejos.
Puedes aplicar fácilmente Auto Layout a los elementos seleccionados con el atajo de teclado Mayús-A (Shift-A), o yendo a Object > Add Auto Layout en el menú de Opciones. Los elementos dentro de un marco de Auto Layout se apilan uno al lado del otro, vertical u horizontalmente. Una vez creados, los marcos de Auto Layout se pueden editar fácilmente. Puedes ajustar el relleno horizontal y vertical o el relleno entre elementos, aplicar un relleno y un trazo, o ajustar el radio de las esquinas.
En los siguientes pasos, aprenderás cómo trabajar fácilmente con Auto Layouts de Figma y el ahorro de tiempo que puede significar.
Introducción a los componentes de Figma
De forma similar a los símbolos en Sketch o los componentes en Adobe XD, los componentes de Figma son elementos que se pueden reutilizar en tus diseños.
Cualquier objeto, grupo o capa se puede convertir en un componente. Puedes crear fácilmente un nuevo componente con el atajo de teclado Control-Alt-K o con el botón Create Component de la barra de herramientas, o yendo a Object > Create Component en el menú de Opciones. Una vez creado, el primer componente es el componente principal. A las copias adicionales del componente principal se les denominan instancias. Las instancias de los componentes se actualizan cada vez que editas el componente principal. Para acceder a todos los componentes, ve al panel Assets.
En este tutorial utilizaremos el siguiente diseño de una aplicación de moda para iPad para demostrar cómo crear y usar los componentes de Figma.
2. Cómo crear un botón usando Auto Layout de Figma
Paso 1
Empecemos con un ejemplo básico donde puedas usar la función Auto Layout de Figma.
Selecciona Text (T) en tu barra de herramientas y escribe «Women». Utiliza la fuente Roboto, establece el estilo en Light y el tamaño en 12.
Paso 2
Asegúrate de que tu texto permanezca seleccionado y presiona Shift-A (Mayús-A) para colocar tu texto dentro de una nueva capa con el Auto Layout añadido. Mira dentro del panel Design en los ajustes de Auto Layout y baja Horizontal Padding (Relleno horizontal) a 8.
Baja a la sección Fill (Relleno), añade uno nuevo y establece el color en #FF5F5F.
Paso 3
Sigue concentrándote en el panel Design y ajusta el radio de las esquinas (Corner Radius) de este marco de Auto Layout en 15, y luego selecciona el texto y cambia su color a blanco (#FFFFFF).
Este es un marco de Auto Layout básico. Siempre que cambies el texto, el botón cambiará de tamaño de forma dinámica para adaptarse al nuevo contenido.
Paso 4
Mantén presionada la tecla Alt y arrastra una copia de tu marco de Auto Layout hacia la derecha, como se muestra en la primera imagen.
Cambia «Women» por «Men» y luego enfócate en el panel Design. Desde la sección Selection Colors, puedes cambiar fácilmente el color del texto a #4B4B50 y el color del botón a blanco.
Paso 5
Enfócate en el panel Layers y cambia el nombre de tu primer marco de Auto Layout a «Item.Pink» y el segundo a «Item.White».
Selecciona ambos botones, ve a la barra de herramientas y haz clic en Create Multiple Components (Crear varios componentes) para convertir instantáneamente tus botones en componentes de Figma.
3. Cómo crear listas dinámicas usando Auto Layout en Figma
Paso 1
Añade dos instancias de tu componente «Item.White» y cambia el texto, como se muestra en la primera imagen.
Selecciona los cuatro botones y añade un nuevo marco de Auto Layout. Esto agregará un nuevo marco que rodee los botones seleccionados. De manera predeterminada, la configuración de relleno se establecerá en 0, mientras que el espacio entre elementos se establecerá en 10.
El espacio entre los elementos de un marco se puede ajustar fácilmente desde la configuración de Auto Layout.
Siempre que cambies el texto dentro de un botón, el resto de los elementos de este marco de Auto Layout cambiará de tamaño de forma dinámica para adaptarse al nuevo contenido. Los elementos dentro de un marco de Auto Layout se pueden duplicar fácilmente. Mantén presionada la tecla Alt para arrastrar una copia de un elemento seleccionado desde el Auto Layout o utiliza el atajo clásico del teclado Control-C > Control-V para duplicar un elemento seleccionado.
También puedes cambiar el orden de los elementos dentro de un marco de Auto Layout. Puedes hacer clic y arrastrar elementos, puedes usar una tecla de flecha para mover un elemento seleccionado en esa dirección. Como alternativa, puedes utilizar los botones de flecha en la parte superior del panel Design. Mira dentro del panel Layers y observa que cuando cambias la posición de un elemento en el lienzo, su posición también aquí cambia.
Paso 2
Arrastra una nueva instancia de tu componente «Item.White» desde el panel Assets y colócalo como se muestra en la siguiente imagen.
Cambia el texto por «Category» y luego concéntrate en el panel Layers. Abre tu nueva instancia del componente, haz doble clic en el nombre de ese texto y reemplázalo por #Category. Esto te ayudará unos pasos más adelante cuando aprendas cómo añadir contenido dinámico a múltiples elementos de tu diseño de manera fácil y rápida.
Paso 3
Mantén presionada la tecla Alt y arrastra una copia de tus selecciones hacia la derecha, como se muestra en la primera imagen. Asimismo, si mantienes presionada la tecla Shift (Mayús) mientras arrastras, el movimiento de la copia se limitará a una sola dirección.
Una vez que crees la primera copia, presiona el atajo de teclado Control-D once veces para añadir once copias adicionales en una fila perfectamente alineada, como se muestra en la segunda imagen.
Selecciona esta fila completa de botones y añade un nuevo marco de Auto Layout (Shift-A). Ahora, quizá quieras ajustar el texto dentro de estos botones. Podrías seleccionar los botones uno por uno y cambiar el texto, pero hay un método mucho más rápido que puedes usar. Vayamos a los siguientes pasos y veamos cómo se puede hacer.
Paso 4
Para llevar las cosas al siguiente nivel y usar contenido dinámico, primero necesitarás el plugin Google Sheets Sync.
El plugin Google Sheets Sync nos permitirá rellenar todas nuestras instancias de componentes repetidos con contenido dinámico único. Cada una de las fichas de nuestros productos tendrá una información de precios diferente, una imagen diferente, y tener que ingresar manualmente todo eso llevaría mucho tiempo. En lugar de ello, vamos a hacerlo de forma dinámica.
Ve a la página de la comunidad de Figma, selecciona la pestaña Plugins y busca Google Sheets Sync. Instala el plugin y vayamos al siguiente paso.
Paso 5
Abre Google Sheets (Hojas de cálculo de Google), crea un nuevo documento y crea una columna con el texto que quieres que rellene esa fila de botones.
Y lo más importante, asegúrate de que el encabezado de tu columna se llame Category. De esta manera, tu texto se conectará con todas aquellas instancias de los componentes que tengan la capa #Category.
Una vez que ingreses todo el texto, haz clic en el botón Compartir (Share) y copia el enlace de tu hoja de Google.
Paso 6
Regresa a tu archivo de Figma y selecciona esa fila de botones.
Haz clic con el botón derecho del mouse en tu selección y ve a Plugins > Google Sheets Sync. Pega el enlace de Google Sheets y haz clic en Fetch & Sync para completar instantáneamente tu marco de Auto Layout con todo ese texto.
Paso 7
También se puede poner en Vertical la dirección de los marcos de Auto Layout. Esto organizará los elementos de manera vertical.
Selecciona los elementos dentro de dicho marco de Auto Layout y utiliza las teclas de flecha izquierda y flecha derecha para alinear fácilmente los elementos a la izquierda, al centro o a la derecha. Puedes cambiar fácilmente el orden de los elementos con las teclas de flecha arriba y flecha abajo, o simplemente arrastrándolos.
4. Cómo crear marcos anidados
Paso 1
Los marcos anidados son estructuras que colocas dentro de otro marco u objeto. Estos pueden ser muy útiles cuando quieres crear elementos de diseño complejos que se puedan editar fácilmente.
Empecemos con un cuadrado simple. Selecciona la herramienta Rectangle (R) y crea un cuadrado de 389 px. Para crear fácilmente un cuadrado perfecto, mantén presionada la tecla Shift mientras arrastras.
Rellena esta nueva forma con #C4C4C4 y ajusta Corner Radius en 10.
Paso 2
Usando la misma herramienta, crea un cuadrado de 359 px. Rellénalo del mismo color, ajusta Corner Radius en 10 y colócalo como se muestra en la siguiente imagen. Utiliza el atajo de teclado Control-[ para mover esta forma debajo de la otra.
Paso 3
Selecciona el cuadrado redondeado que se ubica en la parte posterior y enfócate en el panel Design.
Baja la opacidad de la capa (Layer Opacity) al 70% y luego aplica un efecto de desenfoque de capa (Layer Blur) y ajusta Blur en 50.
Paso 4
Vamos a crear un nuevo marco de Auto Layout a partir de un texto. Selecciona Text (T) en tu barra de herramientas y escribe «00%». Utiliza la fuente Roboto, establece el estilo en Bold y el tamaño en 12.
Paso 5
Asegúrate de que tu texto esté seleccionado y añade un Auto Layout (Shift-A). Baja Horizontal Padding a 8, ajusta Border Radius en 15, cambia el color del texto a blanco y luego añade un relleno (Fill) y establece su color en #FF5F5F.
Paso 6
Selecciona Text (T) en tu barra de herramientas y escribe «Name». Utiliza la fuente Roboto, establece el estilo en Regular, el tamaño en 12 y el color en #4B4B50.
Paso 7
Selecciona tu marco de Auto Layout junto con el texto «Name» y añade un nuevo Auto Layout (Shift-A).
Ajusta Vertical Padding (Relleno vertical) en 10, mantén Horizontal Padding (Relleno horizontal) en 0 e incrementa Spacing Between Elements (Espaciado entre elementos). Añade un relleno blanco y aumenta Corner Radius a 15.
Paso 8
En tu barra de herramientas, selecciona Text () y añade los dos fragmentos de texto que se muestran en la siguiente imagen.
Para añadir el efecto de tachado, haz clic en el botón Type Details del panel de texto y marca el botón Strikethrough.
Paso 9
Selecciona la parte oscura del texto y añade Auto Layout (Shift-A). Ajusta Vertical Padding en 20 y Horizontal Padding en 16.
Añade un relleno y establece su color en blanco y luego ve a los ajustes del marco. Haz clic en el botón Independent Corners (Esquinas independientes) para establecer valores de radio específicos para cada esquina del marco. Ajusta el radio de las esquinas izquierdas en 25 y en las otras dos esquinas mantenlo en 0.
Paso 10
Selecciona el texto blanco y añade Auto Layout (Shift-A). Nuevamente, ajusta Vertical Padding en 20 y Horizontal Padding en 16.
Añade un relleno y establece su color en #FF5F5F y luego ve a los ajustes del marco. Ajusta el radio de las esquinas derechas en 25 y en las otras dos esquinas mantenlo en 0.
Paso 11
Selecciona los dos botones, colócalos como se muestra en la primera imagen y agrúpalos (Control-G).
Selecciona este grupo junto con el marco de Auto Layout y añade un nuevo Auto Layout (Shift-A). Para evitar que este marco se ensanche, marca el botón Fixed Width (Ancho fijo) en la sección Auto Layout.
Paso 12
Selecciona las formas grises junto con el marco de Auto Layout que se ubica en la parte superior y haz clic en el botón Create Component (Control-Alt-K) de la barra de herramientas.
Ve al panel Layers, abre este nuevo componente y cambia el nombre de los elementos de texto como se muestra en las siguientes imágenes, ya que usaremos nuevamente el script de Google Sheets Sync para rellenar con texto varias instancias de este nuevo componente.
Paso 13
Selecciona tu componente principal y arrástralo fuera del marco del diseño, y luego añade tres instancias del componente como se muestra en la siguiente imagen.
Paso 14
¡Es momento de agregar contenido más dinámico! Abre Google Sheets, crea un nuevo documento y añade cuatro columnas como se muestra a continuación.
Para los encabezados, recuerda usar los nombres añadidos en el panel Layers cuando editaste ese componente principal
Una vez que hayas terminado, haz clic en el botón Compartir para copiar el enlace de tu hoja de Google. Regresa a tu archivo de Figma, haz clic con el botón derecho y ve a Plugins > Google Sheets Sync. Pega el enlace de Google Sheets y haz clic en el botón Fetch & Sync para rellenar instantáneamente las instancias de tus componentes con todo ese texto.
Paso 15
Selecciona la herramienta Place Image (Control-Shift-K) en tu barra de herramientas, selecciona las tres imágenes y utiliza simples clics para colocarlas dentro de los cuadrados redondeados frontales. Esto básicamente reemplazará el relleno de color con una imagen.
Paso 16
En tu barra de herramientas vuelve a seleccionar la herramienta Place Image (Control-Shift-K), selecciona las mismas imágenes y esta vez colócalas dentro de los rectángulos redondeados borrosos.
Paso 17
Por último, como mencionamos en la introducción, las instancias de los componentes se actualizan cada vez que editas el componente principal.
Ve al componente principal que está fuera de tu marco principal, haz algunos cambios y observa las actualizaciones en vivo.
¡Felicitaciones! ¡Has terminado!
Así es como se debería ver. Ahora ya sabes cómo usar los Auto Layouts y los componentes de Figma, y cómo añadir contenido dinámico gracias al plugin Google Sheets Sync. Espero que hayas disfrutado de este tutorial y que puedas aplicar estas técnicas en tus proyectos futuros. No dudes en compartir tu resultado final en la sección de comentarios.
Siéntete libre de ajustar el diseño final y personalizarlo a tu gusto. Puedes encontrar excelentes fuentes de inspiración en Envato Elements, con soluciones interesantes para mejorar tu diseño.
¿Quieres aprender más?
En Tuts+ tenemos muchos tutoriales, de nivel principiante a nivel intermedio, ¡échales un vistazo!
FigmaCómo crear pantallas de introducción y de inicio de sesión para una plantilla de aplicación de citas en Figma
FigmaCómo cambiar varios colores al mismo tiempo en Figma
Figma4 formas de cambiar el tamaño de los elementos en Figma
FigmaCómo corregir sombras recortadas o elementos desbordados en Figma
FigmaUna guía rápida de los ajustes de relleno de imagen de Figma
FigmaNuevo curso: Cuadrículas de Figma en menos de 30 minutos
FigmaCómo crear un efecto de vidrio esmerilado en Figma
FigmaAtajos esenciales de Figma para trabajar de modo eficiente
FigmaMás de 21 de los mejores kits prémium de UI para Adobe XD y Figma
Figma20 kits de UI de Figma para diseñadores
