We have rebuilt the optional code features for technical users in Framer, the main improvements are:

Framer for Developers

Find new and improved Default Components in the Insert Menu. 



Introducing a new way for you to create animatable and customizable gradients. Choose your own colors, angles and radius to make it your own.

Embed real songs, playlists, and podcasts in your projects using the brand new Spotify component in Framer.

See (and hear) how it works in the playground

Use the new Twemoji component to insert any emoji in seconds. Add it to chat apps, reactions, avatars, and anywhere you need a little extra feeling.

New Default Components

These improvements to Variant creation and editing will make your component creation workflow 10x simpler. Now you’re able to add, delete, duplicate, sort, and drag layers in any Variant instead of only being able to make changes to the Primary. This means you have maximum flexibility in your component creation process and can unlock component interactions for any use case.

Variant Editing

 is a new and improved way to share and manage Smart Components with your whole team. You can add any Smart Component to the Team Library from the Component Canvas to make them available instantly to your team from the Insert Menu. 

Once your component is added you can create a description so team members can ensure they select the correct component before inserting it into their own projects. This release is one of many to support better component management.

Team Library

Copy and paste for Smart Components now supports updating. This means when you paste a component from one project to another, any updates you make to the original component, known as the Primary, will be reflected in the pasted instance when you click the ‘Update’ action next to the component name. 

To test out this smooth new workflow we added a Design System folder in your dashboard that comes with some example components. You can customize these components, make them your own, then paste them in any existing project—and of course you can continue iterating and experimenting with these components and get the updates everywhere you pasted them.

Updating and Design System folder

Auto Size is here. Not only can you create truly dynamic designs that adjust to changes in content, but also buttons that change size on hover and click, accordions, dropdowns, and more thanks to some intuitive properties. 

Use the Grow property to ensure that changes to text are reflected in the surrounding elements. Just set the Grow property to Auto Width or Auto Height and watch everything fall into place with copy updates. Stretch layers in any direction and control padding independently by dragging the handles that appear when an element with Auto Height or Width is selected.

For dynamic designs that adapt to anything. 

Auto Size

You can now copy embed code right from the Framer preview and paste an iFrame in the website of your choice. Simply preview your prototype, click on Embed in the top toolbar, and copy the code.

This feature currently only works with public prototypes. Private prototypes will be supported soon.

Embedded public prototypes

 across any Framer project. This unlocks smoother workflows for sharing components. Paste an interactive button component, change its properties like text or color, and you’re good to go. Use the same component across projects and utilize their Variables and properties to work in every situation—just like your production components. 

If you need to make further changes to the Variants or interactions of your pasted Smart Component, you can simply unlink the component from its primary and keep iterating in the new file. This is the first of many features to help you create and share your design system with Framer.

Copy, paste, and unlink Smart Components

You can now switch between list view and gallery view in your project dashboard. The new gallery view makes it easier to scan your projects, and quickly locate the one you're looking for. 

By default, your Home Frame in the canvas will appear as your thumbnail, but you can also pick a custom one via the new "Set as Thumbnail" menu option. Thumbnails work best as 4:3 aspect ratio Frames—this will make them appear edge-to-edge on the dashboard. Customize your dashboard in the way that works best for you. 

Gallery view with project thumbnails

You can now use the Appear trigger and Delay property right in your Smart Components. This allows you to create custom components with their own sequenced animations or time-based transitions. Animated carousel components and smooth loading indicators can be created in minutes by changing the interaction trigger from Tap to Appear when adding an interaction to your Smart Component.

Sequenced animations and time-based transitions within Smart Components

Introducing gamepad support for Framer prototypes. You can now control any prototype with the game controller of your choice by using the Key & Gamepad trigger when you create transitions between screens. Just select the Key & Gamepad trigger and choose which keys you want your prototype to respond to. Supported controllers include:

PS3 DJ Hero Turntable (using custom driver)

Thrustmaster T300 RS GT (with pedals disabled)

Create hyper-realistic game interfaces and control them using the gamepad of your choice—all without code.

Gamepad support

Sequenced animations and time-based transitions are now possible in Framer with the new Appear trigger and Delay property. When setting up a transition between screens, first change the Tap trigger to Appear. Then, in the Delay property field, set the number of seconds you want your transition to be delayed by. This update makes features like progress bars and loading screens possible in just a few clicks.

Sequenced animations and time-based transitions

You can now create keyboard-controlled interactions in Framer thanks to the new Key trigger. When setting up a transition between screens, change the Tap trigger to Key in the interaction panel, then you will see the Key property appear below. Here you can enter any key on your keyboard, and Framer will register the correct one. You can take any prototype to a higher level of fidelity by adding native keyboard support to any transitions.

Keyboard control

Create easy sticky elements such as sticky navigation, colliding headers, and fixed pagination arrows with the Scroll tool and Stacks in Framer. Select the element you want to remain sticky, then head over the properties panel and find the new Sticky property. Here you’ll see four position properties to customize your sticky header—top, bottom, left, and right. These properties represent the position of the sticky element relative to its parent to allow for full flexibility of your layers.

Sticky scroll elements

There are new options available with the Scroll tool in Framer. With the Offset and Reset options added to the Scroll tool you can now animate to any scroll position or offset your scroll. You also have the option to reset scroll, set initial scroll position, and reverse scroll direction. Draw a scrollable area with the Scroll tool to see the new options in the properties panel.

Scroll tool update

The Recommended Teams feature enables new team members to easily find and join existing Framer teams within their organization. Everyone who creates a new team with their company email address will get the opportunity to recommend this team to anyone with the same email domain. 

To make sure you have this setting turned on, go to the Permissions section of the Team Settings modal and check the box next to Recommend Team.

Recommended Teams

Introducing Smart Components—interactive components that have their own interactions, animations, and properties. And require no code to build. 

To create a Smart Component use the shortcut command + K or go to the Component section of the top toolbar. Once your component is created you’ll arrive in the Component Canvas and you can start building. The key ingredients in creating Smart Components are Variants and Variables.



Variants are different visual states of a component, such as disabled, error, or hover. You can add as many Variants as you need to your components in the Component Canvas. You can easily add hover and pressed states to your components with infinite visual Variants then, add Variables to customize even further. Variables are custom properties you can expose in your components. Anything can be a Variable from text to color to border radius making it easy to customize any property you need in any component instance.

To unlock even more advanced layouts, you can even nest Smart Components, each with their own Variants and Variables, then compose them to create the most realistic interactive experiences.

Smart Components

Templates provide a starting point for new projects. You can choose from 13 default templates in the new project modal or create your own and share them with the rest of your team. In order to create your own, you can go to the templates folder within your team and start from scratch or convert any of your team projects into templates.

Templates provide a starting point for new projects.

Templates

You can now find a better preview experience in Framer. Previewing has been redesigned for quick iterations, previewing in context, and showcasing your work. When a layer is selected on the canvas, you will see a preview icon attached to the layer. This means your mouse travels less distance to the preview icon and a shorter time in between previewing and iterating. 


This release includes new options for customizing how your prototype is displayed in the preview window. Starting with a full collection of realistic and clay devices that features phones, laptops, monitors, watches, and TVs. The new options also include device hands and custom backgrounds that open up infinite customization possibilities. These custom display settings will also remain when you share a link to your prototype, so you can showcase the most polished version of your prototype with anyone. In addition, when you’re previewing you can quickly switch between layers and recently viewed elements in the Recents dropdown in the upper left corner.

Previewing has been redesigned for quick iterations, previewing in context, and showcasing your work.

Redesigned preview & presentation settings

Redesigned preview & custom presentation settings

Introducing the Assets section of the Insert Menu for easy access to useful design resources. In this new Insert Menu category, find shapes, icons, and illustrations from all the best creators and libraries. Designing in Framer has never been easier. With quick access to hundreds of icons available from in the canvas, and customizable illustration libraries you’ll have a beautifully designed prototype in no time. 

Check out this category to see all new pre-made vector shapes and custom icon sets, including Feather icons, Material icons, Hero icons, and Phosphor icons. Plus the Humaaans illustration set.

Introducing the Assets section of the Insert Menu for easy access to useful design resources.

Design resources in the Insert Menu

 provides a solid starting point for every new project. You can choose from a range of device presets including, everything from desktop to watch interfaces. Once your screen size is selected, use the 

 to continue designing interface elements.

With the introduction of the Screen tool, your shortcuts have also been shifted. Press the ‘S’ key to create a new screen and press Shift + S to create a new 

Screen tool

An updated Insert Menu featuring new categories created with the goal of putting exactly what you need at your fingertips. There are now 6 categories to help you quickly find any component you can think of.

Interface is where you can find tons of UI elements, including buttons, inputs, icons, checkboxes, and more. All interactive out of the box.

The Media section contains any components that provide or embed media from an external source. Here you can find things like video and audio players.

Utility components give functionality to your designs, prototypes, and canvas. Here find loading indicators, progress bars, sticky notes, and more to ensure you have everything you need to communicate your ideas.

In the Community packages section, browse an open-source library of thousands of free components to jumpstart your prototypes. Here you can find anything from simple buttons to advanced data population components. Check out the Featured section to see the most popular Community packages. 

Team packages are by your team and for your team, totally private and designed to help your team share and use your most up-to-date assets. And finally, any package you save from your team or the community can be found in the Favorites section.

New categories are just the beginning, the real magic is what you will find inside. In addition to the new structure, we’ve added more interactive components built for you by the Framer team. Find an 

Use these components and more to add easy interactivity to your prototypes. Just drag from the Insert Menu, drop anywhere on the canvas, and bring your prototypes to the next level.

Insert Menu refresh & new Default Components

A cleaner, more focused interface with more real estate allows you to focus on the properties you use most with less distraction by those you don’t need as often.

The indentation on properties helps improve scanability and predictability, helping you find properties faster. And moving properties like Radius and Opacity away from Layout and under Style, creates a much more sensible division of properties.

The experience of adding, deleting and editing properties that can have multiple rows/values (like Interactions and Shadows) is consistent and easier to understand for users who are new to Framer. To add a new property to your selected element, simply click the + icon next to the Style section. Choose your property and it will be added to your properties panel so you only have to see the properties that you are currently using.

Property panel redesign

A new feature for Enterprise teams! The organization entity provides support for multiple teams within your company in Framer. This new level of hierarchy is perfect for multiple subsidiaries within a company, different product teams, multiple teams within a product team, and even agencies working with various clients.

With this feature team admins can manage the entirety of their Framer user base in one single location.

Enterprise team admins can now manage permissions for all the teams in an organization and get an overview of every Framer user at their company. Team admins can control project access, prototype sharing, and team member invitations for whole organizations by locking the settings for every team to the organization.

Multi-team management

Make the most out of your custom fonts by sharing them with your whole team. Team fonts allow anyone on your team to have access to the correct fonts to fit your company’s design and branding.

Team fonts

Pages have arrived in Framer. You can add multiple pages to help organize your projects and break-up larger prototypes. To create a new page in your project, open the page section in the layers panel and click the ‘plus’ icon. Here, you can drag and drop to reorder your pages as well as rename them.

To share your work, you can link to a specific page or even a specific frame to make sure your team members are viewing the correct parts of your project. Select the page or frame you want to link to, copy the URL, and the link will display the correct element in the canvas when opened.

Canvas pages

We added a new components section below the layers section in the left hand panel. Here you will find a simple overview of all the components in your project. You can also drag your components onto the canvas from here.

Components section

Introducing a new selection setting. To turn it on go to the menu in the top left corner, navigate over to ‘Preferences‘ select ‘Use Direct Select’.


When ‘Use Direct Select’ is on, you will always select the deepest child element on first click, to move up one element hit the esc key. Additionally you can use CMD + Click, or CTRL + Click on Windows, to select the parent element of the element you have selected.

When ‘Direct Select’ is toggled off, your first selection will be top level and you can select deeper elements by double clicking. In addition, you can use CMD + Click to select the deepest nested element.

Selection setting

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 

 installed, it'll open there in fullscreen mode. Updates to the Framer Preview app for Android are scheduled soon.

Live preview

There are now more text properties available to help you style any 

. 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 addition, you will now be able to set your line height in pixels and percentage.

Text properties

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.

Private links & privacy controls

You can now use layout grids to help organize elements while designing interfaces. Enable layout grids with the shortcut 

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

Layout grids

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.

Interaction Highlights

Handoff in Framer just got better. You can now view and copy the properties of any 

 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 

 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. 

 for local custom actions will open the file where the definition of the handler is located.

 will highlight the instance on the canvas when hovered. Finally, strings will be displayed in quotes and if 

 is set to true, the value will be wrapped in backticks.

Handoff for Code Components

 can now upload their own fonts directly to any project. To use 

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

Custom fonts

 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. 

Updates

Framer for Developers

July 8, 2021

New Default Components

June 28, 2021

Variant Editing

May 12, 2021

Team Library

May 11, 2021

Updating and Design System folder

May 5, 2021