Design Language on Autopilot: How Figma and Code Can Automate Your Workflow
summary
Describes concrete tooling that keeps Figma and code in lockstep: a Figma plugin that creates a GitHub PR when a Figma variable changes so designers’ token edits reach the repo, an automated figma-to-code token name mapping generator, a frame-to-implementation code generation from frames plugin, a coverage linter with analytics that flags overridden components and sends KPI data, plus a Chrome extension for runtime checks. All plugins are open source and deployed at Razorpay; claims include automated PRs and live analytics to enforce adoption.
AI-written summary · about
chapters (10)
- 0:00Introduction to design systems
- 2:34Design system challenges overview
- 3:39Syncing tokens between Figma and code
- 5:03Mapping Figma variables to code
- 7:11Aligning component APIs
- 8:55Consumer challenges with design systems
- 9:58Generating code from Figma
- 11:01Enforcing design system rules
- 13:12Accountability and KPIs
- 14:54Closing and open-source tools
related talks
42mCode, Creativity, and Community at Figma
17mThe rise of the design engineer
23mHow design tokens can make us better collaborators
45mBridge the Gap between Design and Development
23mUsing Figma beyond and above in design teams
37mExtend what's possible with Figma Plugins
10mMaking the right thing the easy thing
25mUsing Figma to go beyond Figma