Figma's Config announcements bring us closer to seamless design-engineering integration
Figma's latest updates at Config brings designers closer to the development experience. The introduction of variables, the way designers can imitate certain logic with booleans, create themes using modes, and the introduction of Dev Mode are all great new features. Figma also announced the acquisition of Diagram, a suite of AI-powered design tools, and demonstrated their approach for an AI-assistive experience.
The design, engineering, and product community have been longing for some of these updates for quite some time. The industry and the way that we work has started to see a significant change. The role of a designer not only includes delighting the user but also understanding and applying systems thinking. As the designer’s environment starts to blend with that of a developer’s, developers are collaborating much closer with designers and interacting within experiences with which they are more familiar.
We are happy to witness these features come to life and support the combined effort of bringing design and engineering closer together. At Knapsack, we already support what designers and engineers create using Figma, and with these updates teams are empowered to translate design decisions and production-ready code into the heart of Knapsack.
Variables, Modes, Prototyping, Dev Mode, and AI Assistance
Variables
Figma made a deliberate decision to create and develop the concept of variables, rather than solely focusing on design tokens. Their reasoning is rooted in the pursuit of flexibility as variables offer more than just design tokens and themes (modes by Figma). Variables can also be used for implementing logic, imitating basic objects in programming, and providing CMS functionality. We may well see Variables expand to provide more direct support for more convention design token workflows in the future, but for now Figma is focusing on the impact to the designer workflows within their platform.
Modes
In the design system space, modes are closely associated with themes and operate the exact same way. You create a set of variables and can change the variables values for each mode akin to how you create a token set and adjust tokens values based on the theme you are constructing. However, modes have an added advantage as they can accommodate number, string, and boolean values, enabling the creation of collections that closely resemble CMS entries.
Prototyping
If you've ever tried prototyping in Figma, you'll agree that it can feel like navigating a complex maze or, better yet, diving into a bowl of tangled noodles. Those who are familiar with the process will surely understand the analogy. Figma has done an excellent job in transforming prototyping from a hugely laborious task to a streamlined and functional one. This improvement can be largely attributed to the introduction of if/else conditionals, which not only simplify the prototyping process for designers but also make it easier to understand as a developer.
Dev Mode
For quite some time, Figma has adopted a hands-off approach to the developer experience, which is understandable considering that only 30% of Figma users identify as developers. However, the collaborative dynamics between designers and developers are undergoing a significant transformation, both presently and in the foreseeable future. So poignantly, Figma has introduced a significant update that truly resonate. They have taken into consideration the way in which a developer works and created a much more user-friendly and interactive experience.
When you explore a composition and interact with components by clicking on them, you now have the option to open an independent playground. In this playground, you can review and experiment with the pre-configured and available props. They have gone the extra mile by enabling the generation of high-quality code, complete with variables (design tokens) mapped to their respective values. You now have the flexibility to generate code ranging from React.js to pure TypeScript, catering to diverse coding preferences. This capability reinforces Figma's commitment to bridging the gap between design and development, and it's something we genuinely appreciate.
AI assistance
Figma, like Knapsack and many others in the industry, believe that AI will change how we work in ways that are only beginning to be understood. Figma’s acquisition of Diagram and initial AI experiments within the platform are concrete evidence of their commitment to harnessing AI's potential. These initiatives have resulted in compelling proof-of-concepts that transform prompts into practical components, variants, themes, resized designs, and even streamlined workflows through plugins. In essence, this progress - along with tools like GitHub Copilot in the engineering world - brings an AI assisted design and development experience closer to reality.
Navigating the Impacts of Figma's Latest Updates
You might be wondering, “How do the Figma updates affect me as a designer working on design systems?” It’s a valid question and we’re here to provide some answers. The great news is that these updates won’t have a negative impact. The introduction of variables will support your understanding and usage of design tokens.
Wonderfully timed, our friends at Tokens Studio also released an update that integrates and supports Figma’s variables. This means that while you'll make use of Figma's variables functionality, you can still rely on Tokens Studio to adopt, organize, and deliver design tokens, especially when it comes to JSON.
If you're a developer collaborating with a designer on design systems, you may have a similar question: "How do the Figma updates affect me?" Once again, it's a valid question. As mentioned earlier, developers now have dev mode which allows them to see and experience the design decisions (variables or design tokens) in the code view situated in the right hand side panel within Figma. An example might look something like this “padding: var(--spacing-100, 9px) var(--spacing-500, 21px);”. This feature is very useful as it helps you understand which design tokens the designer has used and which ones you can apply in production.
Another feature that significantly impacts developers when collaborating with designers is the easy way you can select individual components, open the previously mentioned playground, and get a really good idea of the component’s intent and usage as a whole.
Where Knapsack fits in: Design to code in seconds
What’s truly inspiring about updates like these is the fact the industry is moving in an excellent direction and moving the conversation closer to the “real” experience that’s delivered to end users. This is where Knapsack’s superpowers shine. We seamlessly integrate with various tools and plugins like Figma, Tokens Studio, Style Dictionary, and your Git repos, consolidating design decisions, token management, components and documentation into one place and delivering production-ready code directly to the end user.
The introduction of variables in Figma effortlessly translates to design tokens in Knapsack, thanks to our powerful and built-in token management system. Whether you want to write a custom Figma integration via their REST API or leverage Tokens Studio for Git syncing and JSON export, Knapsack can help unify your design workflows to the delivery mechanisms that power end user experiences.
Dev Mode in Figma makes the component patterns and playground feel familiar, and assists developers in quickly understanding the basic composition of design elements. In parallel, Knapsack provides shared access to both Figma assets and source components, supporting QA and ongoing iteration on the many sources of truth across the organization. Taking it a step further, Knapsack enables teams to assemble experiences and patterns from the code you’ve created and readily made available.
Config showcased some interesting updates, and here at Knapsack, we are pleased to see the industry progress and play a big part in delivering the solution that brings designers and developers closer together, enabling efficient delivery of delightful user experiences.
Ultimately, we see all of these features as compatible with each other, other popular tools like Tokens Studio for Figma, and the workflows supported by Knapsack. If anything, we now have more options to tailor workflows and tool stacks to personal preferences, budget constraints, and the realities of enterprise environments. We can find solutions that work for any team to connect design decisions to engineering implementation and help us all get the most out of our design systems.
