Get a copy of the workshop file here: https://www.figma.com/community/file/.... This workshop will an introduction to using Figma’s Dev Mode for designer and developer collaboration. We‘ll cover how to use Dev Mode effectively for learning how designs can translate to useable code. We will cover setting dev-ready status, comparing design versions and iterations, annotations, inspection, codegen languages, and developer friendly units.

Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Figma is free for students and educators. https://figma.education

00:10 Agenda
02:25 Enable dark mode
03:43 Enabling Dev Mode
06:15 Design mode vs Dev Mode
08:10 Dev Mode Education access
09:08 Anatomy of a UI Card
15:00 Example Components
16:47 Making a button
20:00 Auto layout frames and Dev Mode
21:56 From components to Layouts
28:34 Marking ready for development
29:22 Annotations and measurements
38:15 Compare changes
42:48 Component playgrounds
43:52 Insert component dialog
44:44 Variables
49:07 Q+A

____________________________________________________

Find us on ⬇️
X (formerly Twitter):   / figma  
Instagram:   / figma  
LinkedIn:   / figma  
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #FigmEdu #DevMode #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems