Figma UI UX Design Essentials
- Objectifs pédagogiques
- Sections du cours
- Avis
Hi there – my name is Dan Scott & welcome to Figma Essentials.
Together – you and me – are going to learn everything you need to get started working as a UX Designer using Figma.
We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly… we’ll cover the client expectations of you as a new UX designer.
This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step.
-
First we’ll describe the brief & how to work with a UX persona.
-
Then you’ll learn how to create simple wireframes.
-
From there we’ll look at how to implement colours & images properly in your designs.
-
You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps.
-
You’ll learn how to create your own icons, buttons & other UI components.
-
You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how.
-
We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!
-
We’ll build a simple Style Guide ready for client handoff.
-
You’ll understand how to make both simple & advanced micro interactions, page transitions & animations
Before the end of this course you will have made fully interactive prototypes
You will take a project all the way through – collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer.
We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.
I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio.
Alright – it’s time to upgrade yourself & go from Figma Zero to Figma Hero.
-
1Introduction to Figma Essentials training courseLeçon vidéo
-
2Getting started with Figma trainingLeçon vidéo
-
3What is Figma for & does it do the coding?Leçon vidéo
-
4Whats the difference between UI and UX in FigmaLeçon vidéo
-
5What we are making in this Figma courseLeçon vidéo
-
6Class project 01- Create your own briefLeçon vidéo
-
7Class project 01- Create your own briefLeçon de texte
-
10The basics of type & fonts in FigmaLeçon vidéo
-
11Rectangles Circles Buttons Rounded corners in FigmaLeçon vidéo
-
12How to use color in FigmaLeçon vidéo
-
13Strokes plus updating color defaults in FigmaLeçon vidéo
-
14Object editing and how to escape in FigmaLeçon vidéo
-
15Scale vs Selection Tool in FigmaLeçon vidéo
-
16Frames vs Groups in FigmaLeçon vidéo
-
17Class project 02- WireframeLeçon vidéo
-
18Class project 02- WireframeLeçon de texte
-
19Where to get Free icons for FigmaLeçon vidéo
-
20Matching the stroke of our iconsLeçon vidéo
-
21How to use Plugins in Figma for iconsLeçon vidéo
-
22Class project 03 - IconsLeçon vidéo
-
23Class project 03 - IconsLeçon de texte
-
41Color Inspiration & the eyedropper in FigmaLeçon vidéo
-
42How to create a color palette in FigmaLeçon vidéo
-
43How to make gradients in FigmaLeçon vidéo
-
44How to create & use Color Styles in FigmaLeçon vidéo
-
45Class Project 07 - Colors & ColumnsLeçon vidéo
-
46Class Project 07 - Colors & ColumnsLeçon de texte
-
47Font on Desktop vs Browser FigmaLeçon vidéo
-
48What fonts can I use plus font pairing in FigmaLeçon vidéo
-
49What common font sizes should I choose in web designLeçon vidéo
-
50How to make Character Styles in FigmaLeçon vidéo
-
51Lorem ipsum & Placeholder text in FigmaLeçon vidéo
-
52Useful things to know about text in FigmaLeçon vidéo
-
53How fix missing fonts in FigmaLeçon vidéo
-
54Class project 08 - TextLeçon vidéo
-
55Class project 08 - TextLeçon de texte
-
56Drawing tips and tricks in FigmaLeçon vidéo
-
57Squircle buttons with ios rounded courses in FigmaLeçon vidéo
-
58Boolean Union Subtract Intersect Exclude Pathfinder in FigmaLeçon vidéo
-
59What is the difference Union vs Flatten FigmaLeçon vidéo
-
60Class Project 09 - Making stuffLeçon vidéo
-
61Class Project 09 - Making stuffLeçon de texte
-
62Smart Selection & Tidy up in FigmaLeçon vidéo
-
70Autolayout & ConstraintsLeçon vidéo
-
71Class project 11 - ButtonsLeçon vidéo
-
72Class project 11 - ButtonsLeçon de texte
-
73Auto Layout for spacingLeçon vidéo
-
74How to use constraints in figmaLeçon vidéo
-
75Combining Nested frames Auto Layout & Constraints in FigmaLeçon vidéo
-
76Adding Text Box Autoheight to Autolayout in FigmaLeçon vidéo
-
77Class Project 12 - Responsive DesignLeçon vidéo
-
78Class Project 12 - Responsive DesignLeçon de texte
-
79Nice drop shadow & Inner drop shadow effects in FigmaLeçon vidéo
-
85What are components in FigmaLeçon vidéo
-
86Updating & Changing & Resetting your componentsLeçon vidéo
-
87You can’t kill main components in FigmaLeçon vidéo
-
88Where should you keep your main components in FigmaLeçon vidéo
-
89Intro to the forward slash / naming convention in FigmaLeçon vidéo
-
90Class Project 14 - ComponentsLeçon vidéo
-
91Class Project 14 - ComponentsLeçon de texte
-
101How to add a popup overlay modal in FigmaLeçon vidéo
-
102How to make & prototype a tool tip in FigmaLeçon vidéo
-
103What are Flows in FigmaLeçon vidéo
-
104Slide in mobile nav menu overlay in FigmaLeçon vidéo
-
105Class project 17 - PrototypingLeçon vidéo
-
106Class project 17 - PrototypingLeçon de texte
-
107How to pin navigation to top in FigmaLeçon vidéo
-
108How to make horizontal scrolling swipe in FigmaLeçon vidéo
-
109Automatic scroll down the page to anchor point in FigmaLeçon vidéo
-
112The difference between animation & micro interactionsLeçon vidéo
-
113Animation with custom easing in FigmaLeçon vidéo
-
114Class Project 18 - My Second AnimationLeçon vidéo
-
115Class Project 18 - My Second AnimationLeçon de texte
-
116How to make animated transitions in FigmaLeçon vidéo
-
117Class Project 19 - Page transitionLeçon vidéo
-
118Class Project 19 - Page transitionLeçon de texte
-
119Micro interactions using interactive components in FigmaLeçon vidéo
-
120Micro interaction toggle switch in FigmaLeçon vidéo
-
121Micro Interaction burger menu turned into cross in FigmaLeçon vidéo
-
122Class Project 20 - Micro interactionLeçon vidéo
-
123Class Project 20 - Micro interactionLeçon de texte
-
125How to export Images out of FigmaLeçon vidéo
-
126How to share you document with clients & stakeholdersLeçon vidéo
-
127Talking to your developer early in the figma design processLeçon vidéo
-
128Sharing Figma with developers & engineers handoffLeçon vidéo
-
129What are the next level handoffs aka design systemsLeçon vidéo
-
130Class Project 21 - Finish your designLeçon vidéo
-
131Class Project 21 - Finish your designLeçon de texte