Figma UI Design Course

Learn Figma UI/UX Design through practical and project-based training at
Acrosys Technologies. This 40-day course covers Figma tools, responsive
layouts, components, design systems, mobile UI, dashboard design,
wireframing, prototyping, developer handoff and portfolio preparation.

40 Days Figma UI/UX Design Syllabus

Week 1: Figma Fundamentals

Day 1: Introduction to UI/UX and Figma

• Introduction to User Interface and User Experience Design


• Overview of the Figma design tool


• Understanding the Figma interface


• Creating a Figma account

Practical Exercise: Create a Figma account and explore the interface.

Day 2: Figma Tools and Navigation

• Move tool


• Frame tool


• Shape tools


• Pen tool


• Zoom and navigation controls

Practical Exercise: Practise using the Move, Frame, Shape and Pen tools.

Day 3: Frames and Layout Basics

• Creating frames


• Mobile and desktop frame sizes


• Understanding layers


• Basic layout structure

Practical Exercise: Design a simple mobile screen.

Day 4: Shapes and Vector Editing

• Creating basic shapes


• Boolean operations


• Editing vector points


• Using the Pen tool

Practical Exercise: Create simple icons using vector tools.

Day 5: Text Tool and Typography

• Using the Text tool


• Font selection


• Font size and weight


• Line height and letter spacing


• Typography hierarchy

Practical Exercise: Design a typography poster.

Day 6: Colours and Colour Theory

• Basic colour theory


• Primary, secondary and accent colours


• Colour harmony


• Using gradients


• Colour accessibility basics

Practical Exercise: Create a professional colour palette.

Day 7: Grids and Layout Systems

• Layout grids


• Columns, rows and margins


• Using the 8-point grid system


• Spacing consistency

Practical Exercise: Design a screen using an 8px grid.

Day 8: Constraints and Resizing

• Understanding constraints


• Horizontal and vertical resizing


• Responsive behaviour


• Fixed and scalable elements

Practical Exercise: Create a responsive card design.

Day 9: Auto Layout Basics

• Introduction to Auto Layout


• Padding and spacing


• Horizontal and vertical Auto Layout


• Responsive resizing

Practical Exercise: Create responsive buttons using Auto Layout.

Day 10: Components

• Creating components


• Instances


• Editing component properties


• Reusable UI elements

Practical Exercise: Create reusable buttons and cards.

Week 2: Components and Design Systems

Day 11: Component Variants

• Creating component variants


• Button states


• Default, hover, active and disabled states

Practical Exercise: Create multiple button states using variants.

Day 12: Assets Panel

• Using the Assets panel


• Managing reusable components


• Searching and organising design assets

Practical Exercise: Organise a complete set of design assets.

Day 13: Text and Colour Styles

• Creating text styles


• Creating colour styles


• Applying reusable styles


• Maintaining visual consistency

Practical Exercise: Create a basic UI style guide.

Day 14: Design Tokens

• Introduction to design tokens


• Colour tokens


• Typography tokens


• Spacing tokens


• Reusable style systems

Practical Exercise: Build a reusable design token system.

Day 15: Icons and Plugins

• Installing Figma plugins


• Using Iconify


• Using Feather Icons


• Managing icon consistency

Practical Exercise: Install and use Iconify and Feather Icons.

Day 16: Image Editing

• Importing images


• Image fill options


• Image adjustments


• Background removal tools

Practical Exercise: Create an e-commerce product card.

Day 17: Masks and Cropping

• Using masks


• Cropping images


• Creating custom image shapes


• Image composition

Practical Exercise: Create a promotional banner.

Day 18: Smart Selection

• Using Smart Selection


• Adjusting spacing automatically


• Reordering multiple elements


• Creating repeated layouts

Practical Exercise: Create a product list layout.

Day 19: Team Libraries

• Creating team libraries


• Publishing components


• Sharing styles


• Collaborating with team members

Practical Exercise: Publish and share reusable components.

Day 20: Mini Project 1

Project: Restaurant Landing Page

• Create a responsive landing page


• Use components and Auto Layout


• Apply colour and text styles


• Build reusable design elements

Week 3: User Interface Design

Day 21: Mobile UI Principles

• Mobile-first design


• Touch targets


• Screen spacing


• Mobile typography

Practical Exercise: Design a mobile login screen.

Day 22: Dashboard Design

• Dashboard layout principles


• Information hierarchy


• KPI cards


• Sidebar and content structure

Practical Exercise: Design an admin dashboard.

Day 23: Navigation Bars

• Top navigation


• Side navigation


• Bottom navigation


• Active and inactive states

Practical Exercise: Design a mobile bottom navigation bar.

Day 24: Forms and Input Fields

• Text fields


• Dropdowns


• Checkboxes


• Radio buttons


• Validation and error states

Practical Exercise: Design a registration form.

Day 25: Cards and Lists

• Card layout principles


• Product cards


• Content lists


• Responsive card layouts

Practical Exercise: Design an e-commerce product card.

Day 26: Tables and Data UI

• Designing data tables


• Headers and rows


• Sorting and filtering controls


• Pagination

Practical Exercise: Design an employee data table.

Day 27: Charts and Graphs

• Bar charts


• Line charts


• Pie charts


• Data visualisation principles

Practical Exercise: Create dashboard charts.

Day 28: Tablet UI Design

• Tablet screen sizes


• Adaptive layouts


• Responsive content structure

Practical Exercise: Design a tablet home screen.

Day 29: Desktop UI Design

• Desktop layout principles


• Multi-column layouts


• Sidebar and dashboard patterns

Practical Exercise: Design a CRM dashboard.

Day 30: Mini Project 2

Project: Hospital Management UI

• Design dashboard screens


• Create patient and appointment interfaces


• Use tables, cards and charts


• Apply a consistent design system

Week 4: UX Design and Prototyping

Day 31: UX Principles

• User-centred design


• Understanding user needs


• User goals and pain points


• User flow creation

Practical Exercise: Create a complete user flow.

Day 32: Wireframing

• Low-fidelity wireframes


• Screen structure


• Content hierarchy


• Wireframe best practices

Practical Exercise: Create low-fidelity wireframes.

Day 33: High-Fidelity Design

• Converting wireframes into final UI


• Applying colours and typography


• Adding components and images

Practical Exercise: Design a high-fidelity mobile application.

Day 34: Interactive Components

• Interactive component states


• Toggles


• Tabs


• Dropdown interactions

Practical Exercise: Create interactive toggles and tabs.

Day 35: Smart Animate

• Introduction to Smart Animate


• Page transitions


• Object movement


• Microinteractions

Practical Exercise: Create animated page transitions.

Day 36: Prototyping

• Connecting screens


• Prototype triggers


• Navigation actions


• Complete application flow

Practical Exercise: Create a complete application prototype.

Day 37: Developer Handoff

• Preparing designs for developers


• Inspect mode


• Exporting assets


• Design specifications


• Naming layers and components

Practical Exercise: Export assets and prepare a design handoff.

Day 38: Design Review

• UI review process


• Finding visual inconsistencies


• Improving spacing and alignment


• Accessibility review

Practical Exercise: Improve an existing user interface.

Day 39: Portfolio Preparation

• Organising Figma projects


• Creating project covers


• Writing short case studies


• Preparing portfolio presentations

Practical Exercise: Organise completed projects for a portfolio.

Day 40: Final Project Presentation

• Complete mobile application UI


• Complete desktop UI


• Interactive prototype


• Project documentation


• Final presentation and review

Beginner Practical Projects

• Login Screen


• Signup Screen


• Profile Page


• Calculator UI


• Weather Application

Intermediate Practical Projects

• E-commerce Application


• Food Delivery Application


• Banking Application


• Hotel Booking Application


• Hospital Management System

Advanced Practical Projects

• ERP Dashboard


• School Management System


• CRM Dashboard


• Inventory Management System


• AI Chat Application

Figma Plugins Covered

• Iconify


• Unsplash


• Remove BG


• Content Reel


• Autoflow


• Blush


• Charts


• Mockup Plugin


• Lorem Ipsum


• Stark for accessibility

Portfolio Projects

1. Restaurant Website UI


2. E-commerce Mobile Application


3. Banking Application


4. Hospital Management Dashboard


5. ERP Dashboard


6. AI Chat Application


7. Landing Page


8. Portfolio Website


9. Travel Booking Application


10. School Management System

Course Outcomes

After completing this 40-day Figma UI Design course, students will be able to:

• Design responsive websites and mobile applications


• Create reusable components and professional design systems


• Build interactive prototypes using Smart Animate


• Collaborate using Figma team libraries


• Create wireframes and complete user flows


• Design professional dashboards and SaaS products


• Prepare UI designs for developer handoff


• Build a strong UI/UX portfolio with real-world projects


• Prepare for UI/UX Designer, Product Designer and Figma Designer roles