Framer Update: Squircle

Quick Overview

Framer introduced the 'Squircle' CSS property, a powerful new feature demonstrated through styling buttons with variable radii and smooth cornering, which can also be applied to other layout elements and components like links and form inputs, offering advanced, reusable, and consistent visual design capabilities across projects.

Key Points: The video introduces the new 'Squircle' CSS property in Framer, designed to create smooth, rounded corners similar to Apple's iOS app icons (00:32). The presenter modifies two buttons, adjusting the 'Radius' and 'Squircle' properties in the Styles panel to achieve the desired rounded effect (00:09-00:27). The 'Squircle' property is shown to be a component variable that can be linked, allowing for consistent application across multiple elements, such as buttons and cards (01:15-01:38). The presenter demonstrates linking the 'Radius' and 'Squircle' properties to a variable within the 'Button Variables' editor (01:25-01:34). The 'Squircle' property is supported in all Chromium-based browsers (Chrome, Edge) but is noted as experimental and not yet supported in Safari or Firefox (02:34-02:42). The technique is also applied to other elements, including a form input field in a newsletter signup, showing its versatility beyond just buttons (02:20-02:28). The video concludes by showing the technique successfully recreating the look of the macOS Shortcuts app icon using 3D transforms and masking within Framer (01:50-02:08).

Context: The video, presented by Benjamin, showcases a new feature in the design tool Framer: the 'Squircle' CSS property. This property allows designers to easily apply complex, aesthetically pleasing corner rounding styles, often associated with modern operating system design languages like Apple's iOS, to various UI elements such as buttons, cards, and form inputs within a Framer project.

Detailed Analysis

Benjamin introduces the 'Squircle' property in Framer, a feature that allows for creating smooth, rounded corners reminiscent of iOS app icons. He begins by selecting two existing buttons in the design canvas and accessing the Styles panel on the right. Here, he adjusts the 'Radius' property and then selects the new 'Squircle' property, setting it to 50% to achieve a highly rounded, friendly look for both buttons (00:08-00:32). He emphasizes that this property allows for more nuanced corner treatment than standard radius settings. Next, he demonstrates how this feature can be used to create reusable components; he applies the same styling to card elements in a website layout, ensuring visual consistency (01:04-01:14). Furthermore, the video shows that the 'Squircle' property supports variables, allowing designers to control corner styles across instances centrally, as seen when editing button variables (01:15-01:34). The presenter also shows the application of this smooth rounding to native form inputs, specifically a newsletter email field (02:20-02:28). Finally, he showcases a complex example of recreating the macOS Shortcuts app icon, utilizing 3D transforms and masking alongside the 'Squircle' property for high-fidelity graphical recreation (01:50-02:08). Browser compatibility is noted: it works in Chromium-based browsers but is unsupported in Safari and Firefox.