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?
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 Design involves far more than just the designer these days. Figma prototyping: now with 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 Today, weâre excited to launch the Figma Platform, a way to improve design workflows by connecting Figma to other tools, scripts and even web apps. Introducing: Figmaâs Platform
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 Today, weâre excited to announce a private beta for Figma Styles. Figma Styles beta: A new way to apply text and layer attributes
Pro-tip: Kick-start your Styles experience with this Material Design UI kit for Figma Often when we think of design systems, we think of a tightly controlled collection of components, patterns and guidelines in order to ensure consistency across a product. Material Design + Figma Styles = đ„
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 Often when we think of design systems, we think of a tightly controlled collection of components, patterns and guidelines in order to ensure consistency across a product. Today, weâre excited to announce a private beta for Figma Styles. Material Design + Figma Styles = đ„
Figma Styles beta: A new way to apply text and layer attributes
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:
- 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.
- 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.
- 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.
Dylan Field is the co-founder and CEO of Figma. Dylan studied computer science and mathematics at Brown University where he and his co-founder, Evan Wallace, first started experimenting with design tools built on (and for) the web. With funding from a Thiel fellowship, they began Figma. Prior to Figma, Dylan interned at O'Reilly Media, LinkedIn, and Flipboard.