- Producto: Figma Design
- Temas: formas, color, grupos, organización de capas, marcos
- Duración: 20 minutos
En este proyecto, vamos a ilustrar una poción mágica en Figma Design. Crear ilustraciones es una forma divertida de familiarizarse con el editor y las herramientas de Figma. No te preocupes si eres nuevo en el mundo de la ilustración; te guiaremos a través del uso de formas básicas, grupos, colores y marcos. También aprenderemos cómo la organización de las capas puede afectar tus diseños.
Si sigues los pasos uno por uno, tu ilustración final se parecerá a la siguiente:
Crearemos nuestra poción mágica haciendo lo siguiente:
- Crea la botella
- Rellena la botella con poción mágica
- Tápala con un corcho
- Añade algunos detalles finales
- (Opcional) Enmarca tu diseño y expórtalo
Crea la botella
Vamos a crear la botella utilizando la herramienta Elipse, la herramienta Rectángulo y un grupo.
Añade las formas
Las herramientas de forma se encuentran en la barra de herramientas. Haz clic en la flecha para revelar las otras opciones de forma.
Vamos a añadir un elipse y dos rectángulos al lienzo:
- Para añadir una elipse: selecciona la herramienta Elipse o pulsa [O] y haz clic en el lienzo
- Para añadir un rectángulo: selecciona la herramienta Rectángulo o pulsa [R] y haz clic en el lienzo
Consejo: también puedes añadir formas haciendo clic en el lienzo y arrastrando el cursor. Verás las dimensiones de la forma bajo el borde inferior mientras la redimensionas. Mantén pulsada la tecla Mayús mientras arrastras la forma para crear cuadrados y círculos perfectos.
Redimensiona las formas
Ahora que ya tenemos los componentes, es el momento de redimensionarlos. Puedes redimensionar objetos seleccionando un asa y arrastrando el cursor o escribiendo las dimensiones deseadas en los campos Ancho y Altura en el panel de diseño.
Utilice cualquiera de los métodos para redimensionar las formas a las siguientes dimensiones:
- Elipse: 200 ancho x 200 alto
- Rectángulo 1: 100 ancho x 100 alto
- Rectángulo 2: 120 ancho x 40 alto
En el rectángulo de 120 x 40, también hay que redondear las esquinas para que el borde de la botella no parezca tan afilado. Selecciona el rectángulo e introduce «10» en el campo Radio de esquina de la pestaña Design.
Alinea 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 muevas los objetos, verás que aparecen unas guías rojas. Éstas te ayudarán a alinear el objeto con otros objetos del lienzo.
Consejo: después de colocar tus formas, selecciónalas todas y usa la configuración Alinear centros horizontales en la pestaña Visualización para asegurarte de que todo esté bien centrado.
Alinea las formas para que tengan un aspecto similar al siguiente:
Agrupa las formas
Nuestra botella se ve genial. Vamos a organizar las cosas antes de continuar. Si observas el panel de capas en la barra lateral izquierda, notarás que cada forma está en su propia capa.
Podemos simplificar las cosas agrupando estas capas juntas. 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: Comando + G
- Windows: Control + G
Observarás que el panel de capas situado en la barra lateral izquierda, ahora solo muestra una capa denominada «Grupo 1». Asignar nombres a las capas es otra forma excelente de mantener el orden en Figma. Haz doble clic en la capa y cámbiale el nombre a «Botella».
Añade 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, vamos a usar el código de color #DEDCF9. Puedes introducir 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 icono Bloquear en la barra lateral izquierda. Para desbloquear una capa, haz clic en el icono Desbloquear.
Nuestra botella está lista. Ahora es el momento de rellenarla con la poción mágica.
Comprobación: ¿tu archivo se parece al siguiente?
Crea la poción mágica
Añade una elipse
Usa la herramienta Elipse para añadir una elipse al lienzo y redimensionarla a 175 x 175.
Si te atascas recuerda cómo añadimos y redimensionamos 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 hiciste con el color de la botella en la sección anterior. Para este proyecto, vamos a usar el código de color #E99BF4. Puedes introducir este código en el campo Relleno o utilizar el selector de color para seleccionar un color diferente.
Modifica la elipse
Vamos a usar 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 editar vectorial te permite manipular los puntos individuales de un objeto sin cambiar toda la forma.
Mientras estás 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 te atascas, mira 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, añadiremos algunas burbujas.
Añade burbujas usando la herramienta Elipse
La herramienta Elipse se utiliza mucho en este proyecto. Vamos a usarla para añadir algunas burbujas a nuestra botella de poción.
Arrastra la herramienta Elipse para crear varias burbujas pequeñas. No es necesario que todas sean del mismo tamaño, pero asegúrate de que sean lo suficientemente pequeñas para caber dentro de la botella. Nosotros hemos utilizado una combinación de elipses de 6 x 6 y 12 x 12. Antes de continuar, asegúrate de cambiar el relleno de tus elipses a algo un poco más colorido. Nosotros hemos utilizado el código de color #985DF6.
Una vez que hayas colocado las burbujas en tu 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: Comando + G
- Windows: Control + G
Verás que todas las capas de la elipse en la barra lateral izquierda se condensan en una sola capa denominada «Grupo 2». Cambia el nombre de la capa a «Poción» y haz clic en para bloquearla.
Comprobación: ¿tu archivo se parece al siguiente?
Crea el corcho
Crearemos un corcho usando la herramienta Rectángulo.
Añade un rectángulo al lienzo y redimensiónalo a 75 x 75. Usa 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 sobre el borde de la botella.
Organiza tus capas
No queremos que el corcho aparezca encima de la botella, por lo 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.
Vamos a mover la capa «Corcho» debajo de la capa «Botella» para que solo se vea 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.
Añade líneas de brillo
Nuestra poción está casi lista. Solo necesitamos añadir algunas líneas de brillo para que destaque.
Añade dos rectángulos al lienzo y redimensiona uno de ellos a 20 x 10 y el otro a 40 x 10. Usa 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. Múevelos al borde de la botella. Selecciona ambos rectángulos y agrúpalos usando el atajo:
- macOS: Comando + G
- Windows: Control + G
Cambia el nombre de la capa a «Brillo» y bloquéala.
Comprobación: ¿tu archivo se parece al siguiente?
(Opcional) Añade tu ilustración a un marco y expórtala
Si deseas exportar tu ilustración de Figma, puedes añadir tus capas a un marco. Los marcos son uno de los principales componentes de Figma. Al igual que los grupos, puedes usar marcos para organizar todos tus elementos de diseño en un solo lugar.
Puedes añadir un nuevo marco usando la herramienta Marco de la barra de herramientas y arrastrar contenido en su interior, o bien puedes seleccionar directamente objetos existentes y convertirlos en un marco. Vamos a optar por la segunda opción.
Desbloquea las capas y arrastra el cursor sobre la ilustración para seleccionarlas todas. Una vez seleccionadas, haz clic con el botón derecho y selecciona Seleccionar marco. Las cuatro capas individuales quedan anidadas bajo una capa denominada «Marco 1». Si haces clic en la flecha situada junto al nombre, verás que las capas con nombre siguen existiendo y que 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 usa la configuración Exportar en la barra lateral derecha para exportar tu diseño.
¿Y ahora qué?
¡Felicidades! Con solo unas pocas formas básicas, has ilustrado una poción mágica en Figma. Si buscas otro reto, intenta recrear la ilustración del oso que aparece a continuación. Se ha creado utilizando exactamente las mismas herramientas que hemos aprendido en este proyecto. Si creas algo de lo que te sientes especialmente orgulloso, compártelo en la Comunidad de Figma.
¡Estamos deseando ver tus próximos diseños!