Elevate Your React Workflow with Figma
summary
Shows concrete Figma workflows and tools that produce code-ready output: how dev mode timeline flags changes and marks components ready for dev, the playground that mimics Storybook for toggling variants, extracting SVGs and text via the assets panel, option‑hover and command‑click for precise spacing and node selection, auto layout maps to CSS flex, and plugins like Tailwind generator, Variables→CSS, Content Reel and Figma for VS Code to export tokens and paste usable CSS/SVGs into a project.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:09Figma for engineers
- 11:26Extracting text images and styles
- 13:58Figma’s dev mode
- 19:57Design tokens
- 23:13CSS from Figma variables
- 26:09Frames and auto layout
- 28:15Components and variants
- 30:43Plugins for React
- 32:32Prototyping and research
- 33:55Figma Slides
- 35:18Resources
related talks
09mFigma to React: Efficient Delivery Design to the Code
29mBringing truth to Figma
17mThe rise of the design engineer
19mBringing Developers into the Design Process
54mFrom prompt to code
42mCode, Creativity, and Community at Figma
34mFrom Figma to Quality Code: Code Connect + AI
23mHow to create Figma design loved by developers