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 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.
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