• by Sam Osheroff , Op-Ed Contributor, June 29, 2023

Figma, the collaborative design tool acquired by Adobe last year for $20 billion, just wrapped it’s annual design conference, ConFig, which attracted 10,000 of the world’s leading designers and engineers to San Francisco.

The event featured product launches, talks, and training from the brightest minds and makers (Brian Chesky, Bret Taylor, and Reid Hoffman to name a few) in product design and development, and signaled huge opportunities for brands to elevate their digital processes and experiences. 

Our team on site left with a clear takeaway — Figma is proving to be much more than a design tool, evolving into a platform built for the entire product development team. Below, we dive into how companies across the spectrum can take advantage of these new tools and capabilities to drive maximum business and brand impact.

Previewing the Future of Design with AI

At ConFig, Figma took a clear stance on AI and design: they don’t intend for AI to replace designers. Instead, Figma wants to make AI a powerful tool in the designer’s arsenal. It has  acquired the AI design tool team at Diagram to make that goal a reality. With plans to embed capable AI agents directly in the design canvas, Figma showed their intent to position AI as a creative partner, delivering major time savings and making design iteration more accessible to everyone.

Why it matters: Though Figma doesn’t have full AI design capabilities yet, the AI-powered vision they laid out looks more collaborative, accessible, and efficient than ever before.

Let the Magic of Variables (Beta) Do the Work For You

Figma’s launch of Variables is every designer’s dream finally come true: a more holistic solution to streamline the process of creating consistent designs. Variables help Figma users ensure they have one source of truth for the core values behind all design elements, including:

• Colors (light & dark modes, brand themes)
• Numbers (spacing, padding, margins)
• Strings (this comes in handy in prototyping and localization for different languages)
• Booleans (showing/hiding elements)

For more on variables, check out Figma's deep dive showcase.

Why it matters: Variables unlock exponential time savings for designers. By plugging Variables into design systems, teams can efficiently update UI patterns and maintain consistency across platforms and brands.

We were impressed by this example from Ford, which used Variables and reduced the number of design system files they maintain in Figma from 34 files down to just 8 files, while still supporting multiple channels and brands. Watch the Ford team's full talk here.

Show, Don’t Tell, with Advanced Prototyping

The newly launched Advanced Prototyping capability supercharges prototypes with features far beyond simple screen transitions. New set variables and conditional “if/then” interactions let prototypes switch between element states just like in real-life interfaces, all while reducing the number of wireframe screens required.

The specific updates include:

• Advanced prototyping features with variables, conditions and expressions
• Usability updates like in-context editing and inline preview, to edit designs and preview prototypes in the same view

Why it matters: More impact in less time. Designers can create production-ready interfaces with stunning speed. 

Making Engineers Feel at Home in Figma Dev Mode (Beta)

Finally, a home for developers in Figma. Dev Mode is a workspace in Figma that brings the structure and functionality that developers need to do their work in Figma's infinite canvas. With Dev Mode, developers can:

• Understand and translate designs to code faster
• Connect to their tools and codebase with plugins including Jira, GitHub, and Storybook
• Track what needs to go to production
• Reference Figma files directly in their code environment with the Figma Plugin for VSCode

Why it matters: Dev Mode paves the way for smoother cross-functional communication for everything from fully engineered design systems to digital experiences.

Auto Layout Saves Time and Enhances Quality

Auto Layout is a huge benefit to quickly accomplish responsive design (how experiences flex across devices). Designers can save time spent on adjusting screen width manually to focus more on creating flexible components and layouts, and Variables take the Auto Layout to a whole new level by having one source of truth.

Why it matters: Increased speed and consistency in delivering multi-platform interfaces will benefit cross-disciplinary teams, whether they’re intricately building a digital product from scratch or developing the various components of a marketing campaign.

In a world saturated by substance-less buzz about ‘innovation’ and ‘digital transformation’, ConFig actually delivered. Figma has rapidly transformed how teams not only create digital content and experiences, but continues to facilitate speed at scale for a predominantly remote, digital world.
 

Maher Sinjary, Lead Designer and Weston Hanners, Senior Engineering Manager at Code and Theory also contributed to this piece.