In the rapidly evolving landscape of design tools and workflows, the realm of design tokens has witnessed an influx of innovation and complexity over the last two months.
At the forefront of this evolution are Tokens Studio for Figma, a prominent Figma plugin, and Figma itself with its native Variables feature. While these tools offer distinct capabilities, it's important to perceive them as opportunities for enhancing your workflow rather than pitting them against each other. Each tool comes with its own strengths, and there's immense potential in utilizing them collaboratively.
The choices you make in your workflow can also reverberate downstream, shaping the bridge between design and engineering teams - and even the feasibility of getting your design token strategy implemented into products.
In this post, we'll explore the features and implications of Figma Variables and Tokens Studio and how they can align with your organization's unique needs.
Figma Variables: Expanding the Horizons
Figma's latest offering, Variables, isn't explicitly labeled as a "design token" solution, and for good reason. The primary objective of Variables is to amplify the range of granular, centrally-manageable variable attributes such as styles, content, and data that can be harnessed within Figma components across projects and teams. This release, while not exhaustive (missing typography variables), and not aimed at seamless integration with development workflows (no compatibility with the W3C token spec), marks a substantial step forward. The real value lies in its potential to bring design workflows closer to engineering processes, granting teams the flexibility to address various stages within the comprehensive end-to-end design process. The concepts of Figma variables map well to engineering concepts such as CSS Variables, even if there are some gaps when it comes to how it’s all connected through design tokens or agnostic code formats (e.g. JSON) and automated through existing tools.
Tokens Studio: Powering Comprehensive Style Libraries
Tokens Studio for Figma, formerly known as Figma Tokens, has long been a driving force in expanding the scope of granular, centrally-managed styles beyond Figma's native capabilities. Think border radii, shadows, spacing, and more – all accessible through a supplementary library with robust syncing capabilities. This functionality empowers teams to construct comprehensive style libraries, capable of cross-team utilization and multi-brand theming – a true design superpower within Figma. Tokens Studio is driving significant innovation in the design tokens space, specifically with regard to contextual user experiences: how might we enable design teams to define the logic that informs how styles are presented in various scenarios in which the end application may be experienced (vs. defining explicit values for everything). Crucially, the plugin also takes the critical step of streamlining how design workflows connect with development tools and practices, allowing for W3C compliant JSON exports and direct syncing with Git repositories. With its rapid adoption of Variables support following Figma's release, Tokens Studio is poised to continue driving and elevating value even for teams leveraging Figma’s newest features.
Navigating the Unknown: Theming Challenges
Both tools introduce a host of functionality to designers for addressing a common area of need for complex digital and brand ecosystems: theming. While designers now have more power than ever to define, implement, and experience token-based styles and theming, some of the concepts have pushed us (as a collective, cross-functional community) into uncharted territory.
Even with the draft W3C token specification gaining traction, the technical bridge between design and code is left largely open-ended when it comes to themes or dynamic token values, and we may be years out from any sort of meaningful consensus approach
We are, collectively, bumping up against the limits of what’s been agreed upon in the industry. So let the creativity and debates ensue!
The good news is that there are more options than there ever have been for tailoring a workflow to your team’s specific needs across design and engineering. At the same time, a new major challenge arises in translating novel design concepts into feasible engineering practices.
This is particularly daunting for tools that teams rely on to bridge gaps or automate workflows, as established standards and specifications (e.g. JSON schema) that have traditionally guided their development (and cross-compatibility) don’t yet exist here.
Crafting Your Workflow
Amidst these developments, the pressing question emerges: How do we define our workflow? It's crucial to remember that there's no universally correct approach. What matters is looking at the workflow holistically, involving all relevant teams in crafting an organizational solution, and considering the implications across the spectrum of decisions.
While there isn't a one-size-fits-all solution, there's a methodology for finding what best suits your team. A few considerations:
- Team-Specific Ease: Assess what aligns easiest with each team's individual and shared workflows.
- Inter-Team Implications: Reflect on how your preferred solution affects other teams within the organization.
- Hybrid Approaches: It's possible that Figma Variables may be optimal for design teams with a custom API integration for engineering teams to extract token data. Alternatively, Variables might offer the best user experience, while Tokens Studio streamlines Git and engineering workflows.
- Balance & Trade-Offs: Is there a balance to strike between innovation and manageable change that delivers not only great individual team experiences, but the smoothest possible end-to-end workflow across teams and functions.
Adapting to Change
In the current landscape, most teams we speak to that have been utilizing Tokens Studio are opting to stick with it, even as they integrate Figma Variables. While many teams initially experiment with Variables, they often gravitate back to Tokens Studio for the Figma to Code workflow features. The robust downstream connectivity offered by Tokens Studio proves invaluable, especially for teams with resource constraints for building custom integrations. Their novel approach to capturing logic in addition to raw token values and references is giving many teams a whole new approach to strategic UX planning and implementation. Nevertheless, venturing into theming and modes/collections is bound to introduce new complexities, so it’s worth taking the time to explore all options.
Embracing the Future with Knapsack
No matter your chosen approach, Knapsack offers dynamic documentation based on your token source(s) of truth – closely linked to both Figma and Git – as well as flexible workflows for managing and implementing your tokens, all designed to get your tokens into products quickly. Our Solutions team is well-equipped to guide you through the decision-making process, helping you construct a workflow that's not only sustainable but also adaptable to your organization's evolving needs. With tools like Knapsack, the integration of design tokens into your workflow becomes a seamless journey into the future of design and engineering collaboration.
