Figma UI/UX Design Courses - Zetlan Technologies

People Love with Figma 🎨

Figma is the world's #1 collaborative design tool — used by Google, Airbnb, Uber, and millions of designers globally. Master vector design, Auto Layout, component systems, variables, interactive prototyping, Dev Mode, and real-time collaboration from beginner to expert level.

FigmaAuto LayoutComponentsVariablesPrototypingDev ModeDesign SystemsFigJamVariantsPlugins

Choose Your Level

3 Courses — One Platform

Pick the course that matches where you are. Each builds on the last — complete all three to go from zero to Figma expert.

🌱Beginner

Figma for Beginners

Start from absolute zero. Learn the interface, tools, components, prototyping, and sharing in one practical journey.

7 Modules

62 Classes

50+ hrs

⚡Intermediate

Figma UI UX Essentials

Level up with design systems, variables, interactive components, Dev Mode, and production-ready handoff.

8 Modules

55 Classes

60+ hrs

🚀Expert

Mastering Figma

End-to-end expert UI/UX design — Auto Layout, advanced components, plugins, capstone project, and full design workflow.

1 Expert Module

60 Classes

72+ hrs

Curriculum

Figma for Beginners — 7 Modules

Introduction — What is Figma and why it leads the market
Installing & signing up — web vs desktop app
Creating a new file — team project vs drafts
Frames — the building block of every Figma design
Spacing & Alignment — snap, distribute, and smart guides
Groups vs Frames — when to use which
Components — creating and reusing design elements
Styles — colour, text, effect, and grid styles
Scaling objects & Figma keyboard shortcuts

The Start Screen — recents, teams, and templates
Toolbar — Select, Frame, Shape, Pen, Text, and Hand tools
Layers & Pages panel — naming, grouping, and locking layers
Assets panel — local and shared component libraries
Design panel — fill, stroke, effects, layout grid
Prototype panel — connections and interactions
Code panel — inspect values for handoff
Canvas navigation — zoom, pan, and zoom shortcuts
Version History — restoring previous file states

Creating a new project and file inside a team
Importing Sketch files — shapes, text, and symbols
Working with Teams — invite, permissions, and roles
Using community templates and remixing

Working with Frames — device presets and custom sizes
Drawing Shapes — Rectangle, Ellipse, Polygon, Star, Line
Drawing Icons with the Pen tool — bezier curves & paths
Text — fonts, weights, line-height, letter-spacing
Masking images and shapes — alpha and outline masks
Importing images and icons into Figma
Colour — HEX, HSL, RGB, gradients, and image fills
Styles — applying and managing shared styles
Setting up Components — master and instances
Constraints for responsive design — fix, scale, and stretch
Version Control — observe, restore, and branch

Designing a Slide-out Menu with scroll-to interaction
Designing an on-screen Overlay with close interaction
Designing a comments section with conditional display
Designing Multiple Artboard States for different viewports
Giving the design its own unique personality — tokens & brand

Creating a prototype — connections, interactions, and triggers
Viewing prototype on mobile device via Figma Mirror
Device frame preview — choosing device model and orientation
Sharing a design — view, comment, and edit permissions
Allowing stakeholders to comment directly on frames
Exporting assets — PNG, SVG, JPG, PDF, and 2x/3x resolutions

Shapes, icons, and Neumorphic design in Figma
Creating icons using Boolean operations — Union, Subtract, Intersect
Neumorphic design technique — shadows and light depth
Figma Plugins — finding, installing, and using plugins
Time-saving plugins — Unsplash, Iconify, Content Reel, Autoflow
Isometric designs, random content, and avatar generators
Figma Community — browsing, duplicating, and sharing files

Curriculum

Figma UI UX Design Essentials — 8 Modules

Get Started with Figma — account, plan, and workspace setup
Explore Figma Design — navigating the interface
Create Shapes — basic geometry and vector tools
Layer Properties — fill, stroke, effects, and blending
Copy and Duplicate Layers with position control
Groups and Frames — the difference and when to use each
Get Components from the Community and Marketplace
Use Components — instances, swapping, and detaching
Create a Menu Page with real navigation elements
Explore Iterations — multiple solutions in a single file
Share Designs for Feedback — link sharing and commenting

Use Pages for organising large-scale projects
Grids and Margins — column, row, and grid layout
Image fills, image placement, and Corner Radius
Text — Type Styles, Auto Height/Width, text links
Color Styles and Accessibility — contrast checking
Use Auto Layout — padding, spacing, fill/hug/fixed
Create and Use Components — master components workflow
Clip Content for scrollable containers and carousels
Override Properties on component instances
Create Icons with Vector Networks — node editing

What are Design Systems and why they matter
Create Color, Text, Effect, and Layout Grid Styles
Manage and Share Styles across team libraries
Guide to Components in Figma — best practices
Create and Use Variants — states and properties
Create Interactive Components with Variants
Explore and Create Component Properties
Name and Organize Components at scale
Variables — overview, collections, and modes
Create and Manage String, Number, and Color Variables
Apply Variables to designs — light/dark theming
Modes for Variables — switching themes instantly

Create Prototypes — triggers, actions, and transitions
Create Connections between frames and overlays
Set Interaction types — tap, drag, mouse enter/leave
Choose Transition Animations — Smart Animate deep-dive
Share Prototypes — prototype link and embed
Comment on Prototypes for async design reviews
Incorporate Feedback and update designs iteratively

Custom File Thumbnails for professional presentation
Invites and Sharing Permissions — view vs edit access
View-Only Editor for stakeholder access
Inspect Tab, Documentation, and Code snippets
Set Up Exports — PNG, SVG, PDF, and custom scales
Exporting assets batch and slice tools

Enter Dev Mode — toggling between design and dev view
Navigate Designs in Dev Mode — selecting layers
Inspect Designs — CSS, iOS, Android code generation
Use Dev Mode Extensions — Storybook, GitHub, Jira

Open Figma Designs inside VS Code
Inspect Figma Designs directly in the editor
Auto-Complete Code Suggestions from Figma data
View Comment Notifications in VS Code
Log Out and manage Figma for VS Code authentication

Navigate Designs in Dev Mode — deep dive
Code Snippets in Dev Mode — CSS, Swift, Kotlin
Compare Changes in Dev Mode — diff view
Link Dev Resources (Storybook, GitHub) to Layers

Curriculum

Mastering Figma — Expert UI/UX Design

Your Figma Account — setup, plan types, and settings
Figma vs FigJam — when to use each tool
Figma Desktop App & Mobile App — features and differences
Figma Pricing — Free, Professional, and Organisation tiers
Toolbar & Tools — all tools in depth
Pages, Layers & Frames — large-project organisation
Right Sidebar — Design, Prototype & Inspect panels in depth
Shape Tools — advanced vector editing and path operations
Text & Typography — type scales, OpenType features, variable fonts
Constraints — responsive design for multiple screen sizes
Pen & Pencil Tools — custom icon creation and illustration
Gradients — linear, radial, angular, and diamond fills
Image Manipulation — cropping, fills, exposure adjustments
Strokes & Rounded Corners — stroke position, dash, and gap
Effects — drop shadow, inner shadow, blur, and backdrop filter
Boolean Operations & Masks — complex shape creation
Layout Grids — 12-column, 8-point grid, and responsive grids
Creating Your First Prototype — full end-to-end flow
Interaction Types — navigate, overlay, swap, scroll, open URL
Scroll Behaviours — horizontal, vertical, and fixed elements
Prototype Settings — background, device, and starting frame
Basics of Auto Layout — stacks, wrapping, and absolute positioning
Basics of Components — master, variants, and properties deep dive
Figma Plugins to Speed Up Your Workflow — 10 essential plugins
Exporting Your Designs — slices, asset export, and batch export
Sharing Your Design File & Prototype — embedding and permissions
Capstone Project — build a complete product design from scratch

Design Products

People Love with Figma 🎨

Everything You Need to Design at Scale

3 Courses — One Platform

Figma for Beginners — 7 Modules

Figma UI UX Design Essentials — 8 Modules

Mastering Figma — Expert UI/UX Design

Ready to Design Products People Love?