Creating Figma plugins with Flutter
summary
Built a converter called Flva that pairs a Figma plugin and a Flutter desktop app to produce single-file UI HTML plugins, handling font embedding (fonts → Dart buffers), manifest network permissions, and index.html patches automatically. Uses Flutter Web for UI, TypeScript for the plugin backend, and a builder that packages web assets into one file. Produces live previews and generated Flutter code (custom painters, rotated radial gradients, multiple shadows); high fidelity for many components but codegen is still incomplete.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:06Why Figma matters
- 3:34Introducing Flva
- 4:38How Figma plugins work
- 7:11Flutter for plugin UI
- 8:16Flutter web app for Figma
- 10:31Fixing font and network issues
- 12:56Challenges of manual setup
- 13:41Introducing plugin builder
- 14:44Connecting plugins to Figma
- 17:34Figma-Flutter interaction methods
- 19:23Introducing plugin helper
- 20:05Live demo of Flva
- 22:48Generating Flutter code
- 25:15Q&A
related talks
29mBuilding custom Figma plugins to unlock new capabilities
33mFigma deep dive: Agent-built plugins
01h 02mFigma meets .NET developers
23mUsing Figma beyond and above in design teams
17mThe rise of the design engineer
22mFigma Hacks and Workflow Enhancements with Plugins
37mExtend what's possible with Figma Plugins
18mFlutter Design