Consejos para trabajar con vectores en Figma

() translation by (you can also view the original English article)

Los vectores son una parte importante de cualquier aplicación de diseño de interfaz de usuario o de prototipos, y Figma tiene su propio conjunto poderoso y único de herramientas vectoriales. Aquí hay algunos consejos y trucos rápidos para ayudarte a usarlos más eficientemente.

Mira los consejos

1. Usa redes de vectores para hacer formas complejas

Figma tiene algunas características vectoriales únicas sobresalientes, entre las que destacan sus "redes vectoriales".

Por ejemplo, si tienes un polígono complejo como una estrella, selecciónala y luego presiona el botón Edit Object (Editar objeto) para editar sus nodos y trayectorias. Normalmente, en todas las demás aplicaciones de diseño de vectores, un nodo no puede tener más de dos líneas que se originan en él. Figma, sin embargo, nos permite usar la Pen Tool (Herramienta pluma) para dibujar líneas adicionales desde cada punto, incluso uniendo dos puntos. Echa un vistazo a la siguiente captura de pantalla para ver cómo cada uno de los nodos internos tiene tres líneas que se originan en él, creando efectivamente una forma adicional dentro del polígono original.

Use Figmas Vector Networks for Complex Shapes

2. Pega el código SVG directamente

Esta característica es realmente útil. Figma te permitirá copiar el código SVG de una fuente externa, y luego pegarlo en Figma, creará una capa vectorial para ti que contiene el SVG.

3. Copia los vectores como código SVG

Elige cualquier vector en tu diseño, y luego haz clic derecho para que aparezca un menú contextual. Ve a Copy as (Copiar como) > Copy as SVG (Copiar como SVG) y tendrás el código SVG en tu portapapeles, listo para pegar en cualquier proyecto web en el que estés trabajando.

Copy Vectors as SVG Code in Figma — Copiado

Recursos para aprender a usar Figma

Esos fueron algunos consejos rápidos para trabajar con los vectores en Figma. Para ayudarte a llevar las cosas al siguiente nivel tenemos una serie de cursos de Figma en Tuts+:

Un agradecimiento especial para Carmel DeAmicis y Valerie Veteto por sus habituales resúmenes de consejos comunitarios: ¡ve a echarles un vistazo!
blog.figma.com
www.figma.com
SVG Car por Yoksel en CodePen