Bringing Developers into the Design Process
summary
Figma announces a developer-focused space called Dev Mode that reworks selection, navigation, and exposes tools like a Component playground, rems toggle, and variable-to-code syntax so designers and engineers share a reusable-values model. Built-in codegen targets CSS, SwiftUI, Compose, while community and private plugins generate Next.js, Tailwind, Storybook, etc., to eliminate boilerplate. A VS Code extension surfaces design tokens in editor autocomplete, and Ready for dev plus compare-changes aim to cut late-stage rework.
AI-written summary · about
chapters (9)
- 0:00Introduction to talk
- 1:18Why developers belong in design
- 2:40Problems with current design tools
- 5:51Introducing Dev Mode
- 8:42Customizing Dev Mode workflows
- 10:07Bridging design and code
- 14:39Figma for VS Code
- 16:04Reducing miscommunication
- 18:11Summary and call to action
related talks
19mLevel up designer and developer collaboration with Noga Mann
28mOpening & Welcome
36mElevate Your React Workflow with Figma
14mRethinking Designer-Developer Collaboration
29mDesign to Code: Roundtable discussion with Code Connect users
17mThe rise of the design engineer
16mDesign Language on Autopilot: How Figma and Code Can Automate Your Workflow
23mUsing Figma beyond and above in design teams