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

Dashboard tour

To help you get started using Framer Web, the dashboard now has an onboarding tour and a welcome window that highlights the various features in the dashboard and links directly to the app tour. Need a refresh? Just click the help icon in the bottom right of the screen to go through the tour again!

Account and team settings

We’ve unified the account and web dashboards by condensing all of the team related settings into a simple modal accessible via the context menu next to each team in the dashboard sidebar. You can adjust permissions, update data about your team, invite new members and see your invoices right from the project dashboard. Adjusting account settings works the same way it did before but appears in a modal accessible through the context menu next to your user in the sidebar.

Code mode

Code related features are now hidden by default for new projects and existing projects which don’t use any code assets. This is part of our efforts in reducing intimidation for new Framer users and making sure interactive prototyping features are surfaced in a prominent and succinct way. Know enough code to be dangerous? You can enable code mode via the file menu and adjust preferences for when it’s enabled.

Preview window improvements

The preview window and the infrastructure behind it has been overhauled to improve performance and the overall previewing experience:

  • The preview will now be displayed automatically when your project has loaded
  • It will no longer overlay other floating panels in the user interface
  • Snapping behavior when dragging allows you to dock the window to the corners of the canvas. Dragging is also constrained to the edges of the canvas meaning you can no longer hide UI by mistakenly dragging it over other panels
  • Automatic resizing when you change your selection on the canvas
  • The Open in New Tab option is no longer in responsive mode by default
  • A resizable split pane has been added to the code editor that previews the component you’re currently editing

The different scaling options have also been reconciled into 2 different modes—responsive mode and default. Responsive mode will ensure your frames resize to fill the available space whilst the default mode keeps the scale of your previewed frames equal to what you see on the canvas.

Other changes

  • The tooltips you’ll see as part of the app tour are positioned more accurately
  • Fixed a bug where an image fill would be applied to the wrong frame if you changed your selection whilst the image was uploading
  • The preview window now shows an empty state when there’s nothing to preview on your project canvas
  • Lots of UI polish for the dashboard and app tour
  • Fixed a bug that caused changes in code components to appear out of sync
  • Fixed a bug where design components that use stacks would not render correctly when imported in a code component
  • Added error tooltips to the validation of the account settings modal
  • Fixed a rare case where the underlying Framer library would crash when zooming on the canvas
  • The Prototype view will now show a more informative error message when an error is encountered due to permissions or frames no longer existing
  • Fixed a bug that caused stacks to render incorrectly in the shared preview
  • Code components that use a custom displayName that contains a space now appear in the sidebar and insert menu as expected
  • Projects that use global state management libraries should no longer display errors when rendering a large number of components
  • Nudge preferences are now accessible via the dropdown menu for the zoom controls in the toolbar
  • The delete icon for image and file property controls now renders at the correct size
  • Fixed a bug that caused dragging to stop when the mouse left the preview window
  • Changing your frame selection on the canvas will now correctly update the scaling within the preview window