Pages

Courses

ALL COURSES

Resources

ALL RESOURCES

Blogs

ALL BLOGS

Figma for UX/UI Design

Learn the tools needed to get up and running with Figma and drastically transform your UX/UI experience.

Figma is an online design and collaboration tool for designers and teams. You can create wireframes and prototype your designs on Figma. Even though Figma is an online-based tool, it's also available for download on Windows and Mac. In this course, you'll design a grocery delivery app and work on exercises to develop your skills. 

This course is aimed at people who are new to UX/UI design or designers who use other design software and want to get started with Figma. Figma is free to get started, collaborative, and fast. It works on any computer, mobile, and a companion app to preview designs screens on your phone.

Duration
3 days/24 hours of instruction
Public Classroom Pricing

Starting at: $1895(USD)

$2450(CAD)

GSA Price: $1785

Group Rate: $1795

Private Group Pricing

Have a group of 5 or more students? Request special pricing for private group training today.

Part 1: Introduction

In this section, you'll understand what Figma is and how to set it up by creating an account. You'll also learn about the basics of UX/UI design, their differences, and why Figma is important. 

  • What Is Figma?
  • Figma Setup Tools
  • What Is UX Design?
  • What Is UI Design?
  • The Difference Between UX and UI Design
  • The Importance of UX/UI Design
  • The Role of Figma in UX/UI Design
  • Exercise: Pick any app of your choice and write five things you would like to redesign in the app for a better user and personalized experience for you.

Part 2: The Editor

The Figma design editor isn’t different from other design editors; however, there are a few differences. In this section, you'll get acquainted with the editor and learn how you can create a wonderful design. 

  • Left Panel 
  • Layers panel
  • Assets panel
  • Property Panel 
  • Design tab
  • Prototype tab
  • Inspect tab
  • Tools Panel
  • Move tools
  • Region tools
  • Shape tools
  • Drawing tools
  • Text 
  • Hand tools
  • Exercise: Create a page and add an iPhone 11 frame to it.

Part 3: Wireframing

Wireframing is an important process in UX/UI that helps in the ideation of a concept to create the actual product. We'll cover the various stages of wireframing by designing a shopping app. 

  • Low Fidelity Design
  • High Fidelity Design 
  • Low vs. High Fidelity Design
  • Use Wireframe UI Kits to Fast-track Your Designs
  • Exercise: Design a low- and high-fidelity design for a grocery delivery app.

Part 4: Layout Grids

In this section, you'll learn how to add layout grids and columns to your design. 

  • Grid
  • Column
  • Row
  • Exercise: Add a layout grid and column to your grocery delivery app.

Part 5: Text

Type and fonts are the basics for creating a visual hierarchy. In this section, you'll learn the difference between type and fonts, and how to use two or more typefaces to create a clean design. 

  • Font vs. Type
  • Fonts 
  • Font family 
  • Font weight 
  • Font size
  • Type Details
  • Alignment
  • Decoration 
  • List style 
  • Letter case
  • How to Use Lorem Ipsum
  • How to Fix Missing Fonts From a Figma File
  • Exercise: Use the Roboto font for your design and follow the Google material design guideline.

Part 6: Shapes

Shapes are the building blocks of a design. In this section, you'll learn how to create shapes using the shape tool. 

  • Rounded Corners
  • Rectangle 
  • Line 
  • Arrow 
  • Eclipse 
  • Polygon 
  • Star 
  • Exercise: Create a repeated pattern using two or more shapes.

Part 7: Colors

In this section, you'll learn how to create a color palette for your design and how to use two or more colors with a good visual hierarchy. 

  • Gradient 
  • Solid 
  • Linear 
  • Radial 
  • Angular 
  • Diamond 
  • Color Picker
  • Color Palette
  • Stroke 
  • Center stroke
  • Inside stroke 
  • Outside stroke
  • Effects
  • Inner shadow
  • Drop shadow
  • Layer blur 
  • Background blur 
  • Exercise: Create any shape of your choice, fill it with a color, add a linear gradient to it, and then add stroke and effects.

Part 8: Creating Styles

Here you'll learn how to reusable style guidelines for your design. 

  • Color Style
  • Text Style
  • Effects Style
  • Layout Grid Style 
  • Exercise: Create a color and text style for your grocery delivery app.

Part 9: Images

Working with images in Figma is easy because it's simple and also offers the capabilities of photo editing. Here you'll learn how to work with images in Figma. 

  • Image Masking
  • Image Cropping 

Part 10: Pen Tool

Here you'll learn how to create illustrations using the pen tool in Figma. 

  • The Basics of the Pen Tool
  • Pen Tool vs. Pencil Tool
  • Pen Tool Keyboard Shortcut
  • Create an Illustration With the Pen Tool
  • Exercise: Design an illustration of your choice for your grocery delivery app.

Part 11: Boolean Groups

Boolean helps in joining two or more design elements together. In this section, you'll learn how to work with boolean. 

  • Union Selection
  • Subtract Selection 
  • Intersect Selection 
  • Exclude Selection 
  • Flatten Selection 
  • Exercise: Create a heart icon using boolean.

Part 12: Auto Layout

Here you'll learn how to work with the auto layout in your design. 

  • Direction 
  • Vertical 
  • Horizontal
  • Item Spacing 
  • Item Padding
  • Alignment
  • Exercise: Add auto layout to your design.

Part 13: Constraints

In this section, you'll learn how to work with constraints. 

  • Left 
  • Right 
  • Center
  • Top 
  • Bottom 
  • Center 

Part 14: Components

Components are reusable parts or fragments of your UI element. In this section, you'll learn how to create a component and its instance. 

  • What Is a Component in Figma?
  • Creating Instance
  • Overrides
  • Libraries 
  • Exercise: Create a button component and an instance, and then publish it to a library

Part 15: Plugins

In this section, you'll learn how to work with plugins to make your design faster. 

  • What Are Plugins in Figma?
  • How to Get the Right Plugin
  • Using Plugins in Figma
  • Popular Plugins
  • Exercise: Download the plugins you need for your design. Also, download the Unsplash plugin to add free stock images and the Remove Bg plugin to remove the background from the images you have downloaded using the Unsplash plugin. 

Part 16: Prototype

Prototyping brings your design to life before the development of the app. In this section, you'll learn how to prototype your design. 

  • Flow Starting Point
  • Interaction
  • Overflow Scroll
  • Exercise: Add an interactive prototype to your design for each screen of your app.

Part 17: Collaboration 

As a designer, you'll work with a team. This comes easy because Figma provides collaboration with a team. 

  • Comments
  • Audio Conversation 
  • Design Sharing 
  • Exercise: Share your design with a designer or developer for review.

Part 18: Design Handoff

  • Code Sharing
  • Exercise: Share your design code with a developer.

Part 19: Figma Community

Figma now provides a community of designers sharing their work for the growth of each other. 

  • Community Plugins
  • Design Templates 
  • Exercise: Publish your design to the Figma community.

This Figma training is designed for professionals with the following job titles and job functions:

  • Graphic Designers
  • Visual Designers
  • Product Designers
  • Content Creators
  • UX/UI Designers
  • Developers

  • Create a wireframe
  • Work faster using Figma shortcut keys
  • Implement colors and images in your designs you will learn about components, constraints, and multidimensional variants
  • Create your own icons, buttons, and other UI components
  • Work with UI kits
  • Use plugins in designs to speed up your workflow
  • Create simple and advanced micro-interactions, page transitions, and animations 
  • Design a mobile and desktop app, from collaborating with a team in Figma to design hand-off to your developer or software engineer.

Figma for UX/UI Design Schedule

Location
Date
Register
CPSFDC\Entity\Session::__set_state(array( 'entitySanitizer' => 'CPSFDC\\Utils\\Sanitizers\\SessionSanitizer', 'sfId' => 'a011G00000b7ZjOQAU', 'startDate' => '2022-07-20', 'startTime' => '12:00 PM', 'endDate' => '2022-07-22', 'endTime' => '8:00 PM', 'name' => '720009VCL', 'standardCourseFee' => '1895', 'standardCourseFeeCAD' => '2450', 'standardCourseFeeEUR' => '1695', 'courseId' => 'FIGMAUX', 'course' => 'a001G00000INEH0QAP', 'courseSfId' => 'a001G00000INEH0QAP', 'courseName' => 'Figma for UX/UI Design', 'instructorId' => '85388', 'instructorSfId' => 'a0237000001Y4RDAA0', 'instructorDisplayName' => 'TBD', 'instructorName' => 'TBD', 'locationCode' => 'VCL', 'sessionStatus' => 'O', 'city' => 'Live Online Training', 'state' => '', 'cityState' => 'Live, Online Training', 'locationSfId' => 'a0637000000tn2hAAA', 'subjectSfId' => '', 'subjectName' => '', 'specialitySfId' => '', 'specialityName' => '', 'certificationSfId' => NULL, 'certificationBody' => '', 'certificationName' => '', 'pdus' => '', 'deliveryModalities' => 'In-Person;Live Online', 'fullFacilityAddress' => 'Live Instructor-Led Online Training
Please call Cprime for location details
at 1-877-800-5221
, LOL', 'gtr' => '', ))
Live, Online Training
Jul 20th - 22nd
12:00 PM - 8:00 PM ET
$1895(usd)
CPSFDC\Entity\Session::__set_state(array( 'entitySanitizer' => 'CPSFDC\\Utils\\Sanitizers\\SessionSanitizer', 'sfId' => 'a011G00000b7ZjPQAU', 'startDate' => '2022-08-10', 'startTime' => '8:30 AM', 'endDate' => '2022-08-12', 'endTime' => '4:30 PM', 'name' => '720009VCL02', 'standardCourseFee' => '1895', 'standardCourseFeeCAD' => '2450', 'standardCourseFeeEUR' => '1695', 'courseId' => 'FIGMAUX', 'course' => 'a001G00000INEH0QAP', 'courseSfId' => 'a001G00000INEH0QAP', 'courseName' => 'Figma for UX/UI Design', 'instructorId' => '85388', 'instructorSfId' => 'a0237000001Y4RDAA0', 'instructorDisplayName' => 'TBD', 'instructorName' => 'TBD', 'locationCode' => 'VCL', 'sessionStatus' => 'O', 'city' => 'Live Online Training', 'state' => '', 'cityState' => 'Live, Online Training', 'locationSfId' => 'a0637000000tn2hAAA', 'subjectSfId' => '', 'subjectName' => '', 'specialitySfId' => '', 'specialityName' => '', 'certificationSfId' => NULL, 'certificationBody' => '', 'certificationName' => '', 'pdus' => '', 'deliveryModalities' => 'In-Person;Live Online', 'fullFacilityAddress' => 'Live Instructor-Led Online Training
Please call Cprime for location details
at 1-877-800-5221
, LOL', 'gtr' => '', ))
Live, Online Training
Aug 10th - 12th
8:30 AM - 4:30 PM ET
$1895(usd)
CPSFDC\Entity\Session::__set_state(array( 'entitySanitizer' => 'CPSFDC\\Utils\\Sanitizers\\SessionSanitizer', 'sfId' => 'a011G00000b7ZjQQAU', 'startDate' => '2022-09-21', 'startTime' => '9:00 AM', 'endDate' => '2022-09-23', 'endTime' => '5:00 PM', 'name' => '720009VCL03', 'standardCourseFee' => '1895', 'standardCourseFeeCAD' => '2450', 'standardCourseFeeEUR' => '1695', 'courseId' => 'FIGMAUX', 'course' => 'a001G00000INEH0QAP', 'courseSfId' => 'a001G00000INEH0QAP', 'courseName' => 'Figma for UX/UI Design', 'instructorId' => '85388', 'instructorSfId' => 'a0237000001Y4RDAA0', 'instructorDisplayName' => 'TBD', 'instructorName' => 'TBD', 'locationCode' => 'VCL', 'sessionStatus' => 'O', 'city' => 'Live Online Training', 'state' => '', 'cityState' => 'Live, Online Training', 'locationSfId' => 'a0637000000tn2hAAA', 'subjectSfId' => '', 'subjectName' => '', 'specialitySfId' => '', 'specialityName' => '', 'certificationSfId' => NULL, 'certificationBody' => '', 'certificationName' => '', 'pdus' => '', 'deliveryModalities' => 'In-Person;Live Online', 'fullFacilityAddress' => 'Live Instructor-Led Online Training
Please call Cprime for location details
at 1-877-800-5221
, LOL', 'gtr' => '', ))
Live, Online Training
Sep 21st - 23rd
9:00 AM - 5:00 PM ET
$1895(usd)
CPSFDC\Entity\Session::__set_state(array( 'entitySanitizer' => 'CPSFDC\\Utils\\Sanitizers\\SessionSanitizer', 'sfId' => 'a011G00000b7ZjRQAU', 'startDate' => '2022-10-12', 'startTime' => '10:00 AM', 'endDate' => '2022-10-14', 'endTime' => '6:00 PM', 'name' => '720010VCL', 'standardCourseFee' => '1895', 'standardCourseFeeCAD' => '2450', 'standardCourseFeeEUR' => '1695', 'courseId' => 'FIGMAUX', 'course' => 'a001G00000INEH0QAP', 'courseSfId' => 'a001G00000INEH0QAP', 'courseName' => 'Figma for UX/UI Design', 'instructorId' => '85388', 'instructorSfId' => 'a0237000001Y4RDAA0', 'instructorDisplayName' => 'TBD', 'instructorName' => 'TBD', 'locationCode' => 'VCL', 'sessionStatus' => 'O', 'city' => 'Live Online Training', 'state' => '', 'cityState' => 'Live, Online Training', 'locationSfId' => 'a0637000000tn2hAAA', 'subjectSfId' => '', 'subjectName' => '', 'specialitySfId' => '', 'specialityName' => '', 'certificationSfId' => NULL, 'certificationBody' => '', 'certificationName' => '', 'pdus' => '', 'deliveryModalities' => 'In-Person;Live Online', 'fullFacilityAddress' => 'Live Instructor-Led Online Training
Please call Cprime for location details
at 1-877-800-5221
, LOL', 'gtr' => '', ))
Live, Online Training
Oct 12th - 14th
10:00 AM - 6:00 PM ET
$1895(usd)
CPSFDC\Entity\Session::__set_state(array( 'entitySanitizer' => 'CPSFDC\\Utils\\Sanitizers\\SessionSanitizer', 'sfId' => 'a011G00000b7ZjSQAU', 'startDate' => '2022-11-16', 'startTime' => '12:00 PM', 'endDate' => '2022-11-18', 'endTime' => '8:00 PM', 'name' => '720010VCL02', 'standardCourseFee' => '1895', 'standardCourseFeeCAD' => '2450', 'standardCourseFeeEUR' => '1695', 'courseId' => 'FIGMAUX', 'course' => 'a001G00000INEH0QAP', 'courseSfId' => 'a001G00000INEH0QAP', 'courseName' => 'Figma for UX/UI Design', 'instructorId' => '85388', 'instructorSfId' => 'a0237000001Y4RDAA0', 'instructorDisplayName' => 'TBD', 'instructorName' => 'TBD', 'locationCode' => 'VCL', 'sessionStatus' => 'O', 'city' => 'Live Online Training', 'state' => '', 'cityState' => 'Live, Online Training', 'locationSfId' => 'a0637000000tn2hAAA', 'subjectSfId' => '', 'subjectName' => '', 'specialitySfId' => '', 'specialityName' => '', 'certificationSfId' => NULL, 'certificationBody' => '', 'certificationName' => '', 'pdus' => '', 'deliveryModalities' => 'In-Person;Live Online', 'fullFacilityAddress' => 'Live Instructor-Led Online Training
Please call Cprime for location details
at 1-877-800-5221
, LOL', 'gtr' => '', ))
Live, Online Training
Nov 16th - 18th
12:00 PM - 8:00 PM ET
$1895(usd)
CPSFDC\Entity\Session::__set_state(array( 'entitySanitizer' => 'CPSFDC\\Utils\\Sanitizers\\SessionSanitizer', 'sfId' => 'a011G00000b7ZjTQAU', 'startDate' => '2022-12-07', 'startTime' => '8:30 AM', 'endDate' => '2022-12-09', 'endTime' => '4:30 PM', 'name' => '720010VCL03', 'standardCourseFee' => '1895', 'standardCourseFeeCAD' => '2450', 'standardCourseFeeEUR' => '1695', 'courseId' => 'FIGMAUX', 'course' => 'a001G00000INEH0QAP', 'courseSfId' => 'a001G00000INEH0QAP', 'courseName' => 'Figma for UX/UI Design', 'instructorId' => '85388', 'instructorSfId' => 'a0237000001Y4RDAA0', 'instructorDisplayName' => 'TBD', 'instructorName' => 'TBD', 'locationCode' => 'VCL', 'sessionStatus' => 'O', 'city' => 'Live Online Training', 'state' => '', 'cityState' => 'Live, Online Training', 'locationSfId' => 'a0637000000tn2hAAA', 'subjectSfId' => '', 'subjectName' => '', 'specialitySfId' => '', 'specialityName' => '', 'certificationSfId' => NULL, 'certificationBody' => '', 'certificationName' => '', 'pdus' => '', 'deliveryModalities' => 'In-Person;Live Online', 'fullFacilityAddress' => 'Live Instructor-Led Online Training
Please call Cprime for location details
at 1-877-800-5221
, LOL', 'gtr' => '', ))
Live, Online Training
Dec 7th - 9th
8:30 AM - 4:30 PM ET
$1895(usd)

Request Private Group Training