NCCS Course

UI/UX (Figma)

UI/UX Designing Outline

Tools:

Figma

06 Weeks Course Outline (Figma)

https://drive.google.com/file/d/145chQJxSBF8jfxB24TS9n7dHo5PIvOej/view?usp=drive_link

Brief Contents (03 Months Course Outline)

Class 1:

What is UI/UX Design?
Difference between User Experience and User Interface Design?
UI/UX Designer Vs. Developer?
What is Figma?
What is Prototype or Mockup?
Why is Figma better than other tools for UI?
Creating a Figma account.
Creating & Naming a Figma design file?
Introduction to Figma Menus, and Interface?
Creating Frames & Frame Sizes in Figma File

Class 2:

Figma Shapes
How to Draw Shapes in Figma?
Editing Shapes in Figma
Selection in Figma
Colors in Figma
Applying Colors in Figma
Clipping Mask
Playing the Prototype Mode

Class 3:

What is Color Theory?
Generating Color Pallettes from Website
Adding Color Pallettes to Figma File
Using Color Pallettes on Design
Saving Color as Styles
Eye Dropper/Color Picker Tool
Basic Type Tool
Make a Poster and use Color Theory

Class 4:

What is Typography?
Figma Type Tool, and its Properties
Saving Fonts as Styles
Installing your Own Fonts
Task: Design a Brochure keeping in mind the studied principles

Class 5:

Use of Pen Tool in Figma
Bend Tool
Paint Bucket Tool
Creating a Tree, and Leaves Using Pen Tool

Class 6:

Strokes and its properties in Figma
What are Sitemaps?
Website Navigation and its types
Creating a sitemap in Figma

Class 7:

Introduction to Wireframing
Hi-Fi & Low-Fi Prototype
Wireframe’s role in User Experience
Sketching the Wireframe for a shopping Website

Class 8:

Introduction to Layout Design
What is a Responsive Website?
Introduction to Layout Grid
What is Grid’s role in UI?
How to create a 12 Column Grid in Figma?
Explore Figma Plugins

Class 9:

Jakob’s Law of Design
Constraints in Figma
Creating High Fidelity Webpage Prototype from the sketched Wireframe

Class 10:

Margins & Padding in UI
Use of Auto Layout
Creating a Responsive Webpage using Auto Layout

Class 11:

Create a Wireframe for Mobile App Page
Designing a Mobile App Page in Figma

Class 12:

Introduction to Boolean Operations
Design Shapes with Boolean Operations
Design Icons in Figma with Boolean Operations

Class 13:

Introduction to Figma Components & Variants
Making Components & Using them
Creating Variants

Class 14:

Exploring the Interactive Component Properties
What is Layer Component Property?
What is Text Component Property?
What is Swap Instance Property?

Class 15:

How to create responsive Designs for different screen sizes?
Make a responsive web page design for Desktop, Tablet and Mobile

Class 16:

Prototyping in Figma
Prototyping Basics
Prototype View Preferences
User Flows
Basic Animations (Navigation, Hover, Click)

Class 17:

Advanced Prototyping
Explore “After Delay”
Create Mobile App Pages Animation

Class 18:

Introduction to Smart Animate
Creating Slider Animation Website Using Smart Animate
Create a Mobile App Using Smart Animate

Class 19:

Introduction to “Figmotion”
Create animations using Figmotion
Saving and Exporting Animations as Video or Gif Files

Class 20:

What is Material Design 3?
What are Design Tokens?
Types of Design Tokens?
Why we use Tokens?
Style Token Naming Conventions
Exploring the “Token Studio” Plugin

Class 21:

Creating a “Typography Design System” using Token Studio
Creating a “Color System” using Token Studio
Explore “Material Design Theme Builder” Plugin
Saving and Exporting Token Styles

Freelancing Guidelines:

Class 22:

Introduction to Freelancing & Freelance Platforms
How to Create your Portfolio on Behance
Difference between Upwork and Fiverr
Fiverr Account Creation & Gig Making
Tips & Tricks on Fiverr

Class 23:

Introduction to Upwork
Upwork Account Creation
Proposal Writing & Bidding Techniques on Upwork
Mistakes to Avoid on Upwork as beginner
Tips to win more Jobs on Upwork

Class 24:

More Topics on Freelancing

Sessions 25 - 32

One Month Guided Project with Trainer’s Support (02 days per week):

Trainer will check the progress of assigned individual Project and guide about further work.

About

Policies