How to convert Figma components to Flutter widgets
summary
Shows how Figma variables plus development mode map directly to Flutter code and Widgetbook, using the Figma for VS Code plugin, code generation and an @UseCase-based Widgetbook catalog. Demonstrates a real app bar and a two‑page app with light/dark, German/English and phone/tablet variants, uses Widgetbook knobs for runtime inputs, and publishes to Widgetbook Cloud for side‑by‑side Figma vs implementation review. Result is near pixel-perfect output with only small font/one‑to‑two‑pixel card differences.
AI-written summary · about
chapters (14)
- 0:00Introduction and setup
- 1:07Project requirements and challenges
- 3:55Figma variables and development mode
- 9:11How variables change workflow
- 16:55Design system completion
- 17:17Figma design handoff process
- 19:26Setting up Widgetbook
- 22:12Coding the design system
- 24:57Implementing the first component
- 29:08Testing and refining the component
- 33:40Building the full app with Widgetbook
- 35:25Reviewing implementation accuracy
- 36:06Widgetbook Cloud for collaboration
- 38:15Q&A and team introduction
related talks
26mCreating Figma plugins with Flutter
28mBuilding Design Tools with Flutter
30mHow to build a desktop widget kit for Flutter apps
36mAchieving seamless experience with Flutter and Material Components
17mFlutter Widgets Probably Haven’t Heard Of
34mHelping more than 2000 Flutter teams build their own design system
23mUsing Figma beyond and above in design teams
32m"Flutter: How we're building a UI framework for tomorrow at Google"