Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Figma: The Absolute Beginner to Pro Class building an App

via Skillshare

Overview

PLEASE NOTE THERE IS A NEW VERSION OF THIS COURSE AVAILABLE! 

In this class, I am going to teach you everything you need to know about Figma as a UX/UI Designer. 

We will start from zero, setting up an account and getting to know the Figma structure. 

I will then introduce you to the brief as throughout the course we will work on a real project to create a tracking app from the first stroke to finish design.

We will start with setting up a wireframe and flowchart using Figma whereby I will show you all the Figma basics such as

  • Setting up frames
  • Adding shapes, text, and color
  • Vector drawings in Figma
  • learn about the layers panel, grouping, and positioning
  • The magic of auto layout
  • Using pages in Figma for structure
  • Creating simple flow charts

We will then bring the wireframe alive and set up the UI Design, where we will get to know powerful features such as

  • Styles for your color and typography settings to create a hierarchy
  • Setting up Grids in Figma
  • Learn about components and variants, a must for any UX/UI Designer
  • Use constraints to test your design on different screen sizes
  • Learn how to use the Figma community section
  • Clipping and fixing elements for presentation mode 

To finish off I will show you how to create a team library and share your files with your design and development team the right way. 

In under two hours, you will find out everything about Figma that you need to tackle any project.  Let's start!

© moonlearning.io with moon learning

Syllabus

  • 0000 Figma Intro
  • NEW VERSION AVAILABLE!
  • 0101 What Is Figma? Who Does the Coding?
  • 0102 Course Project – What We Will Build
  • 0103 Getting Figma – Registration Process
  • 0104 Figma Working Structure
  • 0105 Figma in the Browser vs Figma App
  • 0106 Setting up First Frames
  • 0107 Useful Shortcuts Pan, Zoom and More
  • 0108 Adding Shapes to a Frame
  • 0109 Duplicating
  • 0110 Drawing in Figma
  • 0111 Creating Groups
  • 0112 Adding and Styling Text
  • 0113 Positioning Alignment and Nudging
  • 0114 Changing Colour Strokes and Fills
  • 0115 Creating Styles in Figma
  • 0116 Working with Components and Istances make into comp and overrides
  • 0118 Pages in Figma
  • 0119 Creating a Simple Flowchart With a Plugins
  • 0120 Figma Community Section
  • Note: Before we start with auto layout
  • 0121 Auto Layout Introduction
  • 0122 Nested Auto Layout – Building a Nested Card
  • 0123 Finishing off Our Wireframe
  • 0124 Organizing our File to Start the UI Design
  • 0125 Which Frame Size Should I Use?
  • 0126 Setting up Grids in Figma
  • 0127 Colour Styles and Naming Conventions
  • 0128 Setting up a Typescale
  • 0129 Images in Figma
  • 0130 Responsive Layouts With Constraints
  • 0131 Boolean Operations in Figma
  • 0132 Nested Components and Variants
  • 0133 More About Variants Creating the Calendar Bar
  • 0134 More Constraints Creating a Responsive Calendar
  • 0135 Scaling in Figma Building the Mood Pages
  • 0136 Clipping Content Building the Magazine Pages
  • 0137 Presentation Mode with Scrollable and Fixed Elements
  • 0138 Figma Mirror – Preview on Your Device
  • 0139 Sharing Files With Designers and Developers
  • 0140 Figma Inspect Panel
  • 0141 Exporting Assets
  • 0142 Figma Team Library
  • 0143 Setting up a Thumbnail
  • UPDATE: Auto Layout
  • Thank You

Taught by

Christine Vallaure

Reviews

Start your review of Figma: The Absolute Beginner to Pro Class building an App

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.