Figma Vector Tips

Vectors are an important part of any UI or prototyping design application, and Figma has its own powerful and unique set of vector tools. Here are some quick tips and tricks to help you use them more efficiently.

Watch Tips

1. Use Vector Networks for Complex Shapes

Figma has some outstanding unique vector features, not least of which being its “vector networks”.

For example, if you have a complex polygon like a star, select it, then hit the Edit Object button to edit its nodes and paths. Normally, in all other vector design applications, a node can have no more than two lines originating from it. Figma, however, allows us to use the Pen Tool to draw extra lines from each point, perhaps even joining two points together. Take a look at the screenshot below to see how each one of the inner nodes has three lines originating from it, effectively creating an additional shape within the original polygon.

Use Figmas Vector Networks for Complex Shapes

2. Paste SVG Code Directly

This feature is really helpful. Figma will allow you to copy SVG code from an external source, then paste it into Figma–it will create a vector layer for you containing the SVG.

3. Copy Vectors as SVG Code

Choose any vector in your design, then right-click it to bring up a contextual menu. Go to Copy as > Copy as SVG and you’ll then have the SVG code on your clipboard, ready to paste into whatever web project you’re working on.

Copy Vectors as SVG Code in Figma — Copied

Figma Learning Resources

Those were some quick tips for working with vectors in Figma. To help you take things to the next level we have a series of Figma courses on Tuts+:

Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
blog.figma.com
www.figma.com
SVG Car by Yoksel on CodePen