Figma Mockup to Server-driven UI
summary
Built a Figma-based generator that uses the Figma Plugin API to auto-generate SDUI JSON schemas, DTOs and boilerplate code, plus a linter and realtime preview. It uncovers four conflicting “sources of truth” (iOS Figma, Android Figma, Web Figma, SDUI schema), forces designers to follow a new assembly guide, and eliminates manual schema authoring for new components while old ones are migrated. Average component iteration previously spans 28 days; the pipeline shortens review steps but still requires some manual fixes and design review.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 6:30Problem and goals
- 16:09Initial attempts
- 24:18Alternative solution
- 30:22Development optimization
- 34:43Results and benefits
- 41:16Q&A
related talks
25mUsing Figma to go beyond Figma
23mCollaborative and real-time design systems in Figma
17mThe rise of the design engineer
26mFigma to Code: AI Generated UI Code with Your Design System
18mMaking the Things That Help Others Do Their Thing
14mRethinking Designer-Developer Collaboration
24mInside Figma: failing together
16mDesign Language on Autopilot: How Figma and Code Can Automate Your Workflow