Building a Design System in Figma With Code
If you want to build design systems faster with AI while keeping Figma as your source of truth, this workflow shows you how to create a component library with code.
Get our skills for free (PRD skill, Extract DS, and more) → https://designproject.io/skills-repo/...
Join TDP Community as a Founding Member NOW! → https://designproject.io/community/?u...
Design to Code Workshop for companies. Apply using this link → https://relay.designproject.io/figma-...
WATCH MORE LIKE THIS:
▶️ Build Design Systems Faster With Claude Code Skills → • How to Build an AI-managed Design System W...
▶️ Design.md: How to make your design system work with AI → • Design.md: How to make your design system ...
▶️ Don’t Build a Design System from Scratch → https://www.youtube.com/watch?v=
A lot of product teams want to use AI in their design system workflow, but they don’t want to skip Figma. They still need a strong source of truth before bringing anything into engineering.
In this video, I show you how I’m building a component library directly in Figma with code. I use AI to read the design system foundations, understand the structure, create new components, document the usage rules, and even turn the workflow into a repeatable skill.
WHAT YOU'LL LEARN:
• How to build a design system in Figma with AI and code
• How to structure a Figma component library as a source of truth
• How to use foundations, tokens, semantics, and brand guidelines to guide AI
• How to create reusable components with variants, states, and documentation
• How to add do’s and don’ts so AI understands how components should be used
• How to create a repeatable skill for building more design system components
• How to build multiple components faster while keeping a designer in the loop
This is how I’m thinking about the next phase of design systems: not skipping Figma, but making Figma faster, more structured, and easier for AI and engineering to understand.
CONNECT WITH ME:
🌐 https://designproject.io/
💼 LinkedIn: /diannealter
———
TIMESTAMPS:
0:00 – Building a design system with AI while keeping Figma as the source of truth
1:36 – Reviewing the Figma README and design system foundations
5:10 – Prompting AI to build a new component
7:21 – Planning the component structure, variants, and states
12:36 – Creating the component library directly in Figma
15:31 – Reviewing and improving the component documentation
17:25 – Creating a repeatable skill for future components
19:11 – Building multiple components at once with worktrees
———
We at The Design Project help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams, including companies acquired by Slack, Nvidia, and MrBeast, to cut product cycles in half using battle-tested AI workflows and design systems.