The UI Prep Syllabus on Learning Figma

Written By
Molly Hellmuth
Read Time
13 min
Last Updated
August 10, 2023

Introduction

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? Sign up for my Design System Bootcamp here.
👉  Starting a new design project? Checkout the UI Prep design system.

Figma 101

Getting set up

Straightforward instructions on how to create a new account in Figma.

Everything you need to know about designing on and off line with Figma.

How, why, and where to download the Figma desktop app.

How to use fonts that you've downloaded but are not included in Google fonts.

Collection of guides describing how to connect various design/team tools to Figma.

How to import images, vectors, and design files (Figma & Sketch).

The grand tour

Tutorial showing the basics of Figma: how it works, how to use it, and some tips and tricks.

Tutorial on getting started with Figma.

Introduction to working in a Figma and how to use basic features.

Continued introduction to working in Figma with slightly more advanced features.

Organizing teams, projects, and files

Everything you need to know about creating and joining teams.

Everything you need to know about using team libraries to manage and share components and styles.

Tutorial describing how to to organize your files in an organization.

Tutorial on setting up your design files.

Developer handoff

Everything you need to know about handing designs off to a developer.

Tutorial on how to handoff designs to a developer.

In depth guide on how to document your designs in a way your developers will understand.

Styles

What are styles?

Overview of how styles work in Figma.

Instructions on how to use styles in Figma.

Color styles

A guide to creating a system of colors that self generates and maintains the perfect color palette.

Figma file with example styles that can be used as a playground or starting place for a new project.

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.

Text styles

How to build out Material Designs Type System from scratch and add them as text styles in Figma.

How to create the perfect type scale for your design projects.

Type scale calculator.

Effect styles

Overview of Figma effects and how to use them.

Tutorial showing how to apply shadow effects.

Tutorial showing how to make naturally colored shadows.

Tutorial showing how to create the "frosted glass" effect.

Layout grid styles

Overview of Figma's layout grids, why they are useful and how to use them.

Spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.

Tutorial on designing responsive screens with layout grids.

Components

Master components

Overview of building Figma components with additional resources.

Tutorial describing Figma components for beginners.

How to use components, constraints, auto-layout, spacing, and styles.

Tutorial showing the basics of Figma and how to build simple and complex components.

Best practices for building cards, dialogs, navigations, forms and more.

Vector shapes

Introduction to Figma vectors, why they are great, and how to use them.

How to quickly create graphs and arcs in Figma.

Tutorial on creating icons and logos in Figma.

Tutorial on how to create an illustration of a person in Fimga.

Auto Layout

Overview of auto layout, how and when to user it.

Tutorial showing how to use auto layout, using a button as an example.

Playground with step-by-step instructions, where you can learn how to use basic auto layout features.

Everything you need to know about Figma's Auto Layout and how to build responsive components.

Playground with step-by-step instructions, where you can learn how to build basic and advanced auto layout components.

Tutorial showing how to use auto layout, using a card as an example.

Tutorial on how to create a complex card using Figma's auto layout.

Variants

Everything you need to know about using Fimga variants.

Tutorial on how to use variants, using inputs as an example.

Figma design advocate talks about using variants and best practices.

A guide to using Figma variants efficiently and speeding up your design workflow.

Figma file with example button variants that can be used as a playground or starting place for a new project.

Tutorial on how to use Figma variants.

General tips

"Rapid-fire" tips on how to level up your design skills.

Time-saving tips and tricks to help designers work more efficiently.

Tips on how to work faster in Figma.

In depth tutorial with lots of tips on using Figma.

Quick tips on how to design and preview your work at the same time.

32 helpful tips you might not know about.

Just for fun

Dice games to play with your fig-friends!

Take a break to play a game of Connect 4 with a friend!

Fully playable version of Stephen Barkan's Figma Catan

Play tetris with your teammates!

Prototyping

The basics

Everything you need to know about prototyping (excluding interactive components).

Tutorial where you can learn how to build an interactive prototype, using a mobile app as an example.

Helpful tips to make better prototypes in Figma.

Everything you need to know about creating overlays in Figma.

In depth tutorial on creating a prototype with real examples.

Interactive components (BETA)

Everything you need to know about prototyping with interactive components.

Playground where you can learn how to use interactive components with step-by-step instructions.

Four designers discuss Figma's new interactive components and share some tips and tricks.

Tutorial showing how to create a simple switch with interactive components.

Tutorial showing a fun experiment where you can create a functional input field or text box.

 UI Prep design system

Here at UI Prep, we obsess over every Figma feature. Studying them and finding new ways they can be used to improve our designs and workflows. Over the years we've created countless design systems and have learned what works and what doesn't. That's why we built the UI Prep Design system.  It utilizes everything Figma has to offer and can be used as a playground to learn best practices or as a huge jump start for your next project!

→ Learn more about the UI Prep design system
→ Preview the design system in Figma
Weekly, practical tips to help you become a more confident designer.

Get 5 tips about Figma and design systems from me every Friday. Always free. No fluff.

Join 20k+ designers getting the newsletter.

Want more design insights like this?

See our full catalog of articles covering Figma tips and Design System best practices.

View All Articles