Figma UI UX Design Essentials
- الوصف
- أقسام الدرس
- رأي
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 courseدرس فيديو
-
2Getting started with Figma trainingدرس فيديو
-
3What is Figma for & does it do the coding?درس فيديو
-
4Whats the difference between UI and UX in Figmaدرس فيديو
-
5What we are making in this Figma courseدرس فيديو
-
6Class project 01- Create your own briefدرس فيديو
-
7Class project 01- Create your own briefدرس نصي
-
10The basics of type & fonts in Figmaدرس فيديو
-
11Rectangles Circles Buttons Rounded corners in Figmaدرس فيديو
-
12How to use color in Figmaدرس فيديو
-
13Strokes plus updating color defaults in Figmaدرس فيديو
-
14Object editing and how to escape in Figmaدرس فيديو
-
15Scale vs Selection Tool in Figmaدرس فيديو
-
16Frames vs Groups in Figmaدرس فيديو
-
17Class project 02- Wireframeدرس فيديو
-
18Class project 02- Wireframeدرس نصي
-
19Where to get Free icons for Figmaدرس فيديو
-
20Matching the stroke of our iconsدرس فيديو
-
21How to use Plugins in Figma for iconsدرس فيديو
-
22Class project 03 - Iconsدرس فيديو
-
23Class project 03 - Iconsدرس نصي
-
41Color Inspiration & the eyedropper in Figmaدرس فيديو
-
42How to create a color palette in Figmaدرس فيديو
-
43How to make gradients in Figmaدرس فيديو
-
44How to create & use Color Styles in Figmaدرس فيديو
-
45Class Project 07 - Colors & Columnsدرس فيديو
-
46Class Project 07 - Colors & Columnsدرس نصي
-
47Font on Desktop vs Browser Figmaدرس فيديو
-
48What fonts can I use plus font pairing in Figmaدرس فيديو
-
49What common font sizes should I choose in web designدرس فيديو
-
50How to make Character Styles in Figmaدرس فيديو
-
51Lorem ipsum & Placeholder text in Figmaدرس فيديو
-
52Useful things to know about text in Figmaدرس فيديو
-
53How fix missing fonts in Figmaدرس فيديو
-
54Class project 08 - Textدرس فيديو
-
55Class project 08 - Textدرس نصي
-
56Drawing tips and tricks in Figmaدرس فيديو
-
57Squircle buttons with ios rounded courses in Figmaدرس فيديو
-
58Boolean Union Subtract Intersect Exclude Pathfinder in Figmaدرس فيديو
-
59What is the difference Union vs Flatten Figmaدرس فيديو
-
60Class Project 09 - Making stuffدرس فيديو
-
61Class Project 09 - Making stuffدرس نصي
-
62Smart Selection & Tidy up in Figmaدرس فيديو
-
70Autolayout & Constraintsدرس فيديو
-
71Class project 11 - Buttonsدرس فيديو
-
72Class project 11 - Buttonsدرس نصي
-
73Auto Layout for spacingدرس فيديو
-
74How to use constraints in figmaدرس فيديو
-
75Combining Nested frames Auto Layout & Constraints in Figmaدرس فيديو
-
76Adding Text Box Autoheight to Autolayout in Figmaدرس فيديو
-
77Class Project 12 - Responsive Designدرس فيديو
-
78Class Project 12 - Responsive Designدرس نصي
-
79Nice drop shadow & Inner drop shadow effects in Figmaدرس فيديو
-
85What are components in Figmaدرس فيديو
-
86Updating & Changing & Resetting your componentsدرس فيديو
-
87You can’t kill main components in Figmaدرس فيديو
-
88Where should you keep your main components in Figmaدرس فيديو
-
89Intro to the forward slash / naming convention in Figmaدرس فيديو
-
90Class Project 14 - Componentsدرس فيديو
-
91Class Project 14 - Componentsدرس نصي
-
101How to add a popup overlay modal in Figmaدرس فيديو
-
102How to make & prototype a tool tip in Figmaدرس فيديو
-
103What are Flows in Figmaدرس فيديو
-
104Slide in mobile nav menu overlay in Figmaدرس فيديو
-
105Class project 17 - Prototypingدرس فيديو
-
106Class project 17 - Prototypingدرس نصي
-
107How to pin navigation to top in Figmaدرس فيديو
-
108How to make horizontal scrolling swipe in Figmaدرس فيديو
-
109Automatic scroll down the page to anchor point in Figmaدرس فيديو
-
112The difference between animation & micro interactionsدرس فيديو
-
113Animation with custom easing in Figmaدرس فيديو
-
114Class Project 18 - My Second Animationدرس فيديو
-
115Class Project 18 - My Second Animationدرس نصي
-
116How to make animated transitions in Figmaدرس فيديو
-
117Class Project 19 - Page transitionدرس فيديو
-
118Class Project 19 - Page transitionدرس نصي
-
119Micro interactions using interactive components in Figmaدرس فيديو
-
120Micro interaction toggle switch in Figmaدرس فيديو
-
121Micro Interaction burger menu turned into cross in Figmaدرس فيديو
-
122Class Project 20 - Micro interactionدرس فيديو
-
123Class Project 20 - Micro interactionدرس نصي
-
125How to export Images out of Figmaدرس فيديو
-
126How to share you document with clients & stakeholdersدرس فيديو
-
127Talking to your developer early in the figma design processدرس فيديو
-
128Sharing Figma with developers & engineers handoffدرس فيديو
-
129What are the next level handoffs aka design systemsدرس فيديو
-
130Class Project 21 - Finish your designدرس فيديو
-
131Class Project 21 - Finish your designدرس نصي