Planning Design Tokens the right way
What I learned from Philipp Jeroma at Into Design Systems Conference
Philipp Jeroma opened the Into Design Systems Conference with one of the most practical and honest sessions on Design Tokens I have seen:
"Design Tokens Workflow in Figma: A Practical Guide"
It was not only about creating tokens.
It was about how to think before you build.
This article summarizes everything I learned from his talk and turns it into a clear and actionable guide.
🎯 Start with the problem, not with tokens
Philipp used a fictional cyberpunk company called Yoguda Corp, where "Director Miller" demands tokens immediately.
It is a relatable scenario.
The real lesson:
Do not build tokens because someone requested it. Build them because they solve a specific problem.
Start with the why before the how.
Ask yourself:
- What is the real purpose behind introducing tokens
- Which product or workflow problems are we solving
- Who benefits from this change
- What constraints or risks exist
- How will success be measured
Design Tokens built without strategy become noise.
🧩 Tokens are not the same as variables
This is one of the biggest misunderstandings in Design Systems.
Philipp clarified it with a simple distinction:
Design Tokens
Framework agnostic design decisions.
They represent meaning and intent.
Variables
Technical implementations inside tools like Figma or code.
A simple way to remember it:
Tokens are the recipe. Variables are how you cook it in your kitchen.
Use variables for quick tool based setups.
Use tokens when you need structure, semantic clarity, governance and multi platform output.
🛡️ The 5 pillars that prevent Design Token chaos
This was the heart of Philipp's talk.
His Design Token Starter Canvas is built around five essential pillars:
1. Strategic alignment
What problem are tokens actually solving
2. Organizational governance
Who owns tokens
Who contributes
How do decisions happen
3. Infrastructure
Where is your source of truth
How do you sync tokens across Figma, code and documentation
4. Architecture and scaling
How do naming conventions work
How many tiers
How many modes
How do tokens evolve as the system grows
5. Maintenance
How will you document changes
How do you release updates
How do you gather feedback
The canvas is not linear.
It is a thinking tool you revisit as your Design System develops.
"Start small and iterate. Big leaps are expensive."
— Philipp Jeroma
💡 Insights I am stealing from Philipp
Here are the ideas I am adopting immediately:
Focus on interfaces, not abstraction
Plan tokens using real UI examples.
Abstract thinking leads to abstract tokens.
Run naming workshops
Bring designers and developers together.
Most friction happens at handoff.
Use Figma library analytics
Let data guide decisions.
Stop guessing what people use.
Automate documentation
If you manually copy token values, you are wasting time.
Use tools that sync to docs automatically.
Version tokens like code
Semantic versioning gives clarity and control.
Tokens deserve proper releases.
🧰 Tools Philipp shared to get started
Philipp provided two powerful resources during the Into Design Systems Conference:
Design Token Starter Canvas (FigJam)
A collaborative canvas that helps teams map decisions across the five pillars.
Design Token Starter Set (Figma)
A structured file with:
- 250 plus tokens
- semantic layers
- multiple tiers
- real variable collections
- ready to extend and customize
🖼️ Inside the Design Token Starter Canvas
The canvas includes:
- a clear "Get Started" guide
- glossary for token terms
- pre-filled Yoguda Corp examples
- a flexible workspace for strategy, governance, infrastructure, architecture and maintenance
"It is not a checklist. It is a space to think, revise and collaborate."
— Philipp Jeroma
🧪 Hands on session: Figma Variables in action
In the second half, Philipp walked through a full Figma file designed to help teams move from planning into implementation.
Key insights:
- 250 plus predefined tokens
- a clear global → alias → component structure
- variable collections for interaction, purpose, background, text, radius and typography
- real interfaces to test decisions in context
He also showed how to:
- document tokens manually or with automation tools
- adjust tokens by mode
- extend systems with custom modes
- refactor primary colors for brands
- validate decisions using components
"Do not build everything upfront. Build just enough to test. Then iterate."
— Philipp Jeroma
🗂️ More resources and community questions
Philipp shared additional resources inside the official Into Design Systems Conference Miro board, including:
- templates
- planning canvases
- decision frameworks
- follow up answers to attendee questions
Questions he answered:
- How can a solo designer keep token scope manageable
- How should you support themes with Figma Variables and dark mode
- What naming conventions work for semantic layers
- How do you convince stakeholders to invest in Design Systems
- Should you begin with a demo project
🎥 Watch the full session and get all templates
If this session sparked ideas, you can explore:
- the full recording
- planning canvases
- Figma starter kits
- the Miro board
- and more than 20 additional sessions about Design Tokens, Figma Variables, ROI, accessibility and documentation
