Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma

Consejos para trabajar con vectores en Figma

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Figma Tips and Tricks.
Figma Image Tips
Figma Component Tips

Spanish (Español) translation by Benjamín Porras (you can also view the original English article)

Los vectores son una parte importante de cualquier aplicación de diseño de interfaz de usuario o de prototipos, y Figma tiene su propio conjunto poderoso y único de herramientas vectoriales. Aquí hay algunos consejos y trucos rápidos para ayudarte a usarlos más eficientemente.

Mira los consejos

1. Usa redes de vectores para hacer formas complejas

Figma tiene algunas características vectoriales únicas sobresalientes, entre las que destacan sus "redes vectoriales".

Por ejemplo, si tienes un polígono complejo como una estrella, selecciónala y luego presiona el botón Edit Object (Editar objeto) para editar sus nodos y trayectorias. Normalmente, en todas las demás aplicaciones de diseño de vectores, un nodo no puede tener más de dos líneas que se originan en él. Figma, sin embargo, nos permite usar la Pen Tool (Herramienta pluma) para dibujar líneas adicionales desde cada punto, incluso uniendo dos puntos. Echa un vistazo a la siguiente captura de pantalla para ver cómo cada uno de los nodos internos tiene tres líneas que se originan en él, creando efectivamente una forma adicional dentro del polígono original.

Use Figmas Vector Networks for Complex Shapes

2. Pega el código SVG directamente

Esta característica es realmente útil. Figma te permitirá copiar el código SVG de una fuente externa, y luego pegarlo en Figma, creará una capa vectorial para ti que contiene el SVG.

Paste SVG Code Directly
Pegado

3. Copia los vectores como código SVG

Elige cualquier vector en tu diseño, y luego haz clic derecho  para que aparezca un menú contextual. Ve a Copy as (Copiar como) > Copy as SVG (Copiar como SVG) y tendrás el código SVG en tu portapapeles, listo para pegar en cualquier proyecto web en el que estés trabajando.

Copy Vectors as SVG Code in Figma
Copiado

Recursos para aprender a usar Figma

Esos fueron algunos consejos rá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+:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.