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

Magic motion

We’ve introduced Magic Motion—a new transition type that creates slick screen to screen transitions by magically animating layers from their state in one screen to the next. Magic motion abstracts away the details of creating complex transitions by inferring what layers in your screens are similar to each other and then smoothly animates the changes in properties. This is inferred through layers that share the same name or have been duplicated from one another. You’re not just limited to styling/positioning transitions either—layer hierarchy is taken into account which makes building enter/exit transitions as easy as enabling Magic Motion!

Updated examples

In light of all the new features that shipped in the past few months, we’ve made a second pass over all of the examples that shipped back in December 2019! They’re now organised into separate categories and each example has been revised to really stretch the boundaries of what’s now possible without writing a single line of code. The examples now have improved documentation and use all of the shiny new features including Magic Motion!

Vertical text alignment

Vertical alignment of text layers can now be controlled in the properties panel. The vertical alignment of text layers that existed prior to this update will default to top.

Other changes

  • Fixed a bug that caused code components to display the Create & Edit CTA whilst they were still loading
  • Code files can now be created when code mode is set to auto
  • The prototype connector will no longer appear on layers when in view only mode
  • The Open In New Tab preview page no longer shows the project bar
  • Figma components are now preserved after being imported
  • Fixed a bug where default frame sizes would not load
  • The device component is now resizable on the canvas. We removed this in a previous update but re-introduced it to give you some flexibility over the background you choose for your device previews
  • The search query is now cleared in the insert menu after you select a category
  • Updated the keyboard shortcuts modal
  • Various UI fixes in the project dashboard
  • Fixed a rare case that caused poor performance on the canvas
  • Layer titles and selection boxes are now hidden whilst dragging
  • The Framer Tools toolbar app now supports macOS High Sierra
  • The “component time limit exceeded” errors you may occasionally see for heavy code components have been reduced
  • Improved the hint for how to connect frames together when building a transition
  • Fixed an issue where frames of projects imported from Framer Desktop would have inactive transitions
  • Scrollbars now appear as expected when “always show scrollbars” is enabled on Mac OSX
  • The show console option in the preview window has been moved to a button and will now only display if the component being previewed contains console.log statements
  • Fixed a bug where styling properties wouldn’t appear as expected in the preview window when a code override was applied to a layer
  • Text layers can no longer be set as the home frame
  • Fixed a bug where invites to members of a team could not be cancelled until reloading the team settings modal
  • Improved the performance of so me animations in the dashboard
  • Fixed a bug that caused built-in Framer components like scroll and page to not re-render after assets were uploaded
  • The up and down arrow keys now work as expected when editing a multi-line text layer
  • Fixed a bug that caused stacks to preview incorrectly
  • Improved the role dropdown for members within the team settings modal
  • Previous Frame transitions are now known as Back to Previous and can be added from the interactions menu
  • The project title and team/folder breadcrumbs are now stacked vertically to free up screen real estate in the toolbar
  • Fixed a bug where the code editor preview would show the previously edited component and not the one currently being edited
  • The project duplication menu option being enabled is now consistent between the editor and the project dashboard
  • Added a loading state for components on the canvas to prevent misleading “Component file does not exist” errors
  • Links between frames on the canvas are now preserved when duplicating
  • The preview window can now be toggled on/off when the code editor is open
  • Account settings can now be opened from the project editor