Guide
- Figma
- Tools
Guide
- Figma
- Tools
Guide
- Figma
- Tools
How to Use Framer as Figma
In this Framer blog, I'm showing you their game-changing vector update that finally bridges the gap with Figma. You'll see how Framer transformed from struggling with SVGs to offering features that might make you forget about Figma altogether. From vector sets to animated SVGs, this update changes everything about how we work with vectors in Framer.
Posted by
Nandi
Table of contents
Framer’s old vector workflow
Before the update, here’s how things worked:
You had to press G to create a graphic layer, then use the pen tool (P) or shape tools inside that layer.
Even if you drew directly on the canvas, it still wrapped your vector in that graphic layer, which made editing clunky.
It worked, but it wasn’t fun, and definitely didn’t feel like Figma.
Framer’s old vector workflow
Before the update, here’s how things worked:
You had to press G to create a graphic layer, then use the pen tool (P) or shape tools inside that layer.
Even if you drew directly on the canvas, it still wrapped your vector in that graphic layer, which made editing clunky.
It worked, but it wasn’t fun, and definitely didn’t feel like Figma.
Framer’s old vector workflow
Before the update, here’s how things worked:
You had to press G to create a graphic layer, then use the pen tool (P) or shape tools inside that layer.
Even if you drew directly on the canvas, it still wrapped your vector in that graphic layer, which made editing clunky.
It worked, but it wasn’t fun, and definitely didn’t feel like Figma.
Old vector workflow.
Old vector workflow.
Old vector workflow.
The new vector tool
Now, everything’s changed.
You can press P anywhere on the canvas and immediately start drawing a vector. No graphic layer required.
Want a circle? Press O and draw. Boom, clean SVG.
These vectors now sit directly on the canvas, like any other element. No wrappers, no confusion.
You can manipulate anchor points, tweak paths, and it all just works.
The new vector tool
Now, everything’s changed.
You can press P anywhere on the canvas and immediately start drawing a vector. No graphic layer required.
Want a circle? Press O and draw. Boom, clean SVG.
These vectors now sit directly on the canvas, like any other element. No wrappers, no confusion.
You can manipulate anchor points, tweak paths, and it all just works.
The new vector tool
Now, everything’s changed.
You can press P anywhere on the canvas and immediately start drawing a vector. No graphic layer required.
Want a circle? Press O and draw. Boom, clean SVG.
These vectors now sit directly on the canvas, like any other element. No wrappers, no confusion.
You can manipulate anchor points, tweak paths, and it all just works.
New vector workflow.
New vector workflow.
New vector workflow.
Vector sets and icon packs
This part is wild.
Drag a bunch of SVGs from your Finder into Framer, and it’ll prompt you to create a vector set.
It organizes your icons like Figma components with variants.
You can rename icons, edit paths, and even add variables.
And the best part? Your vector set appears in the Assets panel, where you can:
Drag and drop icons into your canvas.
Browse icons visually with a built-in preview.
Filter icons by name (e.g. search “airplane” and only see that one).
It’s like having your own mini-icon library, completely customizable.
Shared variables (like Figma styles)
You can even assign variables inside your vector sets—just like Figma’s color styles.
Select multiple icons and create a color variable for their fill.
Now when you drop them into your site, you can change the color from the right panel without editing each SVG manually.
Total game-changer for theming and consistency.
Add to vector set
Created an icon directly in Framer? You can:
Right-click it.
Choose “Add to Vector Set.”
Boom! Your custom shape is now part of your reusable icon pack.
Super fast, super easy.
Animated icons
This update also unlocks animation.
Create animated strokes on your SVGs.
Group vectors, convert them to a vector set, and animate stroke length, offset, and loop settings.
Want a pulsing ring around your avatar? Done.
Want a looping stroke animation on an icon? Easy.
You now have full control over vector animations, right inside Framer.
Final tip
Canvas Pages. A lot of people still start their web designs in Figma because Framer feels restrictive, like you have to use frames, breakpoints, and stacks from the get-go. But there’s a hidden feature in Framer that changes everything.
If you head to Preferences → Canvas Pages and enable it, you’ll unlock an infinite canvas—just like Figma’s.
No breakpoints. No constraints. You can play around, experiment, create little design bits, and move things freely using absolute positioning. And once you’re happy with your design, just copy and paste it directly into your site.
Vector sets and icon packs
This part is wild.
Drag a bunch of SVGs from your Finder into Framer, and it’ll prompt you to create a vector set.
It organizes your icons like Figma components with variants.
You can rename icons, edit paths, and even add variables.
And the best part? Your vector set appears in the Assets panel, where you can:
Drag and drop icons into your canvas.
Browse icons visually with a built-in preview.
Filter icons by name (e.g. search “airplane” and only see that one).
It’s like having your own mini-icon library, completely customizable.
Shared variables (like Figma styles)
You can even assign variables inside your vector sets—just like Figma’s color styles.
Select multiple icons and create a color variable for their fill.
Now when you drop them into your site, you can change the color from the right panel without editing each SVG manually.
Total game-changer for theming and consistency.
Add to vector set
Created an icon directly in Framer? You can:
Right-click it.
Choose “Add to Vector Set.”
Boom! Your custom shape is now part of your reusable icon pack.
Super fast, super easy.
Animated icons
This update also unlocks animation.
Create animated strokes on your SVGs.
Group vectors, convert them to a vector set, and animate stroke length, offset, and loop settings.
Want a pulsing ring around your avatar? Done.
Want a looping stroke animation on an icon? Easy.
You now have full control over vector animations, right inside Framer.
Final tip
Canvas Pages. A lot of people still start their web designs in Figma because Framer feels restrictive, like you have to use frames, breakpoints, and stacks from the get-go. But there’s a hidden feature in Framer that changes everything.
If you head to Preferences → Canvas Pages and enable it, you’ll unlock an infinite canvas—just like Figma’s.
No breakpoints. No constraints. You can play around, experiment, create little design bits, and move things freely using absolute positioning. And once you’re happy with your design, just copy and paste it directly into your site.
Vector sets and icon packs
This part is wild.
Drag a bunch of SVGs from your Finder into Framer, and it’ll prompt you to create a vector set.
It organizes your icons like Figma components with variants.
You can rename icons, edit paths, and even add variables.
And the best part? Your vector set appears in the Assets panel, where you can:
Drag and drop icons into your canvas.
Browse icons visually with a built-in preview.
Filter icons by name (e.g. search “airplane” and only see that one).
It’s like having your own mini-icon library, completely customizable.
Shared variables (like Figma styles)
You can even assign variables inside your vector sets—just like Figma’s color styles.
Select multiple icons and create a color variable for their fill.
Now when you drop them into your site, you can change the color from the right panel without editing each SVG manually.
Total game-changer for theming and consistency.
Add to vector set
Created an icon directly in Framer? You can:
Right-click it.
Choose “Add to Vector Set.”
Boom! Your custom shape is now part of your reusable icon pack.
Super fast, super easy.
Animated icons
This update also unlocks animation.
Create animated strokes on your SVGs.
Group vectors, convert them to a vector set, and animate stroke length, offset, and loop settings.
Want a pulsing ring around your avatar? Done.
Want a looping stroke animation on an icon? Easy.
You now have full control over vector animations, right inside Framer.
Final tip
Canvas Pages. A lot of people still start their web designs in Figma because Framer feels restrictive, like you have to use frames, breakpoints, and stacks from the get-go. But there’s a hidden feature in Framer that changes everything.
If you head to Preferences → Canvas Pages and enable it, you’ll unlock an infinite canvas—just like Figma’s.
No breakpoints. No constraints. You can play around, experiment, create little design bits, and move things freely using absolute positioning. And once you’re happy with your design, just copy and paste it directly into your site.
Playing around with canvas pages.
Playing around with canvas pages.
Playing around with canvas pages.
Wrapping up
With these new features, Framer doesn’t just catch up to Figma, it starts to blur the lines.
SVG editing?
Component-style icon sets?
Variables and visual search?
Animations on your vectors?
This update is huge for anyone designing in Framer. You can finally stay in one tool—from design to launch—without feeling like you’re sacrificing anything.
Framer just became a design tool and a site builder. And honestly? It’s starting to look better than both.
Wrapping up
With these new features, Framer doesn’t just catch up to Figma, it starts to blur the lines.
SVG editing?
Component-style icon sets?
Variables and visual search?
Animations on your vectors?
This update is huge for anyone designing in Framer. You can finally stay in one tool—from design to launch—without feeling like you’re sacrificing anything.
Framer just became a design tool and a site builder. And honestly? It’s starting to look better than both.
Wrapping up
With these new features, Framer doesn’t just catch up to Figma, it starts to blur the lines.
SVG editing?
Component-style icon sets?
Variables and visual search?
Animations on your vectors?
This update is huge for anyone designing in Framer. You can finally stay in one tool—from design to launch—without feeling like you’re sacrificing anything.
Framer just became a design tool and a site builder. And honestly? It’s starting to look better than both.
