Design DNA
13 - 14 Nov 2025
Online
Design DNA
About the speaker
About the speaker
About the speaker
Mr. Biscuit is the creator of the Ant Design Open Source figma library, adopted by over 400,000 users worldwide surpassing even Microsoft and Google’s official resources. He built Instance Utils, a breakthrough plugin that enabled instance structural editing in ways never before possible in Figma, and Variable Visualizer, a cutting-edge system for visualizing and editing variables. He also drove the most popular Figma Community events that pushed the platform’s limits delivering layout wrapping years before Figma’s official release, aspect lock years before its native version, and inline tags still unachievable in Figma today. A featured speaker at Config 2021, Figma’s annual global conference, he has previously worked at Alibaba and Jio. Known for bridging design and development, he relentlessly pushes the boundaries of design systems. He is, simply, Mr. Biscuit the one and only.
Mr. Biscuit is the creator of the Ant Design Open Source figma library, adopted by over 400,000 users worldwide surpassing even Microsoft and Google’s official resources. He built Instance Utils, a breakthrough plugin that enabled instance structural editing in ways never before possible in Figma, and Variable Visualizer, a cutting-edge system for visualizing and editing variables. He also drove the most popular Figma Community events that pushed the platform’s limits delivering layout wrapping years before Figma’s official release, aspect lock years before its native version, and inline tags still unachievable in Figma today. A featured speaker at Config 2021, Figma’s annual global conference, he has previously worked at Alibaba and Jio. Known for bridging design and development, he relentlessly pushes the boundaries of design systems. He is, simply, Mr. Biscuit the one and only.
Mr. Biscuit is the creator of the Ant Design Open Source figma library, adopted by over 400,000 users worldwide surpassing even Microsoft and Google’s official resources. He built Instance Utils, a breakthrough plugin that enabled instance structural editing in ways never before possible in Figma, and Variable Visualizer, a cutting-edge system for visualizing and editing variables. He also drove the most popular Figma Community events that pushed the platform’s limits delivering layout wrapping years before Figma’s official release, aspect lock years before its native version, and inline tags still unachievable in Figma today. A featured speaker at Config 2021, Figma’s annual global conference, he has previously worked at Alibaba and Jio. Known for bridging design and development, he relentlessly pushes the boundaries of design systems. He is, simply, Mr. Biscuit the one and only.
Lecture
Lecture
Lecture
This talk shows how to run your design system on Figma Variables as a living graph—not just a table of values. We’ll explore collections, modes, and aliases as first-class nodes you can trace, validate, and debug visually before anything ships. You’ll see how variables become a new contract with engineering and why this model is deterministic by design and ready for AI. We’ll demo Variable Visualiser (VV) and its AI assistant: ask for what you need, then watch it design, bind, and refactor variables—discover relationships, create collections & modes, bind attributes, rename at scale, or generate OKLCH color scales that match a reference. Every action is explicit, reviewable, and reversible. Finally, we’ll push the same graph straight to code: export VV as JSON, keep the bindings, and have build outputs match the Figma file 1:1—no translation layer, no divergence, no surprises.
What you’ll learn
How to model variables as a graph: collections, modes, aliases, and dependencies.
Visual debugging: trace impacts, catch missing bindings, validate ranges, and spot collisions.
Using VV’s AI assistant to create/rename/bind at scale and auto-generate color scales from a target.
Design-to-dev in one move: export JSON from VV and consume it in build pipelines.
No drift strategies for multi-brand, multi-mode systems—deterministic by contract.
Who this is for
Design system architects, advanced Figma users, and front-end engineers who want a scalable, AI-friendly pipeline with zero hand-off drama. Session outline
Variables as a Living Graph (collections, modes, aliases, semantics)
Visual Validation & Debugging (dependency tracing, guardrails)
VV AI Assistant (prompt → structured variable ops, reviewable diffs)
Design→Dev Export (VV JSON, binding parity in code)
No Drift Playbook (governance, reviews, CI checks)
Q&A
Live demos
Build a brandable Button/Card across light/dark with variable bindings only.
AI-generated color scale to match a reference, then propagate via aliases.
Export VV JSON and render the same UI in code—values match by definition.
Key takeaways
Treat variables as your single source of truth and review them like code.
Determinism beats documentation: if it’s bound, it can’t drift.
AI is finally useful in DS when it operates on a well-structured variable graph.
This talk shows how to run your design system on Figma Variables as a living graph—not just a table of values. We’ll explore collections, modes, and aliases as first-class nodes you can trace, validate, and debug visually before anything ships. You’ll see how variables become a new contract with engineering and why this model is deterministic by design and ready for AI. We’ll demo Variable Visualiser (VV) and its AI assistant: ask for what you need, then watch it design, bind, and refactor variables—discover relationships, create collections & modes, bind attributes, rename at scale, or generate OKLCH color scales that match a reference. Every action is explicit, reviewable, and reversible. Finally, we’ll push the same graph straight to code: export VV as JSON, keep the bindings, and have build outputs match the Figma file 1:1—no translation layer, no divergence, no surprises.
What you’ll learn
How to model variables as a graph: collections, modes, aliases, and dependencies.
Visual debugging: trace impacts, catch missing bindings, validate ranges, and spot collisions.
Using VV’s AI assistant to create/rename/bind at scale and auto-generate color scales from a target.
Design-to-dev in one move: export JSON from VV and consume it in build pipelines.
No drift strategies for multi-brand, multi-mode systems—deterministic by contract.
Who this is for
Design system architects, advanced Figma users, and front-end engineers who want a scalable, AI-friendly pipeline with zero hand-off drama. Session outline
Variables as a Living Graph (collections, modes, aliases, semantics)
Visual Validation & Debugging (dependency tracing, guardrails)
VV AI Assistant (prompt → structured variable ops, reviewable diffs)
Design→Dev Export (VV JSON, binding parity in code)
No Drift Playbook (governance, reviews, CI checks)
Q&A
Live demos
Build a brandable Button/Card across light/dark with variable bindings only.
AI-generated color scale to match a reference, then propagate via aliases.
Export VV JSON and render the same UI in code—values match by definition.
Key takeaways
Treat variables as your single source of truth and review them like code.
Determinism beats documentation: if it’s bound, it can’t drift.
AI is finally useful in DS when it operates on a well-structured variable graph.
This talk shows how to run your design system on Figma Variables as a living graph—not just a table of values. We’ll explore collections, modes, and aliases as first-class nodes you can trace, validate, and debug visually before anything ships. You’ll see how variables become a new contract with engineering and why this model is deterministic by design and ready for AI. We’ll demo Variable Visualiser (VV) and its AI assistant: ask for what you need, then watch it design, bind, and refactor variables—discover relationships, create collections & modes, bind attributes, rename at scale, or generate OKLCH color scales that match a reference. Every action is explicit, reviewable, and reversible. Finally, we’ll push the same graph straight to code: export VV as JSON, keep the bindings, and have build outputs match the Figma file 1:1—no translation layer, no divergence, no surprises.
What you’ll learn
How to model variables as a graph: collections, modes, aliases, and dependencies.
Visual debugging: trace impacts, catch missing bindings, validate ranges, and spot collisions.
Using VV’s AI assistant to create/rename/bind at scale and auto-generate color scales from a target.
Design-to-dev in one move: export JSON from VV and consume it in build pipelines.
No drift strategies for multi-brand, multi-mode systems—deterministic by contract.
Who this is for
Design system architects, advanced Figma users, and front-end engineers who want a scalable, AI-friendly pipeline with zero hand-off drama. Session outline
Variables as a Living Graph (collections, modes, aliases, semantics)
Visual Validation & Debugging (dependency tracing, guardrails)
VV AI Assistant (prompt → structured variable ops, reviewable diffs)
Design→Dev Export (VV JSON, binding parity in code)
No Drift Playbook (governance, reviews, CI checks)
Q&A
Live demos
Build a brandable Button/Card across light/dark with variable bindings only.
AI-generated color scale to match a reference, then propagate via aliases.
Export VV JSON and render the same UI in code—values match by definition.
Key takeaways
Treat variables as your single source of truth and review them like code.
Determinism beats documentation: if it’s bound, it can’t drift.
AI is finally useful in DS when it operates on a well-structured variable graph.
Contact us if you have any questions.
gabriela@designdnaconf.com
Contact us if you have any questions.
gabriela@designdnaconf.com