By Sarah Wong & Rae Verrengia

Over the past few months, Figma has introduced several new product features that our creative team has been excited to review and has already started to experiment with in our projects.

In this article, we’ll dive into our five of our favorite new feature updates, and explore their benefits and how they can help to streamline design processes and further assist in collaboration efforts across teams.

Feature 1: Variables

Figma users have been asking for tokens for years—so we were incredibly excited for the announcement of Figma's new Variables feature, which introduces reusable values that can be applied to various design properties and prototyping actions.

These values encompass elements like color, number, text, and boolean attributes—and additionally include scoping to reduce user error within a design system. This innovative new feature not only saves time, but also streamlines the creation of intricate design flows with greater ease and efficiency. Designers can now establish token-based design systems, ensuring consistency and coherence across even larger-scale projects.

Feature 2: New Prototyping Capabilities

Figma's prototyping capabilities recently received a significant boost with a range of enhancements. Designers can now construct high-fidelity prototypes using both fewer frames and actions. The addition of conditional logic, mathematical expressions, and inline previews empowers designers to craft realistic and dynamic user flows seamlessly. Prototyping with expressions will allow for additional capabilities, like being able to build objects that scale in size, such as volume or progress bars.

Feature 3: Dev Mode

Figma also introduced Dev Mode—a collaborative space built with developers in mind, and made to foster smoother cooperation between designers and developers during the handoff phase. Dev Mode provides an avenue for developers to navigate design files more intuitively and translate designs into code more swiftly. This collaborative environment bridges the gap between design and development, enabling a more seamless and efficient workflow. 

Also through the development panel, Figma now also supports the conversion of px to rem units!

Feature 4: Auto Layout Updates

These updates may seem small, but they have a big impact for designers who spend a lot of time creating product cards! The new wrap feature allows us to arrange objects in multiple rows in a frame, with any overflow automatically wrapping to the next line. The new min and max dimensions feature also helps us create responsive designs and set accurate specs for developers, especially for components like buttons, product cards, and content cards.

Feature 5: Prototype Inline Preview

Another nifty little update; now we can preview our animations without having to pull up the (often slow-loading) prototype view. This will be especially handy while finessing interactive components.

Bonus Feature: Variable Type Support

This feature was actually released quite a while ago now, but its usefulness was recently highlighted again in the recent Config talk Fonts are Software Now. For those who didn’t know, variable typefaces are a relatively new way of packaging fonts (invented in 2016). Because multiple variations (such as weight) can exist on a scale within a single file, variable fonts are much more performant and flexible than traditional fonts. Variable axes include weight, slant, width, grade, and gravity—giving designers more control over type than ever before. This also opens up opportunities to be more playful and expressive by animating variable axes directly in Figma.


We’re incredibly excited to implement these new features into our workflow! These are just a few of many recent Figma feature updates highlighted here, but they are ones we know will make an immediate impact.