Creación de Íconos Vectoriales con Pen Tool en Figma

Curso de Figma

Clase 7 de 22

Clase 7 / 22

Recursos

¿Cómo crear vectores desde cero en Figma?

Sumergirse en el diseño de vectores es una habilidad fundamental para cualquier diseñador gráfico, y Figma ofrece herramientas potentes para lograrlo. La ventaja de crear desde cero es que permite personalizar cada aspecto del diseño, dándole una unicidad difícil de imitar con plantillas predeterminadas. Aquí aprenderás a usar efectivamente la herramienta de pluma para crear vectores precisos.

¿Cómo se utiliza la Pen Tool para crear líneas?

La herramienta de pluma, o Pen Tool, en Figma es clave para crear vectores. Con ella, los diseñadores pueden colocar puntos específicos en un plano y manipularlos como deseen, generando líneas rectas o angulares con facilidad.

Crear una línea básica: Selecciona el primer frame y presiona la tecla "P" para activar la Pentul.
Trazar puntos: Haz clic para colocar el primer punto y lleva la línea al segundo punto. Si deseas líneas horizontales o verticales perfectas, mantén presionada la tecla "Shift".
Aspectos del trazo: Aumenta el grosor del trazo desde la propiedad de stroke y personaliza los extremos, por ejemplo, terminaciones redondas o en forma de flecha.

// Ejemplo de personalización de un trazo stroke-width: 4; stroke-linecap: round; stroke-color: #FFFFFF;

¿Cómo crear formas complejas?

Construir formas más complejas como iconos es posible siguiendo los mismos pasos básicos y aplicando ajustes para lograr simetría y estilo.

Usar la Pentul: Al presionar "P", crea puntos adicionales mientras mantienes la simetría y la alineación, utilizando "Shift".
Eliminar el stroke si es necesario: Para darle relleno a la forma, utiliza la herramienta de cubeta y aplica el color que desees.
Creación de iconos desde cero: Perfecto para iconos que requieren formas frecuentes, como bookmarks o íconos de navegación.

¿Cómo combinar formas para crear un diseño?

Unir diferentes figuras geométricas puede resultar en iconos más diversificados y únicos.

Creación del primer icono: Usa un rectángulo y ajusta los vectores para crear una forma de localización.
Combinar formas difiriendo estilos: Crea formas separadas y utiliza operaciones booleanas para combinar, restar o intersectar las figuras, adaptando el diseño deseado.

¿Cómo lograr un equilibrio en iconos complejos?

Al diseñar iconos, es crucial mantener la proporción y el equilibrio visual para asegurar la claridad y el propósito del icono. Figma facilita este proceso mediante guías visuales y snapping.

Definir proporciones: Al trabajar con líneas gruesas o bordes redondeados, asegura que las proporciones sean equilibradas.
Outline Stroke para perfeccionar: Una vez que el diseño está terminado, conviértelo en una forma final usando la opción "outline stroke" para mantener líneas y bordes definidos y trabajables.

// Configuración típica para iconos border-radius: 1px; outline-stroke: true;

Estas técnicas son fundamentales para la creación de iconos efectivos y personalizables. Si bien estas estrategias han demostrado ser eficaces, cada diseñador tiene un estilo único, y la experimentación es clave para descubrir métodos que se adapten a tus necesidades específicas. Continúa explorando y perfeccionando tus habilidades de diseño vectorial utilizando estas valiosas tácticas en Figma, y verás cómo tu creatividad fluye sin límites.