Summary Figma UI Design Tutorial: Get Started in Just 24 Minutes!
0 view 0 purchase
Course
FIGMA UI DESIGN
Institution
FIGMA UI DESIGN
We will be using a tool called Figma, which comes with several advantages. Firstly, it is free, making it an excellent tool to get started. Secondly, it has impeccable collaboration capabilities, and multiple users can work on the same design file simultaneously.
The functionality of Figma is si...
Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2022)
AJ&Smart
In this tutorial, I will guide you on how to start practicing designing apps and
websites in Figma efficiently.
We will be using a tool called Figma, which comes with several advantages. Firstly,
it is free, making it an excellent tool to get started. Secondly, it has impeccable
collaboration capabilities, and multiple users can work on the same design file
simultaneously.
The functionality of Figma is similar to other web-based tools. You can copy a file
into your account by clicking on the "Copy to Figma" button.
To start practicing design using Figma, you don't have to start from scratch as
there are numerous free resources available on the web that you can use for
inspiration.
The first tool to use in Figma is the "Frames" feature. You can quickly access it
by pressing "f" on your keyboard. Selecting an element will display its settings on
the right-hand side of your screen.
For instance, to create a rectangle, select the Frames feature and draw the shape
as required for your design.
The way to create a circle in HTML is through the shapes menu, where you can find
an ellipse. Alternatively, you can create an ellipse using the letter "o" on your
keyboard. By default, the shape will have an arbitrary aspect ratio, but if you
desire to create a perfect circle, you can follow these simple steps:
Hold the shift key while drawing the ellipse
Extend the shape beyond the screen frame to hide the excess
Click once on the shape to select it and once more to enable editing
Once the shape has snapped to the center, it is now a perfect circle. The
dimensions of the circle can be viewed by selecting the circle and examining its
properties. To change the color of the circle, select it and choose a new color.
If you need additional graphics for your HTML project, you can find free images and
icons online. These resources can provide you with a plethora of design options
that are essential in creating engaging and interactive websites.
To add text to your HTML project, simply type in the desired text within a <p> tag,
or any other applicable HTML tag that defines text formatting. For example, if you
want to add the text "Noncontact Deliveries," you can use the following code:
<p>Noncontact Deliveries</p>
By default, the current settings will be used for this text. To save time, I will
copy and paste the content below so you don't have to wait for me to manually type
it out.
The text is very wide by default, but in Figma, it can be easily resized by
dragging the edges.
When starting a design project in Figma, it can be helpful to begin with a pre-
existing template to copy over elements. There are many free resources available
for mobile and web app designs that can be used to recreate and customize specific
design elements.
With practice, you will internalize the principles of design, such as spacing text
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller maheswaris. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $6.49. You're not tied to anything after your purchase.
