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.
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.
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
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.
