Layout & Design

Framer Update: Scale Tool (K)

Framer Update: Scale Tool (K)

Framer Update: Scale Tool (K)

Benjamin

·

3:24

·

7.8K views

·

About this lesson

The February Update introduces the Scale Tool. You can activate it by hitting K, taking over the property panel and on-canvas selection controls. Scale layers with a factor or to a specific size, with all styles like Radius, Font Size, and Borders taken into account. The tool can be controlled entirely via the keyboard—after hitting K you can type a factor like 2 or 0.5 and then hit enter, enabling rapid iteration. Alternatively, you can simply scale via the canvas. Scale is especially useful when working with assets, graphics, and icons. https://framer.com/updates/february-update-2025

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and in this video0:03I'm very excited to introduce the skill0:07tool let's have a look to open the skill0:10tool I can simply hit K this takes over0:13the property panel revealing our scaling0:16options first the skill input with a0:19bunch of Handy presets next the origin0:22control defining the transform origin0:25and you can even scrub these values for0:28precise control and then right click on0:31the steppers to reset and finally the0:34size control allowing you to pick a0:36specific width or height to scale to so0:39I'll scale it down to 800 pixels which0:43is a0:440.8x and this has scaled the entire0:47layout block taken from a web page to0:51800 pixels with all the contents within0:54still customizable from the text layers0:57to the videos1:00my favorite way to scale a layer is by1:02hitting K typing a factor and then1:06hitting enter so we select a layer K1:11Factor enter the scale input accepts1:14just a number like 0.5 but also1:190.5x and as you can see the scale tool1:21works with all sorts of unique setups in1:24this case unique masking layers whether1:27it's luminance masking SVG G masks1:31radial gradient masking and even more1:34complex composited or layered masking1:37setups with all layers remaining1:40customizable we can also scale assets1:43and even multiple assets at once here I1:46have two framer assets designed in1:49framer I can select both of them hit K1:54and maybe here let's change the origin1:56as well and then I'll scale both of them1:58to 600 pixels and of course each of2:02these assets maintains their respective2:05aspect ratio very useful for exporting2:08scaling also works for responsive2:10layouts and elements like Graphics this2:13header for example contains both so with2:16it selected I can hit G type2:190.5x and scale it down in one go this2:23can also be done for elements within a2:26layout like a text layer or a frame and2:29when using fractional sizing you'll find2:32the rest of the layout instantly adapt2:34after a skill things like font sizes2:38radius and borders will all adapt to2:41your skill factor and finally when the2:44skill tool is active we also render2:47these scaling controls around your2:50selection this means I can also scale2:52layers directly on the canvas without2:55having to type anything and depending on2:57where you scale from framer will infer3:00the correct origin and that's pretty3:03much it for this video thank you so much3:05for watching and stay tuned for more3:08updates coming soon
TeachesSizing

Watch on YouTube ↗

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.