7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Figma

Figma Vector Tips

Scroll to top
Read Time: 2 mins
This post is part of a series called Figma Tips and Tricks.
Figma Image Tips
Figma Component 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 ShapesUse Figmas Vector Networks for Complex ShapesUse 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.

Paste SVG Code DirectlyPaste SVG Code DirectlyPaste SVG Code Directly

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 FigmaCopy Vectors as SVG Code in FigmaCopy Vectors as SVG Code in Figma

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+:

Learn Figma

We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.