Explore the newly launched Figma Dev Mode in this comprehensive video tutorial. Learn how to activate Dev Mode, customize language and base units, and utilize the box model for CSS output. Discover asset management techniques, section organization, and development readiness features. Dive into variables, styles, and change tracking functionalities. Connect components to GitHub files and leverage the VS Code extension for enhanced workflow. Gain insights into both the advantages and potential drawbacks of Dev Mode, equipping yourself with a well-rounded understanding of this powerful new Figma feature.
Overview
Syllabus
- Introduction
- How to turn on Dev Mode
- Changing your language and base units
- Box model and the CSS that it outputs
- Getting assets
- Sections and ready for development
- Variables and Styles
- Tracking changes
- Connecting components to GitHub files
- VS Code Extension
- The negatives of Dev Mode
Taught by
Kevin Powell
