The UI Prep Syllabus on Learning Figma
In the past few years Figma has become the tool of choice for most designers & design teams. And for a few very good reasons. Figma is more accessible by working in the browser and can be used on any computer. It's more collaborative by allowing multiple team members work on a file together, in real time. It's also more consolidated by having powerful prototyping and developer handoff features right in the app.
Whether you're transitioning from another design tool, or starting fresh, there's a lot to learn about designing in Figma! Use this syllabus as DIY design course to learn everything from the basics to advanced features, or pick and choose based on what skills you want to level up.
👉 Need help learning Figma? Ask me about 1:1 tutoring
👉 Starting a new project, redesigning an old project, or want to learn best practices? Checkout the UI Prep design system.
Getting set up
- Article: Create a Figma account - Figma
Straightforward instructions on how to create a new account in Figma.
- Article: Can I work offline with Figma? - Figma
Everything you need to know about designing on and off line with Figma.
- Article: Download the Figma desktop app - Figma
How, why, and where to download the Figma desktop app.
- Article: Access local fonts on your computer - Figma
How to use fonts that you've downloaded but are not included in Google fonts.
- Article: Connect Tools - Figma
Collection of guides describing how to connect various design/team tools to Figma.
- Article: Getting Started with Imports - Figma
How to import images, vectors, and design files (Figma & Sketch).
The grand tour
- Video: Figma 101: An introduction tutorial - Charli Marie 🔥
Tutorial showing the basics of Figma: how it works, how to use it, and some tips and tricks.
- Video: Introduction to Figma - 2021 Beginners Tutorial - Mizko
Tutorial on getting started with Figma.
- Video: Figma For Beginners: Explore ideas (1/4) - Figma
Introduction to working in a Figma and how to use basic features.
- Video: Figma For Beginners: Create designs (2/4) - Figma
Continued introduction to working in Figma with slightly more advanced features.
Organizing teams, projects, and files
- Article: Teams in an organization - Figma 🔥
Everything you need to know about creating and joining teams.
- Article: Guide to libraries in Figma - Figma
Everything you need to know about using team libraries to manage and share components and styles.
- Video: Awesome file organization in Figma with Kati Presley - Kati Presley
Tutorial describing how to to organize your files in an organization.
- Video: How to setup your Figma file for product design - Femke
Tutorial on setting up your design files.
- Article: Guide to Developer Handoff - Figma 🔥
Everything you need to know about handing designs off to a developer.
- Video: Figma For Beginners: Prepare for Handoff (4/4) - Figma
Tutorial on how to handoff designs to a developer.
- Article: The Best Way to Document UX/UI Design - Molly Hellmuth 🔥
In depth guide on how to document your designs in a way your developers will understand.
Learn Figma best practices with UI Prep's Design SystemLearn more
What are styles?
- Article: Create styles for colors, text, effects and, layout grids - Figma 🔥
Overview of how styles work in Figma.
- Article: Apply Styles to layers and objects - Figma
Instructions on how to use styles in Figma.
- Article: How to Create the Perfect Color Palette - Molly Hellmuth 🔥
A guide to creating a system of colors that self generates and maintains the perfect color palette.
- File: UI Prep Style Guide - UI Prep 🔥
Figma file with example styles that can be used as a playground or starting place for a new project.
- Plugin: A11y - Color Contrast Checker - Microsoft
Figma plugin that checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance.
- Video: Let's Build a Design System: Building a Type System in Figma - Tutorial Tim 🔥
How to build out Material Designs Type System from scratch and add them as text styles in Figma.
- Video: Create the Perfect Typography Scale for UI & Web Projects - Mizko
How to create the perfect type scale for your design projects.
- Tool: Type-Scale - Jeremy Church
Type scale calculator.
- Article: Apply shadow or blur effects - Figma 🔥
Overview of Figma effects and how to use them.
- Video: Smooth shadow tutorial in figma - nascodefy
Tutorial showing how to apply shadow effects.
- Video: How To Make A Cool Drop-Shadow - Figma Tutorial - Charles Postiaux
Tutorial showing how to make naturally colored shadows.
- Video: How to Create Glass Card Effect - Figma Tutorial - Thalion - UX MISFIT
Tutorial showing how to create the "frosted glass" effect.
Layout grid styles
- Article: Create Layout Grids with grids, columns, and rows - Figma 🔥
Overview of Figma's layout grids, why they are useful and how to use them.
- Article: Everything you need to know about spacing & layout grids - Molly Hellmuth 🔥
Spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.
Tutorial on designing responsive screens with layout grids.
- Article: Guide to Components in Figma - Figma
Overview of building Figma components with additional resources.
- Video: Figma Components 101 - Figma 🔥
Tutorial describing Figma components for beginners.
- Video: Office Hours: Mastering components - Figma
How to use components, constraints, auto-layout, spacing, and styles.
- Video: The basics to creating robust components - Kevin Powell 🔥
Tutorial showing the basics of Figma and how to build simple and complex components.
- Video: Office Hours: Complex Component Architecture - Figma
Best practices for building cards, dialogs, navigations, forms and more.
- Video: Pen Tool Basics & Vector Networks - Figma 🔥
Introduction to Figma vectors, why they are great, and how to use them.
- Video: Figma Quick Tips: Create Graphs:Arc In Seconds - Rusmir Arnautovic
How to quickly create graphs and arcs in Figma.
- Video: Icons and Vector Network in Figma - DesignCode 🔥
Tutorial on creating icons and logos in Figma.
- Video: Illustration in Figma: Let's Create an Illustration - Pierluigi Giglio
Tutorial on how to create an illustration of a person in Fimga.
- Article: Create dynamic designs with Auto layout - Figma 🔥
Overview of auto layout, how and when to user it.
- Video: Figma tutorial: Auto layout button - Figma 🔥
Tutorial showing how to use auto layout, using a button as an example.
- File: Figma Auto Layout playground - Figma
Playground with step-by-step instructions, where you can learn how to use basic auto layout features.
- Article: Ultimate Guide to Mastering Auto Layout in Figma - Molly Hellmuth
Everything you need to know about Figma's Auto Layout and how to build responsive components.
- File: UI Prep Auto Layout Playground - UI Prep 🔥
Playground with step-by-step instructions, where you can learn how to build basic and advanced auto layout components.
- Video: Figma tutorial: Card component with auto layout - Figma
Tutorial showing how to use auto layout, using a card as an example.
- Video: UI Card Designed with Auto Layout - Figma Crash Course - Sketch Together
Tutorial on how to create a complex card using Figma's auto layout.
- Article: Creating and organizing Variants - Anthony DiSpezio 🔥
Everything you need to know about using Fimga variants.
- Video: Figma Tutorial: Variants - Figma 🔥
Tutorial on how to use variants, using inputs as an example.
- Video: Office hours: Get started with Variants - Figma
Figma design advocate talks about using variants and best practices.
- Article: Advanced Figma Variants - Molly Hellmuth
A guide to using Figma variants efficiently and speeding up your design workflow.
- File: UI Prep Buttons - UI Prep 🔥
Figma file with example button variants that can be used as a playground or starting place for a new project.
- Video: Figma Tutorial: Variants in 11 minutes - Mizko
Tutorial on how to use Figma variants.
- Video: Figma in 5: Tricks on Fire II - Fimga 🔥
"Rapid-fire" tips on how to level up your design skills.
- Article: 10 Tips & Tricks to Design Faster in Figma - Molly Hellmuth
Time-saving tips and tricks to help designers work more efficiently.
- Video: 10 tips to work 10x faster in Figma - Carola Pescio Canale 🔥
Tips on how to work faster in Figma.
- Video: Figma Tips & Tricks - UI Designer's Superpower - Learn UX
In depth tutorial with lots of tips on using Figma.
- Tweet: Quick #FigmaTip for y'all. - @rogie
Quick tips on how to design and preview your work at the same time.
- Article: Tips to fasten Figma workflow - Awesome Figma Tips
32 helpful tips you might not know about.
Just for fun
- File: Figma Multiplayer Dice Games! - Rogie
Dice games to play with your fig-friends!
- File: Connect 4 Game - Kevin Santos
Take a break to play a game of Connect 4 with a friend!
- File: Figma Catan (Playable) - Karl Jiang
Fully playable version of Stephen Barkan's Figma Catan
- File: Play Tetris in your favorite design tool! - Emily Zhong
Play tetris with your teammates!
- Article: Guide to prototyping in Figma - Figma 🔥
Everything you need to know about prototyping (excluding interactive components).
- Video: Figma For Beginners: Build prototypes (3/4) - Figma
Tutorial where you can learn how to build an interactive prototype, using a mobile app as an example.
- Article: 5 ways to improve your prototyping workflow - Thomas Lowry
Helpful tips to make better prototypes in Figma.
- Article: Create overlays in your prototypes - Fimga
Everything you need to know about creating overlays in Figma.
- Video: Prototyping animations with Figma - Kevin Powell
In depth tutorial on creating a prototype with real examples.
Interactive components (BETA)
- Article: Create interactive components with variants - Figma 🔥
Everything you need to know about prototyping with interactive components.
- File: Figma Interactive Components Playground - Figma
Playground where you can learn how to use interactive components with step-by-step instructions.
- Video: Office Hours: Get started with interactive components - Figma
Four designers discuss Figma's new interactive components and share some tips and tricks.
- Video: Interactive Components in Figma - Sketch Together 🔥
Tutorial showing how to create a simple switch with interactive components.
- Video: Input Field to Type Any Keyboard Character in Figma - Design Xstream
Tutorial showing a fun experiment where you can create a functional input field or text box.