We’re constantly improving Framer. See the latest features and updates.

New & improved insert menu

The insert menu has been given super powers! It’s the one-stop shop for everything you need to build a prototype. Think device frames, interactions, team or public packages, everything is in there! You’ll see real-time previews of the components within your project and components from packages. Packages and assets now live exclusively in this menu, just press i to open the menu and use the semantic search box to find what you need.

As the insert menu is now the home for components, packages and assets in your project, we’ve also condensed other parts of the user interface. Things may look a little unfamiliar—here’s what you need to know:

  • The assets tab has been removed as packages and components now all live in the insert menu. We conducted extensive user testing to validate this decision where we observed that this simplified model performed better for usability and prevented a lot of back and forth switching between tabs in the left panel. We hope you notice this too!
  • Components can be created from the app menu under Component. The keyboard shortcuts remain the same—just use ⌘K to create a design component or ⌘⇧K to create a code component

We’re really eager to hear your feedback on the new insert menu. It lays a great foundation for being able to display more metadata around components in the future and provides a much more flexible searching interface for discovering packages.

Copy and paste animation transitions

You can now copy and paste animation transitions into other interactions. Just find the animation you want to copy, right click and you’ll see a context menu with a “Copy” option. Find another interaction you want to use that transition, right click and select the “Paste” option!

Other changes

  • The properties panel is now resizable
  • Fixed a bug where the edit form for a comment would not display the original text of the comment. While we were there, we also enabled seeing the name, avatar and cancel button when editing, as well as no longer showing a warning when cancelling the edit if the content did not change.
  • Fixed an issue where auto-sizing of text layers that use Google Fonts and are part of a stack would give inconsistent results
  • Added compatibility for 3rd party libraries that rely on an old version of Framer Motion which caused useTransform to throw an error
  • Fixed a bug that may have caused red bars to appear when typing quickly in a multi-line text property control
  • Fixed a bug where the preferences you set in the editor menu could be mistakenly overwritten by the default settings
  • Fixed an issue where the color picker would close after using the code editor
  • The properties panel now scrolls as expected when its content overflows
  • Icons in the preview window now appear correctly when code mode is set to “Always Show Code”
  • Auto-sized text layers that are part of a stack no longer shrink unexpectedly in the preview when the stack is resized
  • Fixed a bug where negative rotations applied to text and SVGs were not rendered on the canvas
  • Fixed an issue where the content and prototype connectors would overlap
  • UI and UX tweaks to the members list in the team settings modal
  • Fixed a bug where choosing Update Master from the context menu of a design component instance with overrides applied would cause the instance to merge with the master and effectively be removed from the canvas
  • Fixed an issue where the code editor panel was still rendered when code mode was disabled
  • Fixed a bug where a frame that is connected to a scroll component wouldn’t render as expected when it had been moved to become a child of another layer. The frame will now be disconnected when it is no longer a root-level layer on the canvas
  • The Data object used in code overrides is now properly reset when refreshing the preview window
  • Fixed some different cases where Magic Motion transitions would stop unexpectedly