Figma Basics

Description

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 interactive 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. 

You can attend just the first day. Attending just the second day is only recommended if you’re already very comfortable with the Figma interface. 

Day 1: Basic Figma design and collaboration

For beginners with no prior experience with Figma who want to understand the basics, be able to create their own designs, share, collaborate and even iterate on the designs of others. You will learn:

• 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 reusable components.

• How to use the ‘auto layout’ feature to promote tidy, consistent and usable design.

• How to collaborate on designs by sharing screens and commenting on designs.

• A brief introduction to prototyping:

• What’s possible.

• What’s not.

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.

• Prototyping fundamentals:

• How to make journeys clickable.

• How to introduce animations.

• Tips and tricks for effective user testing.

• The limitations of Figma prototyping

Is it for you?

With no experience of Figma necessary, this course is suitable if:

• 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.

Learning objectives

After completing day 1 you will be able to:

• Understand the Figma user interface.

• Create mobile and desktop interface designs.

• Effectively collaborate remotely. 

• Share designs and gather feedback.

• Use auto layout to promote consistent and usable designs.

• Understand Figma’s role in user experience design, and its limitations.

After day 2 you will be able to:

• Understand how design systems are set up and used.

• Create component variants for use in your own design system.

• Use that design system to efficiently create a user journey.

• Create a prototype suitable for user testing.