Framer Update, Layout & Design

Framer Update: Squircle

Benjamin

3:17

10K views

Dec 10, 2025

About this lesson

The December Update introduces Squircle, a new modern style that lets you design layers with incredibly smooth corners, like iOS app icons. Squircle is deeply integrated in Framer, working across Frames and Stacks as well as Link Styles and Forms. This means layers using Squircle can be animated. Squircle is based on the new corner-smooth property in CSS, which works perfectly in Chrome and Edge, but currently not yet on Safari and Firefox. To work around this, we’ve designed our own fallback solution that will try to match the optical rounding using just Radius, ensuring your designs never look broken. We’re also bringing Variable Fonts to Forms, multi-selection support to Vectors, and more. https://framer.com/updates/december-update-2025

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

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

0:00Yo, my name is Benjamin and this is 0:03Squirles [music] in Framer. Here we have 0:06two buttons and they&#39;re rounded with 0:09[music] radius. And I can now select 0:11both of these, head over to the styles 0:14panel and add a new property called 0:17squirle. And this property will be 0:20positioned below the radius property.0:23and it [music] effectively impacts the 0:26corner smoothing, allowing you to create 0:28these super ellipse or squirrel-like 0:31shapes similar to app icons on iOS. I 0:34personally like values between 40 0:37[music] and 50% most as this lets a lot 0:40of the roundness of the radius come 0:43through and it produces some really 0:46friendly looking layout elements. This 0:49new property lets you design interactive 0:52components, layout elements, and entire 0:54websites in Framer that feel [music]0:57different. Here, we&#39;re using those same 1:00buttons as call to actions in our 1:02[music] layout. And we&#39;ve also applied 1:05squirrel to these cards here, giving us 1:08some incredibly smooth rounding and 1:11making this header feel more fun and 1:14friendly. We can also work with this new 1:17squirrel property within components as 1:19[music] just like the radius property,1:22it also supports variables. So in just a 1:26few clicks, I&#39;m able to make both radius 1:29and squirle a variable, adding both as a 1:33property control on the component 1:35instances. [music] So they&#39;re completely 1:37customizable. So you can design these 1:40interactive and reusable elements 1:43complete [music] with customizable 1:45rounding and smoothing. Combined with 1:48our powerful design features like 3D 1:51transforms, [music] P3 colors and 1:54masking. This lets you design 1:56highfidelity graphics [music] like app 1:59icons in Framer. For example, here I 2:02recreated the Mac OS shortcuts app icon 2:06using nothing but framer. Next, we&#39;ve 2:10ensured that this new property is deeply 2:12integrated with our feature set. So, you 2:15can even use it within link styles, for 2:17example, or within the framer native 2:21form inputs, where you can even create 2:24animations and interactive states using 2:27[music]2:27squirle. Now, under the hood, we&#39;re 2:30using the brand new CSS property corner 2:33shape. Today, this is supported in all 2:36Chromiumbased browsers like Chrome and 2:39Edge, but not yet in Safari and Firefox.2:42[music]2:43And for these browsers, we&#39;ve designed 2:45and implemented our own fallback 2:48solution where we&#39;ll match the optical 2:51rounding using [music] just radius. So 2:55your layouts and buttons will never feel 2:57off or look broken. They&#39;ll simply 3:00display a normal radius that has the 3:03exact same optical rounding. That&#39;s it 3:06[music] for this video. Thank you for 3:09watching and stay tuned for more updates 3:12coming soon.

TeachesVariables

Also coversComponents Form Inputs Keyboard Shortcuts Links

Watch on YouTube ↗

‹ Framer Update: Localized Page Paths

Linking to emails and phone numbers in Framer ›