Designing with Figma

Effortlessly turn ideas into interactive designs and prototypes with Figma’s collaborative power.

Course description

Figma is an industry-leading web-based design tool that allows you to create user interfaces for any screen type or size, collaborate on those designs in real-time and build prototypes suitable for user testing.

Figma is a visual design tool so there’s no coding involved. Design is achieved by adding, combining and styling shapes, text and images on a canvas or ‘Frame’.
We run 2 consecutive Figma training days, the second day building on the practical activities from the first. These two days are very practical with a little bit of theory thrown in. You’ll be getting your hands dirty!

“Really good class size, so everyone got individual help and feedback with tasks. Good pace, it was challenging enough that it kept me interested but not so hard that I got frustrated! Aaron was incredibly knowledgeable and engaging.“

Joanna Innes
Digital Artworker, HSBC

Is it for you?

This course is suitable if:

You have no, or little experience of Figma
If you’re involved with creating or curating digital experiences
if you want to turn your design ideas into something tangible
If you work with Figma designers and want to understand the ‘art of the possible’
If you want to collaborate with your team on Figma projects

What you will learn

Day 1: Basic Figma design and collaboration

You will learn how to:
How to navigate the Figma interface.
How to create your own designs by:
Setting up a design file.
Setting up the screen type you want to design and add grids and guides.
Adding and modifying basic shapes and text to create user interface elements.
How to save text and colour styles for reuse.
How to create design rules to promote tidy design
A brief introduction into prototyping
A brief introduction to ‘Auto layout’
A brief introduction to components
How to collaborate on designs by sharing screens and commenting on designs.

Day 2: Component variants, design systems and prototyping

This session will cover the more sophisticated aspects of Figma use such as:
How to use component variants to create:
Interaction styles such as hover and mouse down states
‘Flavours’ of a widget such as primary and secondary button styles.
Toggleable elements within a widget such as buttons or bullets within a product card.
How to turn a collection of components into a basic design system.
Using ‘Auto layout’ to promote tidy designs
Prototyping fundamentals:
How to make journeys clickable.
How to introduce animations.
Tips and tricks for effective user testing.
The limitations of Figma prototyping

Necessary for remote learning

Two screens, (i.e. monitor and laptop) is strongly recommended.
A mouse is strongly recommended.
A  Figma account (free Starter account available)
Figma installed on your computer
A fast and stable internet connection