Updates

We’ve teamed up with Unsplash to build first party support that allows you to browse and add images from their royalty-free image library, right from within Framer. This release builds upon the success of the original component, but integrates Unsplash directly into our Image Fill picker, with added support for all frames and stacks.

Open the Image Fill, select Unsplash, search by keyword or color and access a wide-ranging collection of attributed images that visually maps to the rest of your design. Open Framer or sign up for free to use 1,900,000 freely usable visuals in your prototypes.

Content edge snapping

You can now double-click on the edge or corner of a selected layer on the canvas to slice off any white-space between that edge and the layer’s content. Use Shift+DoubleClick to trigger Fit Content on the entire layer instead

Code building activity

A spinner is now displayed at the top of the code editor to indicate when code file changes are still being sent to the server

Other changes

• Drastically improved performance of Magic Motion transitions in large projects
• Fixed some browser compatibility issues with the team setting modal
• Fixed copy and paste shortcuts not showing in the main menu
• Updated behavior of the Share panel to allow Code Components to be shared when no Home Frame has been set
• Fixed a bug where logging an object from a Code Component or Code override would show undefined in the console
• Fixed a bug that caused a Design Component which was a child of another Design Component and was shared in a package to lose its positioning values when installed in a project
• Large objects and objects with circular references now display correctly when logged to the console
• Improved empty state of the Share panel to indicate when no home frame is set but content is present within the project
• Fixed a bug where project titles that contained non-Western characters could fail when downloading to Framer Desktop
• Fixed a buggy transition that would occur when using the Back to Previous transition from a screen that was navigated to with Magic Motion, to a screen that was navigated to with a different transition type

Preview window touch cursors

The preview window will now display a touch cursor over layers which have touch interactions applied.

Unpublish from the Insert Menu

Team packages published by yourself can now be unpublished from the Insert Menu.

Upload user avatar

You can now upload a custom avatar to your Framer user instead of having to change it on Gravatar.

Figma importer improvements

The way that vector-like shapes imported from Figma are handled has changed which results in much more accurate conversions to Framer. This means we now convert all of the effects Figma supports for vectors including inner/regular shadows. Text layer conversion has also improved—basic blend modes, text decoration and opacity are all now supported. With the increased accuracy you may notice importing taking a bit longer than before, as such we’ll be focusing on improving the speed of importing in the coming weeks.

Other changes

• You will now be warned when closing Framer if there are code file changes which have not yet been saved to the server
• Fixed a bug that caused the Home Frame icon in the Layers panel to not update
• Fixed a bug where dropdown fields were not visible on Windows
• The handoff output now specifies the box-sizing property when generating styles for a layer that has borders
• Design Components can now be deleted directly from the Insert Menu
• Fixed slow performance when typing an email to search or invite a new user
• Updated the default Code override file to be easier to understand
• Fixed a bug where the connector on the canvas would not allow you to connect a layer to a Code Component
• The expiration date for your current subscription is now visible in the team settings modal in the Dashboard
• Fixed a bug where dropdown fields on Firefox would not be visible when using night mode

Insert Menu: Move project to team

To improve the flow of installing team packages into projects within your personal drafts, we’ve implemented a dropdown that allows you to move your project to a team, directly from the Insert Menu!

Onboarding tutorial page

We’ve added a handy tutorial page to the dashboard, complete with step-by-step video guides on how to create an interactive prototype with Framer. Click here to dive in and see what you can build in 5 minutes!

Other changes

• Fixed a bug that caused the Stack insertion indicator to not be shown on the canvas
• Updated example projects including a cool example of how to build a transition triggered by a timeout
• Added a more friendly error page when the Editor fails to load due to browser restrictions
• Various fixes and tweaks to the onboarding tutorial
• Fixed a bug that caused overrides applied to layers to not persist after reloading the project
• Fixed a bug where parents were not highlighted when moving layers
• Improved performance when detaching a Design Component instance from the master
• Fixed a bug that caused the equal distance snap indicator to not be shown on the canvas
• Prevent Sketch importing from failing completely if assets fail to upload
• Using the escape key to cancel moving layers within a Stack now works as expected

Framer Web is live!

Framer Web is live and we couldn’t be more excited to see what you build! We’ll be focusing on bug fixes and the roadmap in the coming weeks. Take a look at our feature request board and upvote features that are important to you.

We’re also running weekly classes and live streams together with the community on the Framer Discord Server. If you need some help with your project, encounter a bug or just want to chat with the community, we’re waiting for you!

Other changes

• Fixed a subtle flash that could occur on the first Magic Motion transition
• Fixed a bug that could cause the Dashboard to crash
• Fixed a bug that caused toggling Handoff mode to have no effect
• Various UI tweaks and polish for the mobile previewing experience
• Fixed a bug that caused the Preview window to not load immediately after the canvas has loaded
• Onboarding tutorial tweaks and updates
• Opening a link to a comment (i.e. via the "Reply in Framer" link in the comment notification email) on a mobile device will no longer open the comments sidebar as the UI is not responsive. This will be improved in a future update
• Improved copy for disabled states in the Dashboard
• Fixed some color inconsistencies when viewing the Dashboard in night mode
• The role selection dropdown for team members is now hidden for users who do not have the appropriate permissions

Domain name change

As we’re moving out of Open Beta and gearing up for launch, Framer Web now runs on https://framer.com. All existing links will continue to redirect to the new URL, and you can access the website at https://www.framer.com

Team creation flow

The team creation flow has been unified in the dashboard. You’re now able to create teams, send invites to members, add a custom avatar and upgrade the plan as part of a single flow.

Team deletion

Team admins can now delete teams from the dashboard. This functionality only applies to teams without an active subscription and who are not on an enterprise plan

Magic Motion tutorial

Learn how to create an interactive toggle switch in just 5 minutes! We just shipped a new tutorial in the dashboard that guides you through how to create a high fidelity micro-interaction with Magic Motion. We’ve embedded the video on the canvas along with step-by-step progress buttons so you can easily follow along whilst prototyping.

Improved windows support

We’ve fixed a number of bugs this week to improve the experience for our Windows users. This update is mostly focused on ensuring shortcuts are functional between different platforms—check the keyboard shortcuts modal to see what’s changed!

Previewed layer indicators

The layer you’re currently previewing will now display a visual cue on the canvas with a focus ring and a play icon, as well as an indicator in the layers panel.

Import from the toolbar

Import is now the secondary action in the toolbar allowing you to easily import static designs from Figma and Sketch directly from the canvas.

Insert menu component folders

The latest iteration of the insert menu now supports viewing folders of components from within your project and those installed from packages. It’s fully integrated with the search field, presenting the folder hierarchy as breadcrumbs allowing you to easily navigate back and forth. Based on the fantastic feedback we’ve received from the community, we’ll be making a number of improvements to the insert menu experience in the coming weeks, with a particular focus on navigation and grouping.

Updated share link format

The format of the generated URL for a project’s share link has been updated to support the inclusion of the project title in the URL. This ensures share links are predictable enough that you can tell what project a link is for whilst remaining difficult to guess. We’ve also decided to remove the version segment from the path—once project versioning ships you will be able to generate unique share links for each version of a project.

Old scheme:

https://beta.framer.com/p/4fb81daf-b65c-4c47-b299-88b7f6ad4845/latest/c5ydk09HR

New scheme:

https://beta.framer.com/share/My-Project-2fNwVYePN8WqqDFvVf7X

Other changes

• Fixed a case where Magic Motion transitions that use named layers could appear broken
• Handoff mode now disables the editing of layer size, positioning and other connected layers to prevent accidental edits
• Improved the error messages for uncaught errors in the Preview window
• Fixed a bug where an icon in the Insert Menu wouldn’t hide when dragging a component onto the canvas
• Fixed a crash that could occur if you attempted to convert and SVG to a graphic whilst in Handoff mode
• Fixed a case where Frames would lose their device preset when being dragged on the canvas
• Fixed copy and pasting layers that contain images between different projects
• Logs in the console of the Preview window are now selectable
• Updated design and copy for the Get Started section in the Dashboard
• Fixed incorrect cursors being displayed in the Share panel