Updates

Live preview

Live preview is back and better than ever in Framer Web. You can view updates to your prototype in real time on your mobile device with the Framer Preview app or in your mobile browser.

Just click the mobile icon in the preview window and a QR code will appear. You can scan it with your phone’s camera and view it in your browser, or if you have the Framer Preview iOS app installed, it'll open there in fullscreen mode. Updates to the Framer Preview app for Android are scheduled soon.

Text Properties

There are now more text properties available to help you style any text in your projects. In the Properties panel you will find the new transform and decoration properties. With the transform property, you can set your text to all uppercase, all lowercase, or capitalize each word. With the decoration property, you can also choose from underline or strikethrough. In additi on, you will now be able to set your line height in pixels and percentage.

Private Links & Privacy Controls

You will now find more options in the ‘Permissions’ section in your Team settings modal. This is where team admins can set team permissions for inviting members, project access and prototype access if your team is on the Enterprise plan. With these permissions all your files can be completely private and only accessible to those with your company’s email domain.

In addition, all users on the Pro or Enterprise plan will now be able to make prototypes private on a project level as well as limit collaborators to only viewing prototypes. In your project, open the Share panel and check the box next to Private Link. If the prototype access has already been determined on a team level, you will see that reflected in the Share panel.

Layout Grids

You can now use layout grids to help organize elements while designing interfaces. Enable layout grids with the shortcut Ctrl + g. Once enabled, a grid property becomes visible under layout in the Properties panel, here you can customize your grid settings.

Choose whether you want horizontal or vertical rows under type. Then decide how many you want and set their width or height, margin, gap, and color. Once you have perfected your settings, it’s easy to copy and paste your grid and reuse it throughout your project.

Custom Fonts

Anyone on the Pro or Enterprise plan can now upload their own fonts directly to any project. To use custom fonts, select the font type dropdown under the text section of the Properties panel. In the Fonts modal, you can select the custom option where you will be prompted to upload a font from your computer.

Once your font is uploaded you can use it in your project and anyone viewing your project file or prototype will be able to see it.

Other changes

• Improved functionality on mobile devices
• Improved selection model
• Added support for editing and deleting Code Components from Insert Menu
• Added enterprise controls to set access restrictions for shared prototypes within a team

Interaction Highlights

Interaction Highlights help users understand how to interact with a prototype by indicating which elements they can click, tap, drag, or swipe. Simply enable them from the Share panel by clicking the checkbox next to Interaction Highlights.

After they’re enabled, blue indicators will briefly flash over areas that can be interacted with once the prototype loads or a user touches anywhere on the screen. Framer offers a wide range of interactive elements, including buttons, toggles, inputs, sliders, and much more.

Handoff for Code Components

Handoff in Framer just got better. You can now view and copy the properties of any Code Component in the Handoff panel. Developers will be able to see how components are configured, making the transition to production even easier.

Need to know which properties you can override? Clearly see which properties are defined by Property Controls set in your components. Working with tokens from your design system? See all the tokens used in your components right in the Handoff panel. You can also filter out all undefined props with the Used Props setting.

Clicking or hovering over properties in the Handoff panel will give you more information as well. Images and files used in Code Components will be revealed in your Finder or a new tab making all your assets easy to manage. EventHandlers for local custom actions will open the file where the definition of the handler is located.ComponentInstance will highlight the instance on the canvas when hovered. Finally, strings will be displayed in quotes and ifdisplayTextArea is set to true, the value will be wrapped in backticks.

Unsplash integration

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