Introducing Figma: A Beginners Tutorial (2023 UI UX Design)

Focused View

Rino LivingWithPixels

29:45

186 View

1 - Introduction

1 - Creating a Basic Structure on a 12 column Grid.mp4

06:25

1 - download the exercise files here.zip

2 - How to work with images and vector icons.mp4

03:51

3 - How to work globally with Text layers Fonts.mp4

07:26

4 - Using Auto Layout to create layouts that auto adjust.mp4

06:26

5 - Creating a floating icon row with Auto Layout.mp4

05:37

Description

Let's create a home page together to learn Figma as we go

What You'll Learn?

Creating a Basic Structure on a 12 column Grid with Shapes
How to work with import and editing images and vector icons
How to edit and work globally with Text layers & Fonts
Combining icons and text with Auto Layout and making it scalable

Who is this for?

Whether you're new to design or looking to switch to Figma from another tool, this tutorial is for you

More details

Description
Learn the basics of Figma, the popular design tool for UI and UX designers. In addition to its powerful design features, Figma is also known for its ability to stay ahead of the latest design trends. With this mini course, we will using the latest features in Auto Layout to create a fictional home page for a gym website.

We'll mainly cover the essential features of Figma, including how to work with auto layout, the color systems and the grid.

By the end of this mini course, you'll have a solid understanding of how to use the basics of Figma. So, whether you're a beginner or a designer looking to switch to Figma, this mini course is for you.

I've made sure that you need to use all the essential features in Figma to create this design.
We are keeping it simple by just creating one page with some images, svg icons and text layers.

The steps that we are going to cover:

Creating a Basic Structure on a 12 column Grid
How to work with images and vector icons
How to work globally with Text layers & Fonts
Using Auto Layout to create layouts that auto adjust
Creating a floating icon row with Auto Layout

Since we are working globally for all the fonts and colors you can easily change the design and make it something unique. Please use your own creativity to create something different and show it to me in the projects overview.
Who this course is for:
Whether you're new to design or looking to switch to Figma from another tool, this tutorial is for you

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, I'm Rino and I've been in design for over more than 10 years now. I started with design as a hobby, but I quickly realised that this was more than a hobby for me. So that's why I went to design school and studied: Communication and Multimedia Design at the University of Applied Sciences in Rotterdam (The Netherlands).I was so passionate about it that I started my first YouTube channel (in Dutch) about design. I grew this channel to about 30.000 subscribers and after that I created my first English channel where I already have more than 100.000 subscribers. In total I’ve generated over 10 million total views on YouTube alone.Because of this YouTube channel I was approached by big influencers and brands, and I got the opportunity to start my own company and work for brands like: Coca Cola, ICI Paris XL, RTL and a lot of big influencers (with around 100k to 1m followers).Because of these projects and the YouTube videos I've learned how to create in an efficient way, and most importantly: in real life scenarios. I create everything myself and I don't rely on templates, which gives me the freedom to create whatever I want. If you like this approach, then I think you will like my courses.I hope you like my courses!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.