< back to all blog posts

Figma’s Config latest releases: does it impact how you use zeroheight?

Config logo on blue background

You’ve probably heard the buzz about Figma’s latest updates announced at Config 2023 last month. They introduced a range of features aimed at enhancing the design workflow. Of particular interest is the introduction of variables, commonly known as design tokens, which offer new possibilities for designers to manage and apply consistent styles in Figma. So, how do these changes affect how you use zeroheight? Let’s explore Figma’s latest updates and see what it could mean for design system documentation.

Variables

Figma introduced Design Tokens, variables, addressing the community’s long-standing request for more flexibility in design consistency. Designers can define variables for colors, typography, spacing, and more that can be reused across designs for theming and modes. 

But does it has some impact on zeroheight? As a documentation platform, zeroheight traditionally played a crucial role in managing and documenting design tokens and other aspects of the design system. While Figma becomes the primary tool for defining and managing variables, zeroheight continues to play an essential role in providing comprehensive documentation for the broader aspects of the design system. More than ever, the various modes and themes you use in your design need their documentation to ensure it’s correctly applied. 

Variables modal with labels

Implementing changes related to variables in your Figma files may require some time and effort, as variables cannot directly reuse existing styles or tokens defined in plugins like Tokens Studio. If you aim to utilize tokens extensively, it’s likely that you’ll need to define and structure them outside of any specific tool. However, tools like Figma are increasingly accommodating tokens within their products, providing teams to easily transfer their structures into their tools.

Given that implementing variables introduces a new approach and logic for your team, it is vital to consider proper documentation. Documenting variables thoroughly will aid in understanding their purpose, usage, and integration within your design system. If you haven’t already, you can already use our design tokens manager as a way to achieve this. By documenting them effectively, you ensure clarity and consistency for your team’s workflow.

Improved Prototyping

By leveraging variables in Figma, design systems become more flexible and prototypes come to life effortlessly, so teams can iterate rapidly. You can bring these prototyping enhancements to your documentation and embed them into zeroheight directly. This way, you’ll show more engaging and realistic components and patterns behaviors in an easier-to-build way. 

Advanced prototype of a checkout cart using expressions

Dev mode

Figma’s Developer Mode seamlessly connects design and development. It offers a dedicated workspace for developers within Figma, streamlining the translation of designs into code. Integration with tools like Jira, GitHub, and Storybook enables efficient collaboration and tracking of production requirements. Developers can track what needs to go into production and seamlessly inspect files alongside their code using Figma in Visual Studio Code. 

So, what’s left for zeroheight in this new process? While you could, indeed, bring a few documentation notes and external links in Figma, a dedicated platform remains ideal for a whole design system so you can bring in-depth component details, patterns, contribution processes, etc. Dev Mode is an excellent way to improve the developer’s experience on handoff and collaboration for product and feature flows, which is a big step for your project’s day-to-day process. But when it comes to your design system, all of these features won’t be enough to replace good documentation.

Screenshot of Figma's DevModen enabled on a mobile app design

In this effort to bring designers and developers together, remember that a design system’s benefit goes beyond those roles. You should also consider the brand & communication teams, product owners, marketing teams, etc. They should all have access to the design system and its documentation to ensure your design system is adopted throughout your whole organization. If you want to learn more about the different people and roles around your design system, we have an article about it

Conclusion

Config 2023 brings exciting advancements to streamline workflows and enhance collaboration for designers and developers. While it’s important to test new features, consider their long-term suitability for your needs. Variables, for example, may currently have limitations with nesting and typography, even if it’s probably going to evolve. Nonetheless, tools are designed to boost our efficiency, and ultimately, it’s our creative minds that shape the foundation and direction of our design system. Figma is doing a much better job and connecting people and tools, but it’s still a great option for documenting your design system. If you’d like to know more, this article about documenting your design system in Figma explains why.

The recent updates reflect an exciting future for design systems, with increased alignment and efforts across various tools. Just as Figma is constantly evolving, at zeroheight, we’re also diligently working on upcoming updates and features to help you document your design system more effectively and efficiently.Stay tuned for what’s next by following us on Twitter and joining our zheroes Slack community to be the first to receive updates and explore how we can further enhance your design system documentation experience!