Figma: More Than a Design Tool

One of the more frequent challenges in the designer/developer relationship is relating to one another. The gulf between the disciplines is so commonplace that we have standardized the idea of the hand-off, the inflection point where design ends and development begins. With the new Figma features unveiled, designers and developers can now work more closely together—and with clearer insight—within the same piece of software. This introduces new ways of working, allows for the use of a shared language, and invites deeper collaboration throughout the entire design and development process.

Dev Mode

One major feature introduced was Dev Mode: a new viewing paradigm in Figma with an integrated experience focused specifically on development needs. At the surface, this mode helps developers more easily navigate and understand design files with features like a “ready for dev” tag that includes notes for execution and read-only protections as default. These features help in the designer/developer hand-off, but as we continue to explore more, we see that Figma has introduced additional features and concepts that go a step further in blending the thinking modes for design and development.

Component View

Component View is a new screen in Figma that shows an encapsulated view of all the props and variants for a component in an isolated setting, much like the developer tool Storybook. Using this, designers and developers can understand exactly what the requirements are for a given component and what different options need to be supported. For example, in a single screen, a button component view could show variants, like secondary and disabled; props, like icon and sizes; and states, like hover and focus—all things with direct analogues to how they would be built in code.

Prototype Expressions

Figma also announced major additions to prototyping, including the addition of expressions. These are little pieces of programming that allow Figma prototypes to function more intelligently using variables and logic. While this alone is super-cool and empowering for designers, it also creates a pathway to learn programming concepts and terms in a domain where designers already feel comfortable. Concepts like if/else logic, Booleans, strings, and logical operators are all part of the new prototyping updates, and all come straight from programming languages.

Variables

Config 2023 also debuted Variables, Figma’s revamped version of design tokens. This is a major step forward for Figma, allowing designers to utilize a core concept of programming in their design projects. Variables can encourage system thinking, giving a clear picture of what can be widely defined and reused versus what is a one-off, thus strengthening design consistency and making deviations much more obvious to all parties. Using Variables also encourages common naming conventions that are shared between design and dev, leading to a higher understanding of terms and fewer items getting lost in translation.

Config 2023 portrayed a clear intent from Figma to give non-designers a place at the table. Gone are the days of “design files” as we make way for multidisciplinary interfaces that service the multiple different areas of the creative process. Designers and developers, in particular, have an opportunity to rethink how we view our workspaces. Leveraging the capabilities that Figma has introduced will lead to better, more consistent outcomes and, perhaps more importantly, enhance the working relationship between dev and design, providing new pathways to understanding how the other half thinks.

Photo Credit: Rodion Kutsaiev | Unsplash