Summary
Keywords
Full Transcript
Get a copy of the workshop file here: https://www.figma.com/community/file/1360664272814262728/figma-for-edu-dev-mode-workshop. 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): https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #FigmEdu #DevMode #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
