Framer Update, Layout & Design

Vectors: A complete reimagining of vector editing in Framer with Vector Sets and Animations

2:58

8.1K views

May 21, 2025

About this lesson

Introducing a complete reimagining of vector editing in Framer. We’ve redesigned the toolbar, with new vector shapes and path editing tools now available anywhere. Draw icons and logos directly within your existing layouts. For larger sites, we’re introducing Vector Sets—a dedicated Canvas with all the tools you need to design consistent icon sets. These sets can be shared and updated across multiple projects, with visual browsing and search built in. And last but not least, we’re introducing Vector Animations, starting with the Stroke Effect, with powerful new animation options. Together, this provides an all-new design experience in Framer. We think you’ll love it. https://framer.com/updates/vectors

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Today, we're excited to introduce a 0:02complete reimagining of vector editing 0:04in Framer, allowing you to seamlessly 0:07draw and edit paths anywhere on the 0:09canvas. Build and scale cohesive icon 0:12libraries, and create next level 0:14animations and micro interactions 0:16without ever leaving Framer or writing a 0:19single line of code. The new vector menu 0:22gives you everything you need to create 0:24and edit logos, icons, and illustrations 0:27directly on the canvas, anywhere you can 0:30insert layers. We know you love 0:32designing from scratch in Framer, so 0:34proper native vector editing is key for 0:36keeping your workflow clean. And as your 0:38projects grow, keeping cohesive sets of 0:41graphics organized and easily accessible 0:43can become more of a challenge. Which is 0:46exactly why we're introducing vector 0:48sets. A vector set now allows you to 0:51bundle together groups of vector 0:53graphics, giving you a brand new 0:55browsing and search experience, and a 0:57dedicated canvas to create and edit 1:00beautifully consistent sets of icons,1:02along with the added power and 1:04flexibility of variables to make your 1:06icons even more customizable. You'll 1:09find a new vectors section on the assets 1:11panel where you can insert, edit, or 1:14create new vector sets. Or if you've 1:16already started drawing on the canvas,1:17you can just rightclick and choose 1:19create vector set. Or if you've already 1:22got a set of SVG icons on your computer,1:25you can now drag them directly onto the 1:27canvas, and Framer will turn them into a 1:29new vector set automatically in one 1:32step. You'll be brought into a dedicated 1:34canvas with all the vector tools you 1:36might need and an add button to continue 1:38growing the set. And when you insert a 1:41vector set on a page, you'll get a whole 1:43new visual browsing and search 1:45experience that makes it incredibly easy 1:47to find the right icon. Vector sets also 1:51support variables like stroke color or 1:54opacity, for example, to give you as 1:56much flexibility as you need to 1:57customize each instance of an icon. And 2:00by combining multiple properties, you 2:02can easily create duo tone or 2:04multicolored icons from a single vector 2:06set. And of course, each instance is 2:09easily scalable. We've also gone ahead 2:12and revamped the icon sets available in 2:14the insert menu, all with the new 2:16browsing experience. Vector sets also 2:19unlock a brand new animation effect, the 2:22stroke effect, which gives you entirely 2:24new properties to animate the length,2:26gap, and offset of a path, plus three 2:29unique ways to make it loop, unlocking a 2:32whole new level of animation in Frame.2:35You can create an infinite logo 2:36animation, bring icons and illustrations 2:39to life, or create beautiful micro 2:42interactions with just a few clicks. And 2:45that's vectors. Inline editing, vector 2:48sets, and brand new stroke animations.2:51An all new design experience now in 2:54Framer.

TeachesDrawing Vectors Vector Sets Animating Vectors

Also coversFrames SEO Audit Variables

Watch on YouTube ↗

‹ Wireframer: Kickstart your next site with AI-generated pages

Framer Event — Spring 2025, New AI Tools, reimagined Vector Editing, and Funnels with AB testing ›