Figma UI Design Tutorial: Get Started in Just 24 Minutes!
Summary
TLDRThis 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
🛠 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.
📚 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.
🔍 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.
🖋 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.
🎨 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.
Mindmap
Keywords
💡Figma
💡Collaboration
💡Interface Design
💡Templates
💡Mobile Companion App
💡UI and UX
💡Design Principles
💡Free Resources
💡Icons
💡Non-Contact Deliveries
💡Unsplash
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
Weitere ähnliche Videos ansehen
Master Figma UI Design in 15 Minutes | This Tutorial Is For You!
Figma Tutorial: A Beginners Tutorial (2023 UI UX Design)
Canva से Thumbnail बना कर Daily 500₹ Earn करे | How To Earn Money With Canva |Canva Tutorial In 2024
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 5
Learn Framer in 20 Minutes (Crash Course)
SketchUp - Tutorial for Beginners in 13 MINUTES! [ FULL GUIDE ]
5.0 / 5 (0 votes)