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/figm... 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: • Figma Tutorials for Instructional Designers 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: • Where to Find Graphics for eLearning Projects Download fonts for free from Google Fonts: https://fonts.google.com/ Try this contrast checker from WebAIM: https://webaim.org/resources/contrast... 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

How to Create Wireframes in Figma for eLearning & Instructional Design

How to Get Started with Figma for Instructional Design

Figma for Edu: Advanced protototyping techniques

Visual Design Basics for eLearning Development | How-To Workshop

Build a Design System - Full Course

How to create Color style guide in figma

How to Create Visual Mockups in Figma (Instructional Design & eLearning)

The Instructional Design Role is Changing

Introduction to Instructional Design: Models, Theory, & Principles

Master Button Components in Figma UI3: Variants, Properties & States

تلاوة القرآن للدراسة والتركيز 📚🕛 | راحة وطمأنينة | Peaceful Focus Quran | محمد هشام

How I Build a Production-Ready Design System with AI | Figma Make

ASMR Addictive Fast Tapping Collection For Deep Sleep & Anxiety Relief (No Talking) — 2.5 Hours

Figma RESPONSIVE DESIGN using Variables, Layout grids and Auto Layout | Figma 2024

Free Figma Crash Course for Beginners 2026 | UI/UX Design

Figma Shader Effects & Fills : Complete Overview + How to Create Your Own | Config 2026 @Figma

Figma for Edu: Learning Auto Layout workshop

How to Write an eLearning Storyboard | How-To Workshop

Your First Design System in Figma (Beginner Tutorial)

