Figma 3.0 (!)

Desktop-based design can come with a hefty price. Teams spend their days managing a Frankenstein workflow: Which prototype has stakeholder comments? Is the style guide up to date? Are we all working from the right version of the design?

We think there’s a better way on the web. Today, I’m excited to introduce Figma 3.0, with three features that — taken together — will allow companies of all sizes to consolidate their tool stack. This will save you time because you won’t need to constantly switch across apps. And it will save you money because you can remove redundant tools from your workflow.

What’s new:

Prototyping — 

We’ve added device frames, fixed objects and advanced scrolling to bring your designs to life.

Styles — 

With Styles and our new Team Library functionality, you can now build and maintain every part of your company wide design system in Figma.

Organization tier — 

We’re previewing our new “Organization” tier, which helps large organizations scale their design management.

We hope this new functionality, coupled with our existing web-powered features like Developer Handoff, Commenting and Shared Components, will allow you to switch your team and workflow 100% (or nearly 100% 😉) to Figma.

Read on for the details.

Prototyping

With 3.0, prototyping in Figma has evolved. We listened carefully to our users over the past year and added things you need to get great feedback on your work: Device frames, fixed objects, scrolling and transitions

.

Yes, this means your team can finally kiss your pricey InVision subscription — and its endless syncing — goodbye. Prototyping in Figma is free, and it’s tied to design so you never have to export screens again (web magic in action ✨).

The rundown:

Device frames. Add a range of containers — from iPhone to Android to Apple Watch — on your designs, and watch them shine. This will help others on your team gain context about the scale of the design.

2. Fixed objects. Our community has asked for fixed headers and footers in prototyping since the day we launched. Now you can finally attach objects like status bars or buttons to the top, bottom or even sides of a frame with constraints.

3. Scrollable areas. This is a whole new level of interaction for a screen design tool. You can enable scrolling through individual shapes within a parent frame, which can itself be scrollable. Want to introduce a carousel of images (ex: Netflix’s horizontal selection style)? Go for it! Need vertical lists? Add it. We went a little wild and even included ‘scroll in any direction.’

4. Transitions. Add dissolve, slide and push effects to link frames. These subtle transitions mimic the motion of native mobile apps so your prototypes look professional.

Read more on how to enable this new functionality in our help article here or watch our tutorial video here. As mentioned, since Figma’s on the web your prototypes are always up to date — no extra housekeeping required.

Key benefits to prototyping in Figma:

• REAL TIME ⏰: Fiddle with a design fill color or font size in your design, and watch your prototype reflect changes in real time.
• LINKED COMMENTS ✍🏽: In other tools, comments are detached from where you need them: The app where you design. In Figma, the two are linked, so you don’t have to switch between tabs when incorporating feedback.
• TED TALK MODE 👩🏽‍🏫: Stroll the conference room like a TED talk pro by opening your prototype in your mobile browser. Use your phone as a remote to click through your presentation.

Prototyping is a big surface area and we know some of you will still need other tools to do your work. To meet the need, we’re investing time and energy into our new API

which lets you get information out of Figma. If you’re dying for a particular integration with your favorite prototyping app, go tell them! (And let them know we’re here to help.)

Figma Styles is now live for everyone!

We did a lot of research for Figma Styles, starting with months of talking to users before we wrote a single line of code. A big thanks to everyone who was part of the private beta

(and apologies to those we couldn’t squeeze in!). Your feedback was invaluable and shaped our final product.

Pro-tip: Kick-start your Styles experience with this Material Design UI kit for Figma

.

Figma Styles work a little differently than what you’re used to. You can apply color styles separately from text and effect styles. This keeps your styles from breaking whenever you need to update a link color or something else that’s minor. Confused? Our tutorial video shows this in action.

Tweak the original style and watch it update everywhere you used it, no sync time necessary (just hit accept on the notification that pops up in other files). Teammates who used your style will also have the option to accept or reject the change for their own design files.

Pro tip: In Figma, you can apply multiple styles to the same text box, simply by highlighting a portion of the text.

The popular UK food delivery service Deliveroo tested our Styles feature early. Because they have such a complex product — with separate apps for people ordering and riders picking up food, plus one for restaurants to manage orders — Figma’s modular approach transformed their design system.

“It’s a complete nightmare to maintain color, typography and styling across local design libraries, so keeping brand consistency across all these things has historically been hard to do,” Senior Design Manager Raphael Guilleminot said. “Figma allows us to update our brand at scale with very little overhead.”

Want more resources? Kick-start your Styles experience with this Material Design UI kit for Figma

, built by OpenText designer Thomas Lowry. He also created a Facebook iOS 11 UI Kit and a Material Design 1.0 UI kit. Read about Styles from our private beta announcement

Figma Styles beta: A new way to apply text and layer attributes

Today, we’re excited to announce a private beta for Figma Styles.

here or our help article here.

Pro tip: You can save a custom layout grid as a style.

Introducing: Organization Tier

Lastly, with Figma’s new Organization Tier we’re introducing features that make it easy to design at scale.

As Figma’s footprint expands in companies like Microsoft and Uber, we’re learning a lot about how large organizations function. Our Organization Tier is complete with the controls they need: Enterprise-grade security features, org wide design systems, unlimited teams and more.

Here’s the overview:

1. Org wide design systems: Companies can publish broader design systems across the entire organization, while still granting individual groups the ability to use their own Team Libraries. When new hires join their specific team in Figma, they’ll be able to access the appropriate materials from day one — no onboarding, software setup, permissions granting or other menial labor necessary.
2. Security: With Figma’s org tier, companies can enforce login restrictions like SAML, Google SSO, or two-factor authentication. They can also add guests to Figma, so people outside their organization — like contractors — can access specific projects without full membership.
3. Admin controls: Admins will be able to manage the above security features from a single centralized view. We’re also giving them improved visibility and control over org data, with audit logs and data export, to ensure a company never loses track of work.

We want to get this right, so we’re partnering with a few select companies to perfect our offering. If this preview intrigues you, contact us on our pricing page.

In short

Designers’ workflows should not have to be maintained with constant syncing, updating, integrating and saving. They should just work.

With Figma 3.0, we hope you can save time and money by replacing your Frankenstein tool stack with simplicity instead. As always, we’re eager to hear your thoughts and feedback. Write in via our in app chat support, check out our help articles on Prototyping and Styles, join the conversation on Spectrum or tweet us @figmadesign. We’re excited to see what you build in Figma!

Let us know what you think.