Figma UI Design Tutorial: Get Started in Just 24 Minutes!

Summary

This tutorial video offers a beginner-friendly guide to designing apps and websites using Figma, a free and collaborative tool. It suggests starting with copying existing designs to learn interface creation, utilizing templates and free resources for practice. The video demonstrates basic Figma functionalities, such as creating frames, rectangles, and text, and encourages viewers to explore the tool through practice and theory, ultimately designing their own apps inspired by real-world examples.

Takeaways

• 🌐 Start with Figma: The video introduces Figma as a free and collaborative tool for designing apps and websites, suitable for beginners and professionals alike.
• 🔍 Figma's Advantages: Figma offers several benefits including being free for solo users, fast, platform-independent, and having a mobile app for design previews.
• 📚 Learn by Copying: The video suggests starting by copying existing designs to understand how they are created, which is a practical approach for beginners to learn design principles.
• 🔍 Utilize Templates: The speaker recommends using existing templates from resources like figmaresources.com to jump-start the design process without starting from scratch.
• 🎨 Customize and Edit: Once a template is duplicated to your Figma account, you can customize and edit it to suit your needs, learning the interface and tools as you go.
• 📏 Frame Tool Basics: The frame tool is fundamental in Figma for creating design elements of specific sizes, such as those for iPhone models.
• 🎨 Color and Shape Tools: The video demonstrates how to use color pickers, rectangle tools, and corner radius adjustments to mimic design elements like backgrounds and cards.
• 🔍 Positioning and Spacing: It's important to learn how to position elements accurately by using Figma's measurement tools and snapping features to match the original design's layout.
• 📝 Typography in Design: Text elements are crucial in design, and the video shows how to match font types, sizes, and styles to existing designs for consistency.
• 🔄 Copying and Pasting Elements: The process of copying and pasting elements within Figma is emphasized as a quick way to replicate design components.
• 🚀 Next Steps in Design: After becoming comfortable with Figma, the video encourages viewers to design their own interfaces, starting with apps they use and want to improve.

Q & A

What is the main focus of the video?

The main focus of the video is to guide viewers on the best way to start practicing app and website design using Figma, providing step-by-step instructions for beginners.

Why is Figma recommended for beginners according to the video?

Figma is recommended for beginners because it is free to start, has good collaboration features, is fast, works on any computer, and has a mobile companion app for previewing designs.

What is the advantage of using Figma's web-based nature for design collaboration?

Figma's web-based nature allows multiple people to work on the same design file simultaneously, which is a significant advantage for collaboration.

How can viewers get started with Figma if they are completely new to design?

Viewers can get started by copying other designs, which allows them to see how a design was created and understand various effects and principles without starting from scratch.

What is a recommended approach to practice design using Figma as suggested in the video?

The video suggests starting with a template from a resource like figmaresources.com, copying it to one's Figma account, and then practicing by duplicating and editing elements within the template.

How does the video guide viewers to find and use a frame in Figma?

The video instructs viewers to use the frame tool (activated by pressing 'F' on the keyboard), select a template like iPhone 11 Pro Max for standard sizing, and then start designing within that frame.

What is the purpose of using the eyedropper tool in Figma as demonstrated in the video?

The eyedropper tool is used to sample colors from existing elements in the design, allowing viewers to apply the same colors to their own design elements for consistency.

How can viewers find and use free icons in their Figma designs according to the video?

Viewers can find free icons by searching online for 'free Figma icons', copy the desired icon from the source file, and paste it into their own Figma file.

What is the process to incorporate images from Unsplash into a Figma design as shown in the video?

The process involves searching for an image on Unsplash, copying the image, pasting it into the Figma file over the desired area, and then repositioning and resizing as needed.

How does the video help viewers understand and apply text settings in Figma?

The video demonstrates how to find and apply text settings such as font, size, and weight by inspecting existing elements and then copying these settings to new text elements.

What is the final advice given in the video for those who have become comfortable with Figma?

The final advice is for viewers to start designing their own interfaces in Figma, such as redesigning an app they use, and to look up specific effects or features they want to implement.

Outlines

00:00

🛠 Introduction to Figma for Design Beginners

The video provides an introduction to using Figma, a free tool for designing apps and websites, which is advantageous due to its collaborative features, compatibility across devices, and mobile app for design previews. The speaker suggests starting with Figma by copying existing designs to understand the creation process and encourages viewers to ask questions or share recommendations in the comments. A free newsletter subscription for UI/UX tips is also promoted.

05:02

📚 Learning Through Design Copying in Figma

The speaker recommends copying other designs as a learning method in Figma, emphasizing that it's a practical way to understand design creation without the pressure of originality for beginners. The process of starting a new Figma file by duplicating an existing template, such as a food delivery app UI, is demonstrated. The video also covers basic Figma tools like frames and rectangles, and the importance of using the eyedropper tool to match colors and effects from existing designs.

10:02

🔍 Advanced Design Techniques in Figma

This section delves into more advanced design techniques within Figma, such as creating perfect circles, positioning elements with precision using keyboard shortcuts, and adjusting corner radii for rounded edges. The speaker also discusses the process of finding and incorporating icons and images into designs, utilizing resources like Google and Unsplash, and the importance of resizing and centering elements to match a reference design.

15:03

🖋 Typography and Text Effects in Figma

The paragraph focuses on adding and formatting text in Figma, including selecting the right font, size, and style. It explains how to adjust text width and alignment, as well as how to match text properties from an existing design. The process of creating a button with specific dimensions, text style, and color is also covered, highlighting the use of duplication and the eyedropper tool for consistent design elements.

20:07

🎨 Finalizing the Design and Next Steps

The final paragraph discusses the process of finalizing the design by adding elements like buttons and text, and adjusting their properties to closely resemble a reference design. The speaker suggests using free resources to find designs to copy and learn from, and encourages viewers to start designing their own interfaces in Figma once they are comfortable with the tool. The video concludes with an invitation to subscribe to a free newsletter for more UI/UX tips and to engage in the comments section for further questions or feedback.

Keywords

💡Figma

Figma is a cloud-based design tool primarily used for user interface and user experience design. It allows designers to create, collaborate, and share designs in real-time. In the video's context, Figma is the main tool being discussed for designing apps and websites, emphasizing its advantages such as being free to start, fast, and compatible across different operating systems.

💡Collaboration

Collaboration refers to the process of working together to achieve a common goal. In the script, the term is used to highlight Figma's feature that enables multiple people to work on the same design file simultaneously, which is beneficial for team projects in UI/UX design.

💡Interface Design

Interface design is the process of designing the visual elements and user interactions of a digital product, such as an app or website. The video focuses on teaching viewers how to start practicing interface design using Figma, with step-by-step instructions for creating and editing design elements.

💡Templates

Templates in the context of design are pre-made design files that serve as a starting point for creating new designs. The script mentions using templates as a way to get started with Figma, allowing beginners to practice by copying and modifying existing designs rather than starting from scratch.

💡Mobile Companion App

A mobile companion app is a supplementary application designed to work alongside a primary application or service, often providing additional functionality or previews. The video mentions Figma's mobile app, which allows users to preview their designs on a mobile screen, enhancing the design process.

💡UI and UX

UI stands for User Interface, which is the visual and interactive part of a digital product. UX stands for User Experience, which is the overall experience of a user interacting with that product. The video aims to provide tips for beginners in UI and UX design, offering a free newsletter for further learning.

💡Design Principles

Design principles are fundamental guidelines that inform the creative process and ensure consistency and usability in design work. The script suggests that beginners might not have grounding in these principles, recommending starting with copying other designs to learn how they are applied.

💡Free Resources

Free resources refer to materials or tools that are available at no cost, often used for learning or enhancing one's work. The video script encourages the use of free templates and icons found online to aid in design practice within Figma, demonstrating how to incorporate these resources into one's work.

💡Icons

Icons are visual representations, often simple and symbolic, used to convey information quickly and intuitively in a design. The video mentions finding and using free Figma icons to enhance mobile interface designs, showing how to copy and paste them into a Figma project.

💡Non-Contact Deliveries

Non-Contact Deliveries is a service model where goods are delivered without direct interaction between the delivery person and the recipient, often due to safety or convenience reasons. In the script, it is used as an example of a feature that might be designed in a food delivery app UI.

💡Unsplash

Unsplash is a popular online platform that offers free, high-quality, and royalty-free images that can be used in design projects. The video script provides an example of how to find and incorporate an image from Unsplash into a Figma design for a more realistic and appealing interface.

Highlights

Introduction to practicing app and website design in Figma with step-by-step instructions.

Figma's advantages: free to start, good for solo work, supports collaboration, fast, cross-platform compatibility, and mobile app availability.

Invitation for viewers to comment with questions or recommendations about Figma effects or UI/UX tips.

Subscription to a free newsletter for more UI/UX tips and resources.

Quick signup process for Figma using a Google account.

Recommendation to start practicing by copying other designs to understand creation processes and design principles.

Use of Figma's web-based interface to copy and duplicate files for personal editing.

Demonstration of rearranging screens within a Figma file and zooming in/out for better visibility.

Explanation of Figma's frame tool for creating design elements with specific shapes and sizes.

Tutorial on creating a rectangle with a specific background color using the eyedropper tool.

Guidance on adjusting corner radius for design elements to match a reference design.

Creating and positioning a circle element with exact dimensions and alignment in Figma.

Importing and using icons from external Figma resources for mobile interface design.

Incorporating free images from websites like Unsplash into Figma designs.

Adding and formatting text elements in Figma, including font size, style, and color.

Creating buttons with specific dimensions, text, and styling to match a design.

Advice on using free resources for design elements and practicing by copying and understanding existing designs.

Encouragement to move from copying to creating original designs in Figma as comfort with the tool grows.

Suggestion to redesign existing apps as a next step to apply newly acquired Figma skills.

Offer of a free newsletter subscription for ongoing UI/UX learning and support.

Transcripts

hi in this video i'm going to show you

the best way to start practicing

designing apps and websites in figma

so in this video i'm going to give you

step-by-step instructions you can

literally follow click by click i'll

only tell you the stuff that you need to

get started designing interfaces so

let's get started so we're going to be

looking at a tool called figma and it

has a few advantages one most

importantly for you it's free to get

started if you're working by yourself

we like using it at agn smart because it

also has really good collaboration so we

can have multiple people working on the

same design file at the same time it's

also really fast it works on any

computer whether you have a mac or a pc

or linux whatever you have it works

right in the browser and it also has a

mobile companion app so you can preview

your designs on a mobile screen so there

are really no downsides to starting with

a tool like figma as you're watching the

video if you have any questions about

how to do a particular effect in figma

or any comment or something that you

want to recommend please put it in the

comments below and if you want to find

out more tips about ui and ux make sure

to subscribe to our free newsletter the

link to that is in the description below

and it's a great resource for anyone

starting an ui and ux so this is the

website you just go to figma.com

and i'm already signed in but you can

sign up very quickly even with your

google account and get started but

before we jump right into figma i want

to show you the way i would recommend to

get started so you just want to start

practicing

now for that i'm not going to ask you to

start designing something from scratch

because i believe that would be very

hard with someone especially if you're a

complete beginner in this space

and you have no grounding in design

principles and things like that so the

best way for you to get started is

actually to copy other designs and the

reason this is so good is because

you can see how this design was created

so that when you get stuck on something

you can actually see how this person who

created this file achieved a particular

effect or look inside of figma and this

is totally fine in the beginning because

you're not going to be

selling these you're not going to be

saying that you designed something when

you copied it from someone else this is

just for your own practice and it's a

really good way to get started so as you

can see here this is what figma looks

like after you log in and start a file

and i haven't even shown you how to

start a file because i want you to use

another file as your starting point as

opposed to a blank file and like i said

we're not going to cover everything that

you can see here on the screen in terms

of what all the various buttons do we're

just going to focus about how you can

get started now to do that

i wanted to start off with a template

and what i literally did was i typed

into google sigma resources and i got a

bunch of results i clicked on a few of

them and the third one called literally

figmaresources.com

is a really good one and i have it open

here so when you look at that you'll

find a bunch of free templates and this

is a great thing about figma there are a

lot of free resources on the web that

you can use to start practicing to

incorporate into your designs so you

don't have to start from scratch

and i picked one of these that is a food

delivery app ui

and i have it open here so the way it

works with finger ma is because it's all

web-based you can literally click this

button here that says copy to figma

and it will copy that file over to your

figma account well first it's going to

open it in a new browser tab where you

can see it and there might be even like

other people viewing this file at the

same time but you can see here at the

top that it says view only and we want

to be able to make edits to this so what

we do in this case when we're looking at

someone else's file is we just click on

the name

and then we say duplicate to your drafts

so if you're signed into figma it's just

going to create a copy of this file in

your own figma account and that's

exactly what i did

and i have it open in this tab right

here so you can see it no longer says

view only like it says in that tab and i

can start editing this all right so now

we have a copy of that file that we're

going to use as our starting point so

in figma as you can see i can just

scroll up and down to see the different

screens

in this file and i can very easily

rearrange them you'll notice that in the

original file

they were placed side by side and i have

more of a vertical arrangement and i can

just do that by grabbing the title and

moving it around with my mouse cursor

like that

i can also zoom in and zoom out with a

pinch gesture on my trackpad that way i

can see all of my screens at once or i

can zoom in to see a particular screen

so let's say now i want to start copying

this design what do i do well just to

give you the basics on the left here i

just have

a bunch of layers and then when i select

an element i get the settings for that

element on the right okay

so what i want to do now is create a

rectangle like this

for my own design

now this has a specific shape and this

is called a frame so the first tool you

need to know about is the frames here or

you hit f on your keyboard and anything

i press will show here on

the bottom left corner so you know

exactly what i pressed

to activate a particular tool and then i

can start drawing a size but now i don't

know how to get the exact same size as

this and so what i'm going to do is i'm

going to delete this

and

i'm going to click on this

screen that exists already

and if i look at the frame here and i

click on that it shows me that this is

using an iphone 11 pro max right so this

is a standard size and what i can do in

figma

is i can hit f again to go into

the frame mode and then i can select

here from a bunch of templates and i'll

select iphone 11 pro max and then it

automatically puts in a frame of the

perfect size i'll just place that right

next to the original frame and i can

start copying the design right

so i can see here that they have a fancy

design element here with the purple but

let's keep things simple for now and

let's just assume i just want a purple

background right so the easiest way i

could accomplish this

is

i could either give this whole frame a

background color or i could draw a

rectangle

that's purple right that can be in my

background so if i want to draw a

rectangle i can do that from here you

can see that this is the rectangle tool

and it already says like r next to it so

i'm going to hit r on my keyboard

and draw a rectangle

right so i don't want it to take up i

don't need it to take up the whole

screen this is fine now i can see by

default this is purple

so i'll click on it and see here like i

said whenever i select something the

settings for that element will be on the

right so i'll see here that here is the

gray color and i don't want it to be

gray

i want it to be that purple so i can

either try to change things here or i

can use the eyedropper and this is

something that you might already know

from something like photoshop if you've

ever used a image editing tool or

anything like that so i'll use that and

i'll pick just this color right so this

is good enough for now

next i want to create this card so this

is just another rectangle essentially

right so i'll just draw another

rectangle here and try to have it to be

approximately the same height so i'll

notice here that well the color is

different and i don't have the fancy

rounding so let's start with the color

since we already covered that and this

looks like a very light gray it's not

white because i can see that the circle

is white so what i can do quickly is

again

i'll grab the eyedropper tool select

here

so now i have the same color that's on

the left here right but i can notice

also that the corners here it has these

nice rounded corners that i don't have

and for that right under the

position and the dimensions so if i

change this this is just changing

the x coordinates and i'm just going to

do command z or control z if you're on a

mac to go back

and these are the y coordinates and by

the way

i can change these by clicking and

dragging you you see the cursor turns to

this

sideways arrow and i can click and drag

left and right to change these values or

i can type them in right

i can also change the width

and the height

and here is the angle for rotation but

what i want to focus on right now is the

corner radius right so this is that

rounding effect and so with the corner

radius tool i can adjust how rounded

these corners are now i'm getting closer

to the look of that original file right

but i can see on the bottom that i have

these rounded corners but i don't want

them because the original one doesn't

have it now there is a fix for this in

figma but the easy and cheating solution

would be to just extend this beyond the

frame and then it's hidden outside the

frame

of the phone screen right but if you

want to do it the correct way

you would come to the corner radius

and you would click on independent

corners and what this allows you to do

is set each corner independently and so

if i change this to zero you'll see that

it's no longer rounded and if i want to

keep the top rounded but not the bottom

then i just change the bottom ones right

and now it looks correct

now the next thing would be to create

the circle and the way to create a

circle is from the shapes menu you have

an ellipse which you can also do with

the letter

o on your keyboard now by default you'll

be able to draw

kind of a circle with any

aspect ratio but if you want to be a

perfect circle all you need to do is

hold shift on your keyboard as you're

dragging and it'll just be a perfect

circle

now if i want to find out the exact

dimensions of this i can click once and

i can see on the left that i've selected

the whole group i can double click again

and i can still see that i haven't

selected the circle i keep double

clicking and now i have the circle and

it shows me that it's 104 by 104 so i'll

go here

and change the dimensions

of my circle here and i'll type 104

and now i have something with the exact

dimensions now i want to know where to

place this right how high should it be

like because i don't know a lot about

spacing right now and i just want to

copy what the person did

so again i'll double click here

double click again and now i've selected

this and i want to know how far it is

from that edge and the way i can do that

is i hold option on a mac or alt on a

windows computer and that will show me

the distance from all of the neighboring

elements

if i hover over the uh the text here you

can see it's showing me it's 24 pixels

um if i select the card it's showing me

the distance between

all of the edges here right and so what

i want to know is that it's 64 pixels

away from the top and so i select my

circle and then i can start while

holding option i can hit the down arrow

and

now i have 64 right and i can see that

left and right it's perfectly centered

and figma will help you do this if you

move something it will snap to the

center as you can see here now i have my

circle in the middle right let's quickly

change the color now we're experts at

this

uh this is just white so this is very

easy

uh now there's also here an icon

and icons are things that you'll often

need when designing mobile interfaces

because you're you'll wanna have an icon

for a home screen or something like that

and

you can literally google free figma

icons and again you'll have a result

from google that says here are 460 free

icons and this is also a figma file so i

can literally come here this is a figma

file i just hid the interface here by

right clicking you can hide the

interface and i can come here and select

an icon let's say i want to copy this

one i literally just use the copy

shortcut which is command c or control c

i come back to my file

and i paste that element right so now i

have that icon and figma also helps you

with positioning it automatically

centers things as you're moving them

around so if i resize this

without any modifier keys

it might distort the image so i'll do

command z and what i'll do instead is

hold shift like we did with the circle

that way it'll always resize perfectly

and what i can also do is that if i

already have this centered i can hold

both shift and option

or alt on a pc and start resizing and it

will resize from the center out right so

this will just save you a little bit of

time right

so now i have my icon or i can

alternatively just grab this icon double

click double click

and double click again and that now i've

selected this icon i can delete the one

that i already have

and

paste it here

and now i have that same icon so it's

really important for you to have a place

to go to to find icons and this one that

i found here i literally found it in

three seconds so i'm sure there are

other free icons because this might not

have everything that you need

and another thing that would be very

handy for you is

somewhere to get free images to use in

your designs because as you can see here

uh those will come in very handy in a

lot of applications

and so let's say that i wanted to get an

image here instead of this blank color

since i can't do this fancy effect yet

and we don't want to focus on fancy

effects just yet right so one good

website is called unsplash and i just

typed delivery in search and i found

this image here and with figma it's very

easy to paste in an image

literally all i have to do is come to

unsplash right click on the image

then i can copy the image

go back to my figma file

i select the background so that it

pastes it over this particular area and

i hit command v or control v if you're

on a pc

and then i can just reposition this

i'm not going to worry too much about

you know perfect positioning or fancy

effects but this is how easy it is to

get an image in right

now let's quickly finish

this screen now the next thing that i

need is text here that says non-contact

deliveries and the way i get text is

through the t icon here i can just hit t

on my keyboard

and

text so

non-contact

deliveries

right now obviously this doesn't look

the same as the other image there are a

few things i want to find out first is

the

size of the text so to do that double

click double click

and then i look here at

the settings so one i can see it's using

sf pro display

so you may or may not have the font

locally on your machine that the person

is using

but chances are you will

and i can see that the size is 34. and

it's bold right so i'm gonna apply the

same setting so i'm gonna click here

type 34

and

i'm gonna use sf pro

text

i'm just typing it but you can also

select it here

and i'm gonna change this to

bold right

now this doesn't look exactly the same

because this is over two lines and

by default sigma will just have the text

be as long

or as wide as the text is long and i can

change that by just

dragging this to resize it and this gets

me the effect that i want i just need to

center it now

and i want to know how

far away it is from that

circle right so we saw this already

i'll just double click double click and

hold option and i can see it's 24 pixels

away

and

i'll just nudge this up

a little bit and now it's perfect and i

think the color

is different here

so

again

i'll hit the color hit the eyedropper

and i think this is dark purple

and now

i have that color right

excellent i think this might be doing

some other effects to the text but we're

not going to worry about it right now

we're going to need to create something

that looks like

the paragraph right here and so i'll hit

the t icon again and by default it's

gonna use the same settings as i used

before just for speed i'll copy this

text here so you don't have to wait for

me to type it out and as you can see it

was very wide and i can resize this

and i can also see here how i can find

out how wide this is by double clicking

on it and then seeing okay the width is

three seven four so i go back here type

three seven four

and that's exactly the same width and

i'll just center it

and i'll see how far away this element

was from the top 25

so

if i nudge it up using my arrow keys

now it's right

and as you can see the screen is coming

along and you can do this as someone

who's never

used figma before or any design tool

now i need a button so for that

uh i'm gonna hit the rectangle key again

on my keyboard and just do this

right and then i'm going to cheat and

look at the dimensions of the this

button so 374 again

and 56

so i'm going to do that

374

and 56

and now

i'm going to center it

and see how far it is

from the element above it so that's 48

but my element is different here so

that's okay you don't need to worry

about that so

what i can do is have the height here

adjust automatically

to the text and i think i have an extra

line that was the reason

so now i can

let me remember what this number was

again

so this is 48

and

48 here would be like this

all right perfect

so now i'm gonna grab the color

and let me see if i can also steal the

corner radius so this shows eight

perfect i'll just type it here

now i need some text to go on top and

let me see what the settings for that

are

so sf protext semi-bold oh sorry

and

15.

so i'll do that real quick

oh it actually copied it over because i

started editing that

and so i say

order now

all caps and i'll just center this

and make it white that's very easy i

don't need to grab that color

and

now i'll just copy this and you can copy

an element real quick either by

selecting it doing command c command v

and it'll paste it right over it so if i

move it here you can see it because it's

white on white

or i can

hold option or alt and that'll also

duplicate the element so this is a

little bit faster let me change the

color of that

to be

the color of the dismiss

so i'll just grab that from here

right and move it under the button

change it to dismiss

the last thing i want to see is how far

away it was so that was 32

and

oh sorry no from the button it's 32

and there

now you've created something that's very

very close to the original design as you

can see starting with a template that's

already in figma allows you to cheat in

the beginning

and copy over elements and you should

just look for free resources that have

designs of mobile apps of web apps and

start copying these and see how you can

recreate these elements and over time

you'll start to internalize all of the

principles that are in place like how to

space text elements far apart you'll be

able to do it just by looking at it more

or less of course at some point it's

really good if you start learning about

the actual theory of design but this is

a way to get started without being

bogged down so maybe you can switch

you'll do a little bit of practice a

little bit of theory and start applying

what you learned but this is one way to

get started without knowing any theory

and just by copying existing designs now

the next step from this would be to

start designing things in figma when

you're comfortable with it and you can

pretty much recreate everything that you

see so you might see an app that you

like that's not already created in figma

so maybe you look at instagram or any

other app that you like or tick-tock or

anything and you can start designing

that in figma and when you get stuck you

google it you find out how this fancy

effect was created or you can google can

i do you know x or y in figma can i play

a video in figma for example if i want

to do something like tik tok and you'll

start to familiarize more and more with

the tool and the step after that is to

look at an app that you think could be

improved so maybe your banking app is

really really bad and you've always

wanted to improve it well now you know

how to use figma enough to start putting

together a new design so i hope this

video was helpful for you please let us

know in the comments

if you have any questions about next

steps something you got stuck on and if

you want more tips and tricks about ui

and ux we have a free newsletter that

you can subscribe to the link is in the

description below and it's very helpful

for someone who's just starting out like

you because we go out and we read all of

the news

about ui and ux and we just send you the

best stuff so if you're just starting

out make sure to subscribe to the

newsletter and i'll see you in the next

video

[Music]

you