Introduction - Figma for UX/UI Design
tutorial [Lesson 1]
Introduction to Figure
If you're looking for a design tool to use, there are many
options available, and Figure is one of them. This course aims
to introduce you to Figure and its features, giving you the
necessary knowledge to begin your first design project with
Figma. Let's jump right in!
Topics Covered
An introduction to Figure
Working with Figma
Adding art boards, frames, text, images, and more
Working with components and versioning
Prototyping within Figure
Setting up and working with teams and projects
Collaborating, sharing, and exporting
As you can see, we'll be covering a lot of ground, but we'll
begin by answering the most important question: What is
Figma?
What is Figma - Figma for UX/UI Design
tutorial [Lesson 2]
Introduction
Before delving into what Figma is, let's take a look at a generic
UX design workflow and see how Figma fits into that workflow.
UX, which stands for User Experience Design, is about diving
into the customer and figuring out what they need and what
their pain points are. This involves conducting research,
creating personas, and user flows. Once this information is
gathered, the next step is to wireframe and create a working
prototype, which can then be tested and iterated based on
feedback. Finally, the project is built.
,Figma fits squarely into this workflow by allowing designers to
create wireframes and low or high fidelity prototypes, share
them, gather feedback and iterate. There are many tools
available for designing and prototyping, such as Adobe XD,
Sketch, Proto.io, and Marvel, to name a few.
What is Figma?
Figma is a collaborative interface design tool that can be used
for UX design, website design, and app design. It allows for
real-time collaboration, versioning, commenting, and
prototyping. Figma also has a feature set that includes
components, effects, artboards (called frames in Figma),
pages, vector networks, and code.
Features of Figma
Components (called symbols in some applications)
Effects such as drop shadows and blurs
Artboards (called frames in Figma)
Pages
Vector networks
Real-time collaboration
Team projects and sharing
Commenting
Prototyping
Ability to view and copy code from certain features or
objects within the design
Figma for UX/UI Design tutorial - Course
file [Lesson 3]
If you want to access the exercise files folder, you'll find it
organized by chapter. Some chapters have fig files,
images, or are intentionally left blank. In each video, I'll
show you which fig files to open in Figma. To import a file
in Figma, log in to figma.com and click on "import" in the
upper left corner. Navigate to the exercise files folder and
select the appropriate fig file to import. You can then start
working on the file. While you don't need to open many of
, these files to follow the course, this is useful if you want
to jump in and start working with a specific file.
Setting up a project - Figma for UX/UI
Design tutorial [Lesson 4]
Getting Started with Figma
If you want to start using Figma, the first thing you need to do
is sign up for an account on the Figma website. Once you're
signed up and logged in, you'll be able to access the workspace
where you can create, work, and collaborate online.
Signing Up and Pricing
When you sign up, you'll see that Figma is currently free for
individuals. If you're working with a team, there are different
team packages available. You can start as an individual and
upgrade to a team package later on if needed.
The Workspace
Once you're logged in, you'll see the workspace on the Figma
website. The left side has a menu where you can create a new
file, import files, and access the desktop app. You can also
search through your projects and files and see recent drafts.
The right side has notifications and a help section where you
can access tutorials and help pages.
Enabling Local Fonts
If you want to work with fonts, you need to enable local fonts.
To do this, go to account settings and click on "download
installer" to enable local fonts. Once you've downloaded the
installer, install it, and local fonts will be enabled.
Creating Your First File
To create your first file, click on the plus sign in the upper left
corner of the Figma website. This will create a new file that you
can use for your first design project.
Libraries is a professional team feature that needs upgrading.
The design area is the canvas where rulers can be added by
going to the menu in the upper left corner. The menu has all
the commands, including view where rulers can be turned on
and off. Properties for everything being worked on can be
accessed to set the color of the canvas and other options.
tutorial [Lesson 1]
Introduction to Figure
If you're looking for a design tool to use, there are many
options available, and Figure is one of them. This course aims
to introduce you to Figure and its features, giving you the
necessary knowledge to begin your first design project with
Figma. Let's jump right in!
Topics Covered
An introduction to Figure
Working with Figma
Adding art boards, frames, text, images, and more
Working with components and versioning
Prototyping within Figure
Setting up and working with teams and projects
Collaborating, sharing, and exporting
As you can see, we'll be covering a lot of ground, but we'll
begin by answering the most important question: What is
Figma?
What is Figma - Figma for UX/UI Design
tutorial [Lesson 2]
Introduction
Before delving into what Figma is, let's take a look at a generic
UX design workflow and see how Figma fits into that workflow.
UX, which stands for User Experience Design, is about diving
into the customer and figuring out what they need and what
their pain points are. This involves conducting research,
creating personas, and user flows. Once this information is
gathered, the next step is to wireframe and create a working
prototype, which can then be tested and iterated based on
feedback. Finally, the project is built.
,Figma fits squarely into this workflow by allowing designers to
create wireframes and low or high fidelity prototypes, share
them, gather feedback and iterate. There are many tools
available for designing and prototyping, such as Adobe XD,
Sketch, Proto.io, and Marvel, to name a few.
What is Figma?
Figma is a collaborative interface design tool that can be used
for UX design, website design, and app design. It allows for
real-time collaboration, versioning, commenting, and
prototyping. Figma also has a feature set that includes
components, effects, artboards (called frames in Figma),
pages, vector networks, and code.
Features of Figma
Components (called symbols in some applications)
Effects such as drop shadows and blurs
Artboards (called frames in Figma)
Pages
Vector networks
Real-time collaboration
Team projects and sharing
Commenting
Prototyping
Ability to view and copy code from certain features or
objects within the design
Figma for UX/UI Design tutorial - Course
file [Lesson 3]
If you want to access the exercise files folder, you'll find it
organized by chapter. Some chapters have fig files,
images, or are intentionally left blank. In each video, I'll
show you which fig files to open in Figma. To import a file
in Figma, log in to figma.com and click on "import" in the
upper left corner. Navigate to the exercise files folder and
select the appropriate fig file to import. You can then start
working on the file. While you don't need to open many of
, these files to follow the course, this is useful if you want
to jump in and start working with a specific file.
Setting up a project - Figma for UX/UI
Design tutorial [Lesson 4]
Getting Started with Figma
If you want to start using Figma, the first thing you need to do
is sign up for an account on the Figma website. Once you're
signed up and logged in, you'll be able to access the workspace
where you can create, work, and collaborate online.
Signing Up and Pricing
When you sign up, you'll see that Figma is currently free for
individuals. If you're working with a team, there are different
team packages available. You can start as an individual and
upgrade to a team package later on if needed.
The Workspace
Once you're logged in, you'll see the workspace on the Figma
website. The left side has a menu where you can create a new
file, import files, and access the desktop app. You can also
search through your projects and files and see recent drafts.
The right side has notifications and a help section where you
can access tutorials and help pages.
Enabling Local Fonts
If you want to work with fonts, you need to enable local fonts.
To do this, go to account settings and click on "download
installer" to enable local fonts. Once you've downloaded the
installer, install it, and local fonts will be enabled.
Creating Your First File
To create your first file, click on the plus sign in the upper left
corner of the Figma website. This will create a new file that you
can use for your first design project.
Libraries is a professional team feature that needs upgrading.
The design area is the canvas where rulers can be added by
going to the menu in the upper left corner. The menu has all
the commands, including view where rulers can be turned on
and off. Properties for everything being worked on can be
accessed to set the color of the canvas and other options.
