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

Figma Vector Tips

by
Difficulty:BeginnerLength:ShortLanguages:
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 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 Directly
Pasted

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

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.