figma milestone - kendria miller
ken
Created on March 10, 2023
More creations to inspire you
ANCIENT EGYPT
Learning unit
MONSTERS COMIC "SHARING IS CARING"
Learning unit
PARTS OF THE ANIMAL CELL
Learning unit
PARTS OF A PROKARYOTIC CELL
Learning unit
PARTS OF THE PLANT CELL
Learning unit
Transcript
Let's Learn AboutFigma!
A simple yet straightforward tutorial on the basics of Figma by Kendria Miller.
Index
Starting from "Learning Objectives," we'll make our way through the various learning lessons then put our skills to use by creating our sandbox landing page for a website on a desktop.
Figma Activity
Page 22
Introduction
Page 3
Lesson 1: Figma
Page 6
Lesson 2: Terminology
Page 10
Glossary
Page 36
Quiz
Page 29
Introduction
Figma
What Are We Learning?
Throughout the course, we will develop our understanding of how Figma works, learning the terminology behind its controls and UI/UX vocabulary. Then, we will jump into the tutorials so you can create your first simple design layout. To wrap things up, there is a short quiz to analyze your understanding with the course. If needed, there is a gloassary at the end of the course as well.
Introduction
- Learn the basics of Figma's mechanics
- Grasp Figma & UI/UX terminology
- Implement learned knowledge by crafting a design in Figma
Learning Objectives
Figma
For a Brief Overview...
- Header
- Body
- Footer
- Page
- Gutter
- Column
- Border
- Padding
- Margin
- Toggle Buttons
- Visual Hierarchy
- Auto Layout
- Properties
- Redlining
- Component
- Instance
- Variants
- Grid (Rule of Eights)
- Container
- White Space
- Proximity
Terminology
What is Figma?
Lesson 1
Here, we're learning about what the program's functions do and what they are used for.
Well...What is Figma, Exactly?
Lesson 1
What is Figma?
Understanding Its Purpose
A Background on Figma
Figma's premise is similar to Adobe products such as Illustrator or Indesign if you have used them. Both encapsule the same mechanics such as the shape creation tool, detailed design options and so on.Learning the in's and out's of the program is vital in the UI/UX or any technical design world as this is one of the main components to create user interfaces, prototypes for landing pages, and more.Regarding prototypes, being able to interact with the landing page and see it from a user's perspective adds a nice element of helpfulness for the designer.
Lesson 1
What is Figma?
That being said, Figma has many aspects to it that may be confusing to new learners if they haven't used a similar program. Some of these features include auto layout, creating components, variants, instances, and much more. In order to fully understand the program, we must learn the terminology as it will ease the learning process.
What Features Are in Figma?
0
Lesson 1
What is Figma?
In conclusion, Figma may seem a bit intimidating at first but will be worth it in the end as the program will enhance your UI/UX design skills.
Summary
Lesson 1
Summary on Figma's Program
Let's move on to Lesson 2!
Figma and UI/UX Terminology
Lesson 2
In this section we'll be going over the various vocabulary used for Figma and in the UI/UX design world.
Functions
To begin, learning terminology related to the program and field are very useful. As mentioned, knowing the principles first will make the learning process easier. At the time, will improve your knowledge on the UI/UX design field.
Lesson 2
Figma and UI/UX Terminology
Lesson 2
Figma and UI/UX Terminology
The top of a webpage that contains large fonts and logos. Also accompanied by the navigation bar and additional important information.
Header
The large area (usually center) of the page that contains most of the unique content.
Body
Footer
Page
The bottom part of a webpage that usually contains information about the website, contact information, etc.
Lesson 2
Figma and UI/UX Terminology
The document that can be viewed through web browsers in HTML language.
The spacing between columns
Gutter
Lesson 2
Figma and UI/UX Terminology
The vertical dimensions of the lines within a grid.
Column
The thickness of the stroke around an object.
Border
Padding
Margin
The spacing between bounds of an element and its child elements.
Lesson 2
Figma and UI/UX Terminology
The vertical spacing between the bounds and main content of a webpage.
An interactive button that is typically used to turn a setting or function on or off.
Toggle Button
Lesson 2
Figma and UI/UX Terminology
Reusable interactive or non-interactive design elements. Object is always marked with the color purple.
Component
A copy of the component linked to the original.
Instance
Variants
Grid
Component combinations within a single set with various properties to instances.
Lesson 2
Figma and UI/UX Terminology
Structure with a series of lines that divide a page into modules based on columns and rows.
Used as a measure of increasing or decreasing sizing in increments of 8. Industry standard makes editing simpler.
Rule of Eights
Graphic depicting the "Rule of Eights" by designsystems.
Lesson 2
Figma and UI/UX Terminology
The changeable aspects behind a variant. It is important to label them properly so the program can recognize the commands.
Properties
Displays guides for sizing, spacing, and margins of the elements. Very crucial as this function allows you to align your elements so they flow properly.
Redlining
White Space
Visual Hierarchy
The open, unused space surrounding an object. Makes room for proximity.
Lesson 2
Figma and UI/UX Terminology
Arranging objects in the order of their importance.
A function within Figma that allows changes and arrangements in frames.
Auto Layout
Hopefully the terminology section wasn't too long for you! Now that the tough part is done, we can move onto creating our first project in Figma!
Summary
Lesson 2
Figma and UI/UX Terminology
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.
Interactive Video Tutorials
Figma Activity
In this section, you'll be able to watch the videoes and follow along as you complete the tasks. By the end, we should have a finished design of a landing page.
For Our Figma Project We'll Be Creating This Design:
Figma Activity
Interactive Video Tutorials
pic of final result
Of Course, Yours May Look A Little Different!
Create Styles
View Figma Tutorials
Figma Activity
Interactive Video Tutorials
Create Components
Create Variants for a Component Set
Practice Using Auto Layout for Elements
Set up layout
See Final Results
First, let's watch some tutorials then create our first design in Figma!
Activity Outline
Figma Activity
Interactive Video Tutorials
Layout Grids Tutorial
Figma Activity
Interactive Video Tutorials
Components Tutorial
Figma Activity
Interactive Video Tutorials
Auto Layout Tutorial
Figma Activity
Interactive Video Tutorials
Variant Tutorial
This is a bit of a longer video, so feel free to skim through as you can re-watch it later if needed.
Quiz
With everything we've learned so far, it's time to put those skills to the test!Be sure to tally up your scores and see how you do!
This feature allows the creator to adjust spacing between the lines (vertically) on grids. What is it?
Redlining
Properties
Gutter
Question 1/5
Quiz
By implementing Color Styles
By implementing Components
Question 2/5
Quiz
Right!
How do you create interactive elements for your design?
By implementing Auto Layout
Text tool
Frame tool
Shape tool / Pen tool
Question 3/5
Quiz
Right!
Which tool allows you to draw a shape?
CTRL + Z
CTRL + C or ALT then drag
Question 4/5
Quiz
SHIFT
Which keys (or commands) allow you to duplicate items?
Right!
The diamond Icon
The half-moon icon
The two square icon
Question 5/5
Quiz
Right!
Which icon allows you to create components?
Results
Quiz
If you got a few wrong answers, take a look at the vocabulary (or glossary) and tutorials again!
Good Job!
Glossary
All Terminology from Lesson 2
The bottom part of a webpage that usually contains information about the website, contact information, etc.
The document that can be viewed through web browsers in HTML language.
The spacing between columns
Vertical dimensions of elements.
The top of a webpage that contains large fonts and logos. Also accompanied by the navigation bar and additional important information.
Page
Header
The large area (usually center) of the page that contains most of the unique content.
Gutter
Body
Footer
Column
Glossary
All Terminology from Lesson 2
The vertical spacing between the bounds and main content of a webpage.
An interactive button that is typically used to turn a setting or function on or off.
Reusable interactive or non-interactive design elements.
A copy of the component linked to the original.
The thickness of the stroke around an object.
Toggle Button
Border
The spacing between bounds of an element and its child elements.
Component
Padding
Margin
Instance
Glossary
All Terminology from Lesson 2
Used as a measure of increasing or decreasing sizing in increments of 8. Industry standard makes editing simpler.
The changeable aspects behind a variant. It is important to label them properly so the program can recognize the commands.
Displays guides for sizing, spacing, and margins of the elements. Very crucial as this function allows you to align your elements so they flow properly.
The open, unused space surrounding an object. Makes room for proximity.
Component combinations within a single set with various properties to instances.
Properties
Variants
Structure with a series of lines that divide a page into modules based on columns and rows.
Redlining
Grid
Rule of Eights
White Space
Glossary
All Terminology from Lesson 2
Arranging objects in the order of their importance.
Visual Hierarchy
Function within Figma that allows changes and arrangements in frames.
Auto Layout
Arranging objects in the order of their importance.
Arranging objects in the order of their importance.
Congratulations!
Through all the hard work you've done, you now know the basics of Figma!
Be sure to continue practicing! This module will always be here as a refresher if you forget anything!
Right!
Right!
Right!
Right!
Wrong!
Wrong!
Wrong!
Wrong!
Wrong!