How to Create Style Guides in Figma for Instructional Design

Speed up your design process when creating your style guides for eLearning or instructional design projects. Download the free Figma keyboard shortcuts job aid: https://www.devlinpeck.com/forms/figma-keyboard-shortcuts Visual design is difficult for a lot of instructional designers, but it's so much easier when you create a style guide. As Sabrina Gonzales says, "designing visuals without a style guide is like playing a board game without any rules." The style guide gives us the rules and guidelines so that we can make visual design decisions quickly and easily. It takes a bit of upfront work, but it can save you so much time (and so many headaches) in the long run. In this video, Sabrina shows you how to create style guides in Figma for instructional design projects so that you can calm the chaos of design and provide stakeholders with exactly what they need. Check out the full Figma tutorial playlist here: https://youtube.com/playlist?list=PLDW3IzDXPIgq4h1TESqmDZXGJ8W7njL-F&si=mQEVcfdYmKHeCJEg Looking for graphics to include on your style guide? Head over to https://www.freepik.com and watch the "Where to Find Graphics for eLearning" here: https://www.youtube.com/watch?v=CvTTQaBjfrM Download fonts for free from Google Fonts: https://fonts.google.com/ Try this contrast checker from WebAIM: https://webaim.org/resources/contrastchecker/ Using the affiliate links below will help support me and the content on this channel: ***Best AI Tools for Instructional Designers*** Synthesia: https://www.synthesia.io/?via=devlin WellSaid Labs: https://www.wellsaidlabs.com/?via=devlin Descript: https://www.descript.com/?lmref=jJTSTA Jasper: https://jasper.ai/?fpr=devlin44 ***Best Laptops for Instructional Designers*** Dell XPS 13: https://amz.run/6l1w 16-inch MacBook Pro: https://amz.run/6l1y Gigabyte Aero 17: https://amz.run/6l26 ***Best Books for Instructional Designers*** The Non-Designer’s Design Book: https://amzn.to/3kP0reO Map It: https://amzn.to/3f137mR eLearning and the Science of Instruction: https://amzn.to/3kNuBiF Design For How People Learn: https://amzn.to/3CLtrNM Michael Allen’s Guide to eLearning: https://amzn.to/31ZUbJB 0:00 Intro 1:46 Why Figma for Style Guides? 3:16 Style Guides in the ID Process 4:05 The Mood Board 4:48 Style Guide Elements 7:03 Colors 10:16 Typography 17:35 Buttons 23:39 Optional Elements 28:09 Wrap Up