Building custom Figma plugins to unlock new capabilities
summary
Microsoft engineers describe concrete plugins, how they built and deployed them, and what actually works: plugins are standard web apps using React and TypeScript and the Figma API; authentication uses a shared server/browser flow; telemetry uses Application Insights (Azure Monitor); Content Reel has 339K+ downloads; Icon Scaling handles ~2800+ Fluent icons and exports grouped PDF/SVG zips; Focus Orderer annotates and exports focus order and roles for accessibility.
AI-written summary · about
chapters (15)
- 0:00Start
- 1:28Introduction to Plugins
- 4:34Downloading a New Plugin
- 6:48Figma Api vs Code
- 10:13Publishing Plugins
- 12:31Note Node Inspector Plugin
- 13:29Designer Plugins Content Trial
- 14:23Icon Scaling
- 17:28Export the Icons
- 18:17Accessibility
- 24:49Components and Styles
- 25:51Toolkit for Figma Plugins
- 26:27Microsoft Fluent Web Toolkit
- 26:50Telemetry
- 28:48Resources
related talks
33mFigma deep dive: Agent-built plugins
22mFigma Hacks and Workflow Enhancements with Plugins
19mBuilding a platform at Figma
25mUsing Figma to go beyond Figma
37mExtend what's possible with Figma Plugins
23mTaming multiple design systems with a single plugin
26mCreating Figma plugins with Flutter
42mCode, Creativity, and Community at Figma