5 New Framer X Features
Wondering what you’ve missed? Here’s a quick product roundup to catch you up to speed on the latest features.
Over the last three months, we’ve been diligently adding features to ensure Framer X deserves that spot as your daily use design tool. Just today, as part of our X41 release, we made it 4x faster to drag, zoom and pan around the canvas, even when working on large prototypes. But that’s not all—from web fonts and rulers to shared colors, there have been a ton of quiet feature launches that make Framer X a joy to work in. To bring you up to speed, here’s a round-up of our most recent product updates:
Better support for all types of web fonts
You can now use any fonts available at fonts.google.com in your Framer X prototypes. Just make sure you’re connected to the Internet, open the font picker and choose
- Pro Tip: If you’d like to see the specimen of that specific font and its pairings, click on the
Gicon next to its name.
- Your local fonts should automatically appear in the properties panel, but will only be displayed when previewing prototypes on your own computer.
- To ensure the custom font in your prototype is always displayed accurately when demoing or user testing, follow the instructions outlined in the Working with Fonts section of our documentation.
From mockup to prototype, all in one canvas
Taking your design from wireframe to interactive prototype in Framer X? You’ll love the new Replace With feature which allows you to easily swap out layers with components. Framer automatically matches the new layer to the old one’s size and position. This works whether you’re replacing a design component or frame with a code component from the Framer X store, and even when swapping out for a production component from your design system.
There are two ways to make use of this functionality:
- Right-click a layer, then select Replace With and choose the component you want. Note: You must already have the component installed for it to appear as an option on this list.
- Hold down Command when dragging a component onto an existing layer (or component). The replacement will match the size and position of the previous layer, effectively transforming it into an interactive component.
Pixel-perfect designs with rulers and guides
This most requested feature makes it easy to position elements on the canvas, ensuring your frames and graphics are always perfectly aligned.
To enable rulers, head to View > Show Rulers or use the shortcut Control +
Canvas guides are visible only when rulers are enabled. Here’s how they work:
- Click and drag from one of the rulers and once it’s close to a frame, it will snap to its edge or center.
- For a shortcut, click anywhere inside a ruler.
- Guides can also be repositioned for higher precision using the arrow keys.
Bring your best ideas to life
Share brand colors across teams
Many of the teams who use Framer X have been building design systems in their Team Store. At the heart of many design systems lies a style guide, including a set of standardized brand colors. Our shared colors release makes it easy to add new colors to any project, publish them to your Team Store, and keep them updated. No more manually changing shared colors, now everything updates automatically on your canvas and across all packages installed by your teammates.
To create a new shared color, click the
+ icon and give your new color a name. You can then use it throughout your projects as a fill, gradient, shadow, stroke, and even in your code components by importing them into Playground.
Pro tip: we recommend naming a color by its function (rather than its appearance), as in:
Paragraph. Following a semantic naming convention makes it easier to maintain a consistent color scheme when visual changes arise.
Get creative with precise color management
Building on the shared colors release, we introduced radial gradients. This robust color management tool was designed to help you stay creative while keeping your style guide in sync. Our refreshed color picker has beautiful icons for easy toggling between four different fill types: Solid Color, Linear Gradient, Radial Gradient and Image Fill.
To apply, select a frame or graphic element and click on the third icon in the top right of the color picker. Then adjust the gradient visually by dragging the following circular color stops on the canvas:
- Middle adjusts the gradient’s placement
- Right to change the radius
- Top alters the gradient’s proportions