Updates

The December Update introduces Squircle, a modern property 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 fresh corner-shape 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. Check out the Squircle video here to learn more.

Added

• Added the new Squircle property to Styles

• Added ability to copy-paste Grid Styles

• Added Variable Font support to Forms

• Added ability to multi-select Vectors

• Added ability to unlink Vector Sets

• Added cap to Component Events

Improved

• Improved Font Picker by scrolling to the selected font

• Improved Page Panel by scrolling to the current page

• Improved Custom Fonts, making them team-based

• Improved Desktop tabs with middle-mouse closing

• Improved experience of pasting of Vector Sets

• Improved editing experience of rich text links

• Improved redirects with parentheses support

• Improved renaming Assets via double-click

• Improved performance of renaming Assets

Fixed

• Fixed Tickers with Position set to Absolute collapsing

• Fixed Tickers not supporting Scroll and Loop Effects

• Fixed Scroll Effects in Templates with A/B Variants

• Fixed Aspect Ratio persisting when changing size

• Fixed Gradient angles not having rounded values

• Fixed Viewers being able to change Color Styles

• Fixed custom code with references not building

• Fixed code errors not showing in publish sheet

• Fixed Add Custom Cursors in Scroll Sections

• Fixed alignment of App Toasts across views

• Fixed Link Style Transitions for Text Styles

• Fixed pasting text layers from Collections

• Fixed exporting layers with missing fonts

• Fixed Desktop tab crashing on Windows

• Fixed Text Selection Colors in Overlays

• Fixed Quick Actions not finding folders

• Fixed Submit Button Variants in Forms

Introducing Masonry Grids in Framer. Turn any Grid into a packed masonry grid with a single click. The Masonry toggle is available under the Grid properties, and enabling it lets you craft masonry layouts. These types of layouts use fixed columns but flexible row heights, so items stack tightly, creating a brick-like pattern driven by each layer’s content or height. This works especially well with our recently introduced Fit Image feature, letting you design Pinterest-like layouts directly in Framer. You can also design new masonry grids from scratch, by selecting Masonry from the Layout Menu in the Toolbar. Masonry Grids play nice with our CMS, where using Effects like Stagger and Lightbox unlock all kinds of new animations and interactions. Watch the video on YouTube to learn more about designing with Masonry Grids in Framer.

The sixteenth Framer Font Drop™ adds Tiny 5×3, Xx Stardust, Wavetosh, and St. Martin to our curated Open Source font collection. All of these typefaces are now available in the Font Picker and ready to use in your next template or website. Would you like to see your own open source font featured in Framer? Please feel free to reach out, we’re always looking for more additions.

• Tiny 5×3 by Jack Halten Fahnestock

• Stardust by Studio Mucho Gusto

• St. Martin Carl J. Kurtz

• Wavetosh by GGBot

Meet the Ticker Effect, a new way to design continuous animations for text, images, and beyond. We’ve completely re-imagined Tickers in Framer. This new Ticker Effect now works with the CMS, can be applied to any Stack, supports unique settings for each Breakpoint, and is even faster and more accessible. You can find it in the Effects menu, and it can be applied to any CMS Collection List or Stack. No more messy canvas, duplicated collections with filters, or hidden duplicates for responsiveness. Plus, it brings all-new features, like draggable support and automatic orientation detection, unlocking new workflows and more creative interactions. We think you’ll love it. Watch the video here to learn more. The highest-fidelity animation and interaction tools. Only in Framer.

Today we’re rolling out Relative Dates, a very popular feature request for the CMS. You can now display dynamic date values like Today, Yesterday, or 1 week ago, making your content feel more natural and up to date. To give it a try, select any date connected to your CMS Collection, open the Text Transform popout, and choose Relative as the Display type. You can also fine-tune the look by adjusting Capitalization and picking between Short, Medium, or Long styles. Relative dates are fully compatible with localization, so they’ll automatically adapt to your site’s language.

Introducing Auto Rename, a new AI-powered way to rename your layers. Just select the layers you wish to rename, and hit ⌥ + R on macOS or ALT + R on Windows, and we will magically rename the layers. This helps keep your projects clean and manageable, without any manual effort required. Framer checks what your layers represent, and we come up with clean names. See our short overview video on YouTube to get a sense of the layer names this can generate.