- Producto: Figma Design
- Temas: formas, colores, grupos, organización de capas, marcos
- Duración: 20 minutos
En este proyecto, ilustraremos una poción mágica en Figma Design. Crear ilustraciones es una manera divertida de familiarizarse con el editor y las herramientas de Figma. No te preocupes si recién comienzas en el mundo de la ilustración; te guiaremos en el uso de formas básicas, grupos, colores y marcos. También aprenderemos cómo la organización de capas puede impactar tus diseños.
Si sigues el procedimiento paso a paso, tu ilustración final tendrá un aspecto similar al siguiente:
Crearemos nuestra poción mágica haciendo lo siguiente:
- Crear la botella
- Llenar la botella con poción mágica
- Taparla con un corcho
- Agregar los detalles finales
- (Opcional) Enmarcar tu diseño y exportarlo
Crear la botella
Crearemos la botella utilizando la herramienta Elipse, la herramienta Rectángulo y un grupo.
Agregar las formas
Las herramientas de forma están ubicadas en la barra de herramientas. Haz clic en la flecha para mostrar las demás opciones de forma.
Agregaremos una elipse y dos rectángulos al lienzo:
- Para agregar una elipse: selecciona la herramienta Elipse o presiona [O] y haz clic en el lienzo
- Para agregar un rectángulo: selecciona la herramienta Rectángulo o presiona [R] y haz clic en el lienzo
Consejo: También puedes agregar formas haciendo clic en el lienzo y arrastrando el cursor. Verás las dimensiones de la forma debajo del borde inferior a medida que cambias su tamaño. Mantén presionada la tecla Shift mientras arrastras la forma para crear cuadrados y círculos perfectos.
Cambiar el tamaño de las formas
Ahora que tenemos los componentes, es hora de cambiar su tamaño. Puedes cambiar el tamaño de los objetos seleccionando un controlador y arrastrando el cursor, o escribiendo las dimensiones deseadas en los campos Ancho y Altura del panel de diseño.
Utiliza cualquiera de los métodos para cambiar el tamaño de las formas a las siguientes dimensiones:
- Elipse: 200 de ancho x 200 de alto
- Rectángulo 1: 100 de ancho x 100 de alto
- Rectángulo 2: 120 de ancho x 40 de alto
En el rectángulo de 120 x 40, también necesitamos redondear las esquinas para que el borde de nuestra botella no se vea tan afilado. Selecciona el rectángulo e ingresa "10" en el campo Radio de esquina de la pestaña Diseño.
Alinear las formas
Ahora que ya tenemos nuestras formas, debemos alinearlas para que se parezcan más a una botella. Haz clic y arrastra una forma para moverla por el lienzo. A medida que mueves objetos, verás que aparecen guías rojas. Estas te ayudarán a alinear el objeto con otros objetos del lienzo.
Consejo: Después de colocar las formas, selecciónalas todas y utiliza la configuración Alinear centros horizontales de la pestaña Visualización para asegurarte de que todo esté bien centrado.
Alinea las formas para que se vean similares a las siguientes:
Agrupar las formas
Nuestra botella tiene muy buen aspecto. Organicemos las cosas antes de continuar. Si observas el panel de capas en la barra lateral izquierda, verás que cada forma está en su propia capa.
Podemos simplificar las cosas agrupando estas capas. Los grupos te permiten combinar capas para que puedan tratarse como un único objeto.
Para agrupar varias capas, selecciónalas y utiliza el atajo:
- macOS: Command + G
- Windows: Control + G
Verás que el panel de capas de la barra lateral izquierda ahora solo muestra una capa llamada "Grupo 1". Nombrar las capas es otra forma estupenda de mantener el orden en Figma. Haz doble clic en la capa y cámbiale el nombre a "Botella".
Agregar un poco de color
Vamos a darle color a nuestra botella. Selecciona la botella y haz clic en la configuración Relleno en la barra lateral derecha para abrir el selector de color. Para este tutorial, utilizaremos el código de color #DEDCF9. Puedes ingresar el código en el campo Relleno o utilizar el selector de color para seleccionar un color diferente.
Una vez que hayas cambiado el color de relleno, es hora de bloquear esta capa. Bloquear las capas ayuda a evitar que los objetos se muevan o modifiquen incorrectamente. Para bloquear esta capa, selecciona la forma de la botella y haz clic en el ícono Bloquear en la barra lateral izquierda. Para desbloquear una capa, haz clic en el ícono Desbloquear.
Nuestra botella está lista. Ahora es el momento de llenarla con la poción mágica.
Comprobación: ¿tu archivo se ve similar al siguiente?
Crear la poción mágica
Agregar una elipse
Utiliza a herramienta Elipse para agregar una elipse al lienzo y cambia su tamaño a 175 x 175.
¿No puedes avanzar? Recuerda cómo agregamos y cambiamos el tamaño de las formas cuando creamos la botella.
Arrastra la elipse sobre la forma de la botella y utiliza las guías rojas para alinearla. Cambia el color de relleno de la elipse como cambiaste el color de la botella en la sección anterior. Para este proyecto, utilizaremos el código de color #E99BF4. Puedes ingresar este código en el campo Relleno o utilizar el selector de color para seleccionar un color diferente.
Modificar la elipse
Utilizaremos la configuración Editar objeto para que parezca que nuestra poción se agita dentro de la botella.
Selecciona la elipse y haz clic en Editar objeto en la barra de herramientas para entrar en el modo de edición vectorial. El modo de edición vectorial te permite manipular los puntos individuales de un objeto sin cambiar toda la forma.
Mientras te encuentras en el modo de edición vectorial, haz clic en el punto superior de la elipse y arrástralo hacia abajo y hacia un lado. Si no puedes avanzar, observa el siguiente GIF:
Cuando estés conforme con el aspecto de tu poción, haz clic en Hecho en la barra de herramientas para salir del modo de edición vectorial. A continuación, agregaremos algunas burbujas.
Agregar burbujas con la herramienta Elipse
La herramienta Elipse se utiliza mucho en este proyecto. La utilizaremos para agregar algunas burbujas a nuestra botella de poción.
Arrastra la herramienta Elipse para crear varias burbujas pequeñas. No todas tienen que ser del mismo tamaño, pero asegúrate de que sean lo suficientemente pequeñas para caber dentro de la botella. Utilizamos una combinación de elipses de 6 x 6 y 12 x 12. Antes de continuar, asegúrate de cambiar el relleno de las elipses por algo un poco más colorido. Utilizamos el código de color #985DF6.
Una vez que hayas colocado las burbujas en la botella, arrastra el cursor sobre todas las elipses de las burbujas y la elipse más grande de la poción y agrúpalas utilizando el atajo:
- macOS: Command + G
- Windows: Control + G
Verás que todas las capas de elipse en la barra lateral izquierda se condensan en una capa denominada "Grupo 2". Cambia el nombre de la capa a “Poción” y haz clic en para bloquearla.
Comprobación: ¿tu archivo se ve similar al siguiente?
Crear el corcho
Crearemos un corcho con la herramienta Rectángulo.
Agrega un rectángulo al lienzo y cámbiale el tamaño a 75 x 75. Utiliza la configuración Radio de esquina en la pestaña Diseño para redondear las esquinas del rectángulo a 25.
Cambia el relleno del rectángulo a #CE856C y cambia el nombre de la capa a "Corcho". Arrástralo hasta el borde de la botella.
Organizar las capas
No queremos que el corcho aparezca encima de la botella, así que tendremos que reordenar las capas en la barra lateral izquierda. El orden de las capas determina cómo se muestran los objetos en el lienzo.
Mueve la capa "Corcho" debajo de la capa "Botella" para que solo se muestre la parte superior del corcho. Así parecerá que está dentro de la botella. Selecciona la capa "Corcho" y arrástrala debajo de la capa "Botella". Una vez que hayas movido la capa, haz clic en para bloquearla.
Agregar líneas de brillo
Nuestra poción está casi lista. Solo necesitamos agregar algunas líneas de brillo para que destaque más.
Agrega dos rectángulos al lienzo y cambia el tamaño de uno de ellos a 20 x 10 y el otro a 40 x 10. Utiliza la configuración Radio de esquina en la pestaña Diseño para redondear las esquinas de ambos rectángulos a 20.
Cambia el relleno de ambos rectángulos a #F2F2FF. Muévelos al borde de la botella. Selecciona ambos rectángulos y agrúpalos utilizando el atajo:
- macOS: Command + G
- Windows: Control + G
Cambia el nombre de la capa a "Brillo" y bloquéala.
Comprobación: ¿tu archivo se ve similar al siguiente?
(Opcional) Agregar tu ilustración a un marco y exportarla
Si deseas exportar tu ilustración desde Figma, puedes agregar tus capas a un marco. Los marcos son uno de los principales componentes de Figma. Al igual que los grupos, puedes utilizar los marcos para organizar todos tus elementos de diseño en un solo lugar.
Puedes agregar un nuevo marco utilizando la herramienta Marco de la barra de herramientas y arrastrando el contenido al mismo, o puedes seleccionar directamente los objetos existentes y convertirlos en un marco. Optaremos por la segunda opción.
Desbloquea tus capas y arrastra el cursor sobre tu ilustración para seleccionarlas todas. Una vez que todo esté seleccionado, haz clic derecho y selecciona Selección de marco. Tus cuatro capas individuales están anidadas bajo una capa llamada "Marco 1". Si haces clic en la flecha junto al nombre, verás que las capas nombradas todavía existen y aún pueden seleccionarse y editarse individualmente. Cambia el nombre de la nueva capa a "Poción mágica".
Si deseas exportar tu ilustración, selecciona la capa “Poción Mágica” y utiliza la configuración Exportar en la barra lateral derecha para exportar tu diseño.
¿Y ahora qué?
¡Felicitaciones! Con solo unas pocas formas básicas, ilustraste una poción mágica en Figma. Si buscas otro desafío, intenta recrear la ilustración del oso que aparece a continuación. Se creó utilizando las mismas herramientas que aprendimos en este proyecto. Si creas algo de lo que te sientes especialmente orgulloso, compártelo en la comunidad de Figma.
¡Estamos ansiosos por ver tu próximo diseño!