Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Introduction to Figma Workspace
Figma is the industry-standard design tool used by over 90% of product design teams globally. It replaced Sketch and Adobe XD because it's browser-based (no installation needed), real-time collaborative (multiple designers can work on the same file simultaneously), and free for individuals. Before diving into design techniques in later modules, you need to understand Figma's workspace, key concepts, and organizational patterns. This is your 'orientation day' - by the end, you'll be able to navigate the interface, create basic frames, and understand how professional design files are structured.
Getting Started with Figma
Start at figma.com and create a free account. Figma has three main products: Figma Design (for UI design - this is what we'll use throughout the course), FigJam (a collaborative whiteboard for brainstorming, journey maps, and workshops), and Figma Slides (for presentations). The free 'Starter' plan gives you 3 Figma files and unlimited FigJam files - enough to complete this entire course. When you open a new design file, you'll see the canvas (the infinite workspace), the left panel (layers and pages), the right panel (design properties), and the toolbar (tools and actions). Think of the canvas as an infinite whiteboard where you'll place your designs. Unlike traditional software where you design page-by-page, Figma lets you place multiple screens, components, and design explorations all on the same canvas - organized visually by how you arrange them.
Start low-fi to iterate fast. Only go high-fi once layout is validated.
Key Figma Concepts to Understand Now
- Frames: The fundamental building block in Figma. A Frame is a container that can be any size - think of it as a screen, a section, or a component boundary. Click 'F' to create a frame, and choose from preset sizes (iPhone 14, Desktop 1440px, etc.) or draw a custom size
- Layers: Every element you add (text, shapes, images) becomes a layer in the left panel. Layers can be nested inside frames, grouped, and reordered. Clean layer naming is a professional habit - name layers descriptively ('Header/Logo' not 'Rectangle 47')
- Pages: A single Figma file can contain multiple pages - use them to organize your work. A typical structure: Page 1 = Cover, Page 2 = Wireframes, Page 3 = Designs, Page 4 = Components, Page 5 = Prototypes. Pages keep large files manageable
- Styles: Reusable color values, text formatting, shadow effects, and grid settings. Instead of manually typing #229c6b for your brand blue every time, create a color style called 'Primary/Blue' and apply it everywhere. Change the style once and it updates everywhere - this is essential for consistency
- Components: Reusable design elements (buttons, cards, inputs) that maintain a master-instance relationship. Edit the master component and all instances update automatically. We'll dive deep into components in Module 7-8
- Auto Layout: A system for creating responsive, flexible frames that adjust their size and spacing automatically when content changes. Think of it like CSS Flexbox for Figma. Auto Layout is what separates amateur Figma work from professional Figma work - we'll master it in later modules
Professional File Organization
How you organize your Figma files communicates your professionalism and makes collaboration possible. Professional designers follow consistent file structures. The standard approach uses a Cover Page (project name, status, last updated, team members), a Research & Insights page (personas, journey maps, competitive screenshots), a Wireframes page (all wireframe iterations, organized chronologically), a Designs page (current high-fidelity screens, organized by user flow), a Components page (all reusable components and their variants), a Prototype page (interactive prototypes with flow documentation), and an Archive page (old iterations you want to keep but remove from active view). Within each page, organize spatially: place related screens close together, use clear section headings (add a large text label like 'Login Flow' above related screens), and maintain consistent spacing between frames. This structure seems like overkill for personal projects, but building this habit now means you'll be ready for team collaboration from day one.
Practical Exercise - Figma Workspace Setup
# Figma Workspace Setup: Professional File Architecture
# Goal: Configure a production-standard Figma file from scratch
## STEP 1 - Create your free Figma account
Go to figma.com → Sign up (free Starter plan)
Open a new Design File → Name it: "UI/UX Course - [Your Name]"
## STEP 2 - Create 6 pages (double-click each to rename)
Page 1: 📋 Cover
Page 2: 🔍 Research & Insights
Page 3: 📐 Wireframes
Page 4: 🎨 Designs
Page 5: 🧩 Components
Page 6: 🗂️ Archive
## STEP 3 - Build your Cover page
On the Cover page, press F → draw a frame 1440 × 900px
Add text elements:
- Project name (H1, bold, large)
- Status badge: "In Progress" (filled rectangle + text)
- Last updated: today's date
- Your name
## STEP 4 - Set up the Design page
Create 3 frames for mobile screens:
- Press F → choose "iPhone 14" preset (390 × 844px)
- Name frames: "01-Onboarding" / "02-Login" / "03-Home"
- Space frames 80px apart horizontally
## STEP 5 - Enable a layout grid on your frames
Select a frame → Right panel → Layout Grid → (+)
Configure: Columns | Count: 4 | Gutter: 16px | Margin: 16px
This is the mobile grid you'll use for all wireframes.
## STEP 6 - Create one Color Style
Pick any blue: press K (color picker) → choose a blue
In the right panel, click Style (+) → name it "Primary/Blue"
This style can now be applied to any element with one click.
## KEY RULE
Layer names matter from day one. Rename every element:
"Rectangle 23" → "Card/Background"
"Text 14" → "Header/Title"
Good naming is a non-negotiable professional habit.Quick Quiz - UX Foundations & Design Thinking
Tip
Tip
Practice Introduction to Figma Workspace in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Practice Task
Note
Practice Task - (1) Write a working example of Introduction to Figma Workspace from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Common Mistake
Warning
A common mistake with Introduction to Figma Workspace is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready ui ux code.
Key Takeaways
- Figma is the industry-standard design tool used by over 90% of product design teams globally.
- Frames: The fundamental building block in Figma. A Frame is a container that can be any size - think of it as a screen, a section, or a component boundary. Click 'F' to create a frame, and choose from preset sizes (iPhone 14, Desktop 1440px, etc.) or draw a custom size
- Layers: Every element you add (text, shapes, images) becomes a layer in the left panel. Layers can be nested inside frames, grouped, and reordered. Clean layer naming is a professional habit - name layers descriptively ('Header/Logo' not 'Rectangle 47')
- Pages: A single Figma file can contain multiple pages - use them to organize your work. A typical structure: Page 1 = Cover, Page 2 = Wireframes, Page 3 = Designs, Page 4 = Components, Page 5 = Prototypes. Pages keep large files manageable