Changes to Framer
As we introduce Framer to the web, we’ve changed some existing features and released a number of new features.
On top of this, we felt that the entire interface was due for fresh coat of paint to help solve for some common issues. Moving Framer to the web impacts speed a lot, both in performance improvements to Framer itself and new features allowing for fast prototyping.
With our new interface, we wanted to convey how easy and fast prototyping can be. We do understand that as we moved some things around, you may on first sight not yet know what is now where. For this reason, we’ve outlined everything that’s changed.
The Framer canvas on Framer Web
What changed
Below is a quick overview of what’s changed in Framer. Continue reading to learn more about some of the major changes.
| Feature | What changed |
|---|---|
| Graphic tool | The Graphic tool has moved into the Custom Icon under the Insert menu. To quickly start drawing you can still use the `G` shortcut. |
| Round tool | The Round tool has been removed, as it only equals a Frame with a radius set. To create a Round shape, draw a Frame and drag the dot in the top-left to set a radius. |
| Link tool | The link tool has been replaced with the Interactions menu, which adds a number of extra functionality to the Link tool. |
| Code editor | Code features, including the editor, are hidden by default and can be toggled to always show. Existing projects that contain code will have code enabled already. |
| Code overrides | As code features are now hidden by default, code overrides only show up in the properties panel if you enabled code. |
| Component panel | We’ve halved the size of the components panel to the bottom left. Any component you create or install from a package can now also be found under the Insert menu. |
| Packages panel | Team and public packages have also moved to the new Insert menu. Press `i` or click the + tool to search all your favorite packages. |
| Support | The support plug-in has been removed. You can reach support by selecting the ? menu bubble in the bottom-right. |
| Live Preview | The Live Preview has been removed. It allowed you to quickly preview your project on mobile devices, which the Prototype view on the web client also allows. |
| Export Web Preview | The Export Web Preview feature has been renamed to Export as HTML and remains a Desktop-only feature. |
| Preview settings | Setting device frames, which was previously done under the Preview menu, are now set with the Device Component. |
Interaction menu
The traditional features that we know from the Link tool can now be found under the Interactions menu. The same functionality from the Link tool still exists, but we’ve supercharged it with a lot of additional features:
- Where the Link tool had only the Tap trigger, Interactions now have the default triggers Tap, Tap Start, Click, Mouse Down, Mouse Up, Mouse Enter, and Mouse Leave.
- All these events can now also trigger opening a hyperlink or logging something to the console.
- We’ve introduced a new transition, called Magic Motion, which allows you to sprinkle your prototype with some magic by auto-animating between screens.
- You can now attach events to code components you built.
- Interactions can be added to an element directly with the interaction connector, which looks like a thunderbolt, on the right-side of your canvas element.
Creating interactions in Framer
Insert menu
With the brand new Insert menu, you can now add everything you need to make your project interactive just by selecting the + tool or pressing the i key. The Insert menu allows you to for instance search your project for design components, code components, or components from packages.
You can also quickly create transitions or add interactive customizable components maintained by the Framer team, like video players, loading indicators, sliders, and many more.
Learn more about the insert menu
The insert menu within Framer
Code
It may be that you can’t find code overrides and code components anymore. This is because code features are now hidden by default, to avoid any unnecessary distractions when you don’t want to leverage any code in your project.
In case you do decide to play around with code, you can enable it by heading to the top-left menu and, under Code, select Show Code When Used. From this menu, you can also toggle to always show code features.
No worries though, for any of your existing projects that already contained code Framer will automatically enable code.
Enabling code