Figma for UI Design Course (Coming 2025)

If you use Figma for logo design, branding, social media template design, UI (user interface) design, or website design and want to master your graphic design skills, I am excited to be launching a Figma Zero-to-Hero masterclass course.

You'll leave with new ways to earn a living online and a far better understanding of graphic design principles.

During the course, I have put together assignments and briefs for you to work through alongside my lectures and tutorials so you'll leave with confidence and brand-new skills.

The assignments start with simple, typography-based logo designs and ready-to-post social media templates in Figma.

Towards the end of the course, you'll tackle your very own final website design project to share with your audience.

Figma has become one of the most in-demand graphic and UI design tools out there, and there's never been a better time to learn Figma as a freelance graphic designer looking to earn an income online.

As a thank you for supporting me, I am offering up to 75% off when the course launches if you join the waiting list today.

Here's a brief overview of the course. Please note that the final lectures may differ from the initial plan, so take this as an example of what you can expect.

Getting Started with Figma

In the first unit, we will look at the basics of Figma and what to do once you've downloaded, logged in and opened it up for the first time.

We will cover basic shapes and design elements and how to export and save your work using Figma.

Planned lectures:

1. Figma's User Interface

2. Adding basic shapes, text, lines, and images

3. Grouping and framing layers

4. Exporting groups, frames and layers

5. Collaboration, Dev Mode and FigJam

6. Saving and version history

7. Importing Figma files

Creating custom assets and shapes

In the second unit, we will use the knowledge from unit one to design custom assets and unique vector shapes using the pen, union and subtraction tool, and masking tools.

You will be surprised how powerful the skills picked up in this unit will be for so many design applications.

Planned lectures:

1. Use the pen tool to create custom vectors.

2. Add, subtract, and intersect vectors to create unions.

3. The masking tool and when to use it

Project: Logo design in Figma

Our first project will be to create a letter-based or typography-based logo design using vectors and union tools we learned in the previous unit.

We will use my logo as a reference, work on creating our modern, minimal logo design, and build on the skills we have picked up so far in the course.

Principles of Graphic Design

Next comes some theory.

As is essential to anything, theory and understanding often help!

We will cover essential theories and concepts of graphic design, including balance and hierarchy, principles of colour psychology, and how to make meaningful design decisions.

Planned lectures:

1. Essential design theories and concepts

2. Colour Theory & Psychology

Using plugins and the community to supercharge your workflow

Don't reinvent the wheel whenever you try to do something in Figma.

Chances are, you are not the first to need a particular type of shape or element in your work.

This unit will cover plugins, the Figma community, and how to leap through projects with their help!

Planned lectures:

1. What plugins are, and how to use them!

2. Use cases for different plugins.

3. The Figma community assets and plugins

Project: Social Media Templates

You'll be ready to tackle editable social media template designs by now.

Why did I choose this project for you?

Over the years, so many clients have requested customisable templates that they can import and edit themselves in Figma.

With this practical project, you will refine your skills and build something that can help you earn.

Mastering the auto-layout tool

Next, we will cover the powerful auto-layout tool.

Its scope of applications is vast, from laying out buttons to entire websites and landing pages.

We will cover every type and setting involved with the auto-layout tool and finish with a practical exercise involving all three types of auto-layout.

Planned lectures:

1. What is the auto-layout tool?

2. Horizontal, vertical and wrap - what's the difference?

3. Spacing, padding and layout

4. Common use cases

5. Exercise: Creating a list of tags (using all three auto-layout modes).

Components, variants and reusable elements

Components let you speed up your design flow hugely and are well worth learning.

This unit covers reusable components, which are custom-designed elements that have properties set by you so that you can reuse UI across your designs.

For example, you'll learn to make buttons and cards with differing content but the same layout and structure.

Planned lectures:

1. What are components

2. Creating and using your first component

3. Adding variants

4. Properties and component iterations

Design Systems, Variables, and Styles

You will learn design systems in Figma, how to use variables, styles, and reuse effects, and how to maintain consistency throughout your designs while adhering to brand guidelines.

Planned lectures:

1. What are design systems, and what does this have to do with Figma?

2. Styles: Typography, Colour, Effects

3. Variables

Prototyping and creating interactive experiences

As we work towards your final build of a website landing page, you will need to understand prototyping.

You will learn to create interactive, client-ready prototypes with animations and states, which is perfect for budding user interface designers.

Planned lectures:

1. Prototyping in Figma

2. Interactions

3. Component-based interactions

4. Exercise: create a toggle that works and is draggable

Animations and effects in Figma

Building on prototypes, we will look at motion and effects in Figma and create several designs and prototypes to add interest, zest, and shine to your work.

This unit will include popular design styles, including glassmorphism, animated background blurs, looping animations, and animated hamburger menu icons.

Planned lectures:

1. Hamburger icon animation

2. Animated blurred background

3. Glassmorphism

4. Looping Animations

Final project: website landing page design

Your final project will be a landing page for a website based on a real-world client brief.

You will design a landing page for a desktop device and prepare this for presenting to your audience online, as you would for a client.

The final project brings everything together and provides you with practical experience to help you prepare to work with clients and earn an income online.

Responsive Design

To follow up on your desktop landing page design, we will explore responsive design and what that means before taking simple steps to turn that landing page into a mobile-friendly one.

Planned lectures:

1. What is Responsive Design?

2. How do I make my designs responsive?

3. Turn our landing page into a mobile-friendly one.

Beyond the course

Prepare to earn online with the final unit, which helps you get started, prepare to take on client briefs, and present your work to the world.

This unit is where you learn how to keep up to date with both Figma and general design trends to become a professional, client-ready freelance user interface designer.

Planned lectures:

1. Professional applications and ways to earn with Figma

2. Working on real-world client briefs

3. User testing and commenting

4. Getting found online as a designer

5. Presenting and sharing your work with the world

6. Keep up with Figma updates.

Remember, you'll get 75% off if you join the waiting list!