60-Day Figma Mastery Curriculum Study Plan

 

A comprehensive 60-Day Figma Mastery Curriculum. Each day contains a Lecture & Theory section to explain core concepts and mental models, followed by step-by-step Lecture-Style Technical Instructions to execute the practical work directly inside Figma.

📅 Phase 1: Foundations (Days 1–15)

Day 1: Interface Basics

Lecture & Theory

Figma is a cloud-based vector graphics editor and prototyping tool. Unlike traditional offline desktop design tools, Figma operates on a canvas model where real-time multiplayer collaboration is standard. To master Figma, you must understand its four primary structural regions:

1. The Canvas (Center): An infinite digital space where all artboards, UI assets, and scratchpad elements reside.

2. Left Sidebar: Houses the Layers Panel (a spatial tree showing depth and hierarchy of visual elements), Assets Panel (reusable components), and Page Selector.

3. Top Toolbar: The action bar containing tool selection (Move, Frame, Shape, Pen, Text, Hand, Comments).

4. Properties Panel (Right Sidebar): Context-aware panel divided into Design, Prototype, and Inspect/Dev tabs. Its fields dynamically update based on what object is currently selected on the canvas.

Step-by-Step Instructions

1. Launch Figma: Navigate to figma.com in your browser or open the desktop app. Click Drafts in the top left, then click the + Design file button in the top right corner.

2. Explore the Toolbar: Locate the toolbar at the top left. Hover over the tools to learn their default keyboard shortcuts:

   • Move / Scale: V / K

   • Frame tool: F

   • Rectangle tool: R

   • Text tool: T

3. Create Your First Frame: Press F to activate the Frame Tool. Look at the Properties Panel on the right side. Under the Frame dropdown options, click iPhone 14 / 15 Pro (393 × 852 px). A white rectangular artboard will appear on your canvas.

4. Master Canvas Navigation:

   • Pan: Hold Spacebar, left-click, and drag across the canvas (or hold down the middle scroll wheel and drag).

   • Zoom In/Out: Hold Control (Windows) or Command (macOS) and scroll your mouse wheel up/down. Alternatively, press Z and click to zoom in, or hold Option / Alt while pressing Z to zoom out.

   • Zoom to Fit All: Press Shift + 1 to center all drawn elements on your screen.

   • Zoom to Selection: Select your newly created iPhone frame and press Shift + 2.

Day 2: Frames

Lecture & Theory

In traditional vector design (like Illustrator or Photoshop), layout boundaries are governed by "Artboards." In Figma, artboards are replaced by Frames. A Frame is a specialized vector container that possesses its own coordinate system, clipping boundaries, background fills, layout grids, and nesting capabilities.

Crucially, Frames can be nested inside other Frames (e.g., a Screen Frame contains a Card Frame, which contains a Button Frame). This nested structure forms the backbone of responsive layout design and structural nesting in UI design systems.

Step-by-Step Instructions

1. Insert Screen-Level Frames:

   • Press F to activate the Frame tool.

   • In the right properties panel, under Mobile, click iPhone 15 Pro.

   • Press F again, go to the Desktop section in the right panel, and click MacBook Air.

2. Rename and Organize Frames:

   • Double-click the label text above the mobile frame on the canvas (currently named "iPhone 15 Pro - 1").

   • Type Mobile / Home Screen and press Enter.

   • Double-click the desktop frame's label and rename it to Desktop / Dashboard.

   • Notice how the names update simultaneously in the Layers Panel on the left sidebar.

3. Resize Frames Manually and via Input Fields:

   • Select Mobile / Home Screen. Drag its bottom-right corner handles to alter its dimensions manually.

   • Look at the Properties Panel under the Frame coordinates box (X, Y, W, H).

   • Manually override the width (W) to 393 and height (H) to 852 to restore standard proportions.

4. Understand Frame Clipping:

   • Draw a shape using R that extends beyond the right edge of your mobile frame.

   • In the Layers panel, drag the shape layer inside the Mobile / Home Screen frame group.

   • Toggle the Clip content checkbox in the right Properties panel. Observe how elements sticking outside the frame boundaries are cut off when checked, and exposed when unchecked.

Day 3: Shapes

Lecture & Theory

UI design is structurally built by aggregating geometric primitives: Rectangles (cards, backgrounds, dividers), Circles (avatars, status badges), Lines/Polygons (charts, directional indicators), and Star vectors (ratings, iconography).

In vector graphics, shapes consist of paths, vector nodes, and boundary parameters. Modifying a shape’s Fill (internal color/gradient/image), Stroke (border thickness, color, alignment, and dash pattern), and Corner Radius (border curvature) transforms basic geometry into high-fidelity UI components like modern rounded cards and pill buttons.

Step-by-Step Instructions

1. Draw Base Geometries:

   • Press R and click-and-drag inside your Mobile / Home Screen frame to draw a rectangle ($W: 345, H: 200$).

   • Press O (Ellipse tool), hold Shift while dragging to constrain the aspect ratio to a 1:1 square, creating a perfectly round circle ($60 \times 60$ px).

2. Apply Advanced Corner Radii:

   • Select your rectangle. Look at the right Properties panel in the Frame/Rectangle section.

   • Find the Corner radius input box (represented by a curved corner icon). Type 16 and press Enter.

   • Click the Independent corners icon directly to the right of the radius box (it looks like a square with four distinct corners).

   • Change the Top-Left radius to 24, Top-Right to 24, Bottom-Right to 0, and Bottom-Left to 0. Observe the asymmetrical shape.

3. Configure Fills and Strokes:

   • In the Properties Panel under Fill, click the square color swatch. Change the hex code to #1E293B (Dark Slate Blue).

   • Click the + sign in the Stroke section of the right panel to add a border.

   • Change stroke position from Inside to Outside. Increase stroke thickness from 1 to 3.

   • Click the stroke color swatch and change it to #38BDF8 (Bright Blue).

Day 4: Text Tool

Lecture & Theory

Typography forms up to 90% of web and mobile UI design. Figma handles text via its vector rendering engine, enabling precise controls over line heights, letter spacing, paragraph spacing, and auto-sizing behavior.

Understanding text bounding boxes is fundamental to avoiding broken visual layouts:

• Auto Width (Hug): The text bounding box grows wider horizontally as you type on a single line.

• Auto Height: The text box maintains a fixed horizontal width and expands vertically as text wraps down.

• Fixed Size: Both width and height are strictly defined; text exceeding boundaries will overflow visually unless controlled.

Step-by-Step Instructions

1. Add Primary Headings:

   • Press T to activate the Text Tool. Click near the top of your mobile frame.

   • Type Welcome Back, Alex.

   • In the Properties Panel under Text, select the font family Inter (or Roboto).

   • Set Font Weight to Bold, Font Size to 28 px, and Line Height to 34 px (or 120%).

2. Add Body Copy with Auto Height:

   • Press T, click-and-drag a rectangle on the canvas to explicitly set a text container width of 345 px.

   • Type: Manage your modern design system tokens, assets, and component libraries smoothly directly within Figma.

   • Set Font Weight to Regular, Font Size to 15 px, Line Height to 22 px.

   • In the Properties Panel, locate the three sizing icons: Auto width, Auto height, and Fixed size. Click Auto height. Notice how the box height snaps perfectly to enclose the wrapped paragraphs.

3. Construct a Text-Based Button Label:

   • Press T, click once, and type Get Started.

   • Set Weight to Medium, Size to 16 px, Line Height to 24 px, Letter Spacing to 0.5 px.

   • Center-align the text by clicking the Text Align Center icon under the font settings panel.

Day 5: Colors

Lecture & Theory

Consistent color management preserves visual hierarchy and brand integrity. Figma categorizes color application into Solid, Gradient (Linear, Radial, Angular, Diamond), and Image/Video fills.

To prevent color fragmentation across large scale interfaces, UI designers use Color Styles. A Style acts as a centralized color token variable. Modifying the centralized style updates every linked layer across the entire design document automatically.

Step-by-Step Instructions

1. Sample and Apply Hex/RGB Colors:

   • Select the large rectangle created on Day 3.

   • In the Properties panel, click the color swatch under Fill.

   • Click the Eyedropper Tool icon (or press I) and click any color on your screen to sample it.

2. Build a Linear Gradient:

   • Open the Fill color picker window. At the top left of the picker, click the dropdown currently set to Solid and change it to Linear.

   • Click the left stop handle on the gradient control line on your canvas; set color to #6366F1 (Indigo, 100% opacity).

   • Click the right stop handle; set color to #A855F7 (Purple, 100% opacity).

3. Create and Organize Global Color Styles:

   • Select a shape filled with a solid primary color #4F46E5.

   • In the Properties Panel, hover over the Fill section header and click the Style icon (four dots arranged in a square).

   • Click the + button in the popup menu that opens (Create Style).

   • Name your color style using slash nomenclature for automatic folder grouping: type Brand / Primary Blue and click Create style.

   • Repeat this process for secondary colors (Brand / Accent Violet, Neutral / Dark Slate).

   • Observe these styles listed under Color Styles in the right sidebar when clicking on empty canvas space.

Day 6: Layers Panel

Lecture & Theory

The Layers Panel (Left Sidebar) manages the spatial z-axis hierarchy of your design files. In vector graphics, objects at the top of the Layers Panel list overlap objects below them in the visual stack.

Effective layer management requires rigorous discipline: naming layers logically, grouping related items to reduce canvas clutter, locking static background elements to prevent accidental movement, and hiding temporary reference frames.

Step-by-Step Instructions

1. Inspect Layer Stack Order:

   • Draw three overlapping shapes on your canvas: a red rectangle, a green circle, and a blue text element.

   • Look at the left sidebar's Layers tab.

   • Click-and-drag the red rectangle layer to the very top of the layer tree list. Notice how it now visibly covers the green circle and blue text.

2. Re-order via Keyboard Shortcuts:

   • Select an element on the canvas and use the standard z-index shortcuts:

     • Send Backward: Control / Cmd + [

     • Bring Forward: Control / Cmd + ]

     • Send to Absolute Back: Control / Cmd + Shift + [

     • Bring to Absolute Front: Control / Cmd + Shift + ]

3. Group and Rename Elements:

   • Multi-select your text element and button rectangle from Day 4 by holding Shift and clicking both on the canvas.

   • Right-click and select Group selection (or press Control + G / Cmd + G).

   • Double-click the new group label in the Layers panel (currently named Group 1) and rename it to CTA Button.

4. Lock and Hide Layers:

   • Hover over your background Frame layer in the Layers panel. Click the Eye icon to toggle its visibility off and on.

   • Click the Padlock icon next to the background frame layer. Try to select or move the frame on the canvas—it is now unselectable until unlocked.

Day 7: Alignment Tools

Lecture & Theory

Precision alignment is the indicator of professional UI production. Manual pixel dragging introduces alignment defects. Figma provides automated mathematical alignment and distribution engines located at the top of the Design properties panel.

When multiple objects are selected, alignment can occur relative to the selection boundary or relative to a parent Frame container. Distribute Spacing calculates equal mathematical pixel gaps between arrayed visual objects along X or Y axes.

Alignment Tools (Top-Right Properties Panel):
 [Align Left]  [Align Horiz Center]  [Align Right]
 [Align Top]   [Align Vert Center]   [Align Bottom]

Step-by-Step Instructions

1. Align Elements Relative to Parent Frame:

   • Select a text box located inside your Mobile / Home Screen frame.

   • Look at the top-right corner of the Design Panel.

   • Click Align Horizontal Centers (Shortcut: Option + H / Alt + H).

   • Click Align Top (Shortcut: Option + W / Alt + W). The element moves directly to the top edge, perfectly centered horizontally within its frame.

2. Align Multiple Independent Shapes:

   • Draw four small circles of varying sizes scattered unevenly across the canvas.

   • Select all four circles using bounding drag (Click + Drag over all four).

   • Click Align Vertical Centers (Option + V / Alt + V). All shapes line up horizontally along their center axis line.

3. Tidy Up and Distribute Spacing:

   • Keep the four circles selected.

   • Click the More Alignment Options dropdown arrow in the top right tools panel.

   • Click Tidy Up (Shortcut: Control + Option + Shift + T / Cmd + Option + Shift + T). Figma automatically arranges them cleanly with equal gaps.

   • Drag the pink circle handles that appear inside the tidy-up bounding box to dynamically adjust spacing gaps across all shapes simultaneously.

Day 8: Grids

Lecture & Theory

Layout Grids superimpose visual mathematical constraints over Frames to dictate typography placement, card widths, and alignment margins. UI design heavily utilizes Column Grids for web design (typically 12-column layouts) and mobile design (typically 4-column or 6-column layouts).

Grids consist of three primary metrics:

1. Count: The total number of vertical distribution channels.

2. Margin: The fixed outer padding distance from the left and right frame borders to the grid contents.

3. Gutter: The fixed inner spacing gap between individual adjacent columns.

Step-by-Step Instructions

1. Apply Column Grid to Mobile Frame:

   • Select your Mobile / Home Screen frame.

   • In the Properties Panel, click the + sign on the Layout grid section.

   • By default, a 10px red uniform mesh grid appears. Click the Grid settings icon (nine small dots) inside the Layout grid row.

   • Change the dropdown at top left from Grid to Columns.

   • Set Count to 4, Margin to 16 (or 20), and Gutter to 16.

2. Apply Column Grid to Desktop Frame:

   • Select your Desktop / Dashboard frame (MacBook Air, 1280px width).

   • Click + on Layout grid, open settings, and switch to Columns.

   • Set Count to 12, Type to Stretch, Margin to 80, Gutter to 24.

3. Design Within Layout Constraints:

   • Press R (Rectangle). Draw a card element on the desktop frame that spans exactly 4 columns wide.

   • Draw a second card starting on column 5 that spans 8 columns wide.

   • Press Control + G / Shift + G to toggle the red visual grid lines off and on to verify clean horizontal alignment.

Day 9: Components

Lecture & Theory

Components are reusable UI building blocks that prevent repetitive manual recreation of UI elements across projects. A component system uses a Parent/Master (Main Component) and Child (Instance) architectural hierarchy:

• Main Component: The single source of truth created first. Has an icon represented by four filled purple diamonds ($\diamondsuit$). Any visual design change made here propagates to all instances globally.

• Instance: A duplicate copy of the Main Component. Has an icon represented by a single open diamond ($\diamond$). Instances can have localized Overrides (e.g., changing text strings or vector fills) without breaking structural links to the Main Component.

  [ Main Component ] (❖) ──Propagates Changes──► [ Instance 1 ] (◇)
                                                └─► [ Instance 2 ] (◇)

Step-by-Step Instructions

1. Build a Master Component:

   • Draw a rectangle ($W: 200, H: 48, R: 8$, Fill: #2563EB).

   • Add a text layer over it: Submit Order (White, Inter Bold 16px).

   • Select both text and rectangle layers, then use alignment tools to center text inside the rectangle. Group them or place them in a Frame.

   • With the group/frame selected, look at the top toolbar center. Click the Create Component icon (or press Control + Option + K / Cmd + Option + K).

   • Notice the layer icon in the left panel changes to four purple diamonds ($\diamondsuit$). Rename this main component to Component / Button / Primary.

2. Generate and Override Instances:

   • Hold Option (macOS) or Alt (Windows), click the Main Component on canvas, and drag away a copy.

   • Notice the layer icon for the duplicate in the left sidebar is a single empty diamond ($\diamond$). This is an Instance.

   • Double-click the text inside the Instance. Type Cancel Subscription. Notice how the text updates, while maintaining the blue button styling inherited from the Main Component.

3. Test Global Propagation:

   • Select the original Main Component.

   • Change its Fill color from Blue (#2563EB) to Emerald Green (#059669).

   • Observe how the Instance button's background color automatically turns green while preserving its custom localized text override (Cancel Subscription).

Day 10: Variants

Lecture & Theory

Component systems require buttons, input fields, and UI cards to support different visual states (e.g., Default, Hover, Focused, Disabled, Pressed). Rather than treating these variations as separate components, Figma groups them into Variants.

Variants sit within a single component container frame. They utilize Properties and Values (e.g., Property 1 = State, Values = Default, Hover, Disabled), enabling designers to swap states using simple dropdowns or toggles in the right Properties panel.

Step-by-Step Instructions

1. Prepare Master Component for Variants:

   • Select the Component / Button / Primary Main Component built on Day 9.

   • Look at the right-hand Properties Panel. In the Component header area, click the + button next to Properties and select Variant (or click the Add Variant icon at top toolbar).

   • A dotted purple enclosure frame will encompass your original component, and a second copy button will appear inside it.

2. Configure Property Names and Values:

   • Select the main dotted variant frame container. Look at the right panel under Properties. Double-click Property 1 and rename it to State.

   • Click the top button inside the container. In the right panel, set State to Default.

   • Click the second button inside the container. Set its State value to Hover.

3. Style Visual Differences Across Variants:

   • Select the Hover variant button layer inside the purple enclosure.

   • Darken its background fill color slightly from #059669 to #047857.

   • Add a 3rd Variant by clicking the purple + button in the bottom right corner of the dotted variant frame. Set its State to Disabled. Change its fill color to #9CA3AF (Gray).

4. Test Variant Swapping on Canvas:

   • Drag an Instance of your button out onto your working frame.

   • Select the instance button. Look at the right Properties panel.

   • Locate the State dropdown. Switch between Default, Hover, and Disabled. Observe the component updating state on the canvas instantly.

  ┌─ Component Set: Button ──────────────────────────────┐
  │                                                      │
  │  [  Default  ]  --> State = Default                  │
  │                                                      │
  │  [   Hover   ]  --> State = Hover                    │
  │                                                      │
  │  [  Disabled ]  --> State = Disabled                 │
  └──────────────────────────────────────────────────────┘

Day 11: Images

Lecture & Theory

In Figma, images are not standalone object types; an image is applied as a Fill property inside a vector shape container (Rectangle, Ellipse, Frame, or Vector Path).

This architecture allows shapes to act as structural image frames without requiring manual destructive cropping operations. Understanding how image scaling controls function (Fill, Fit, Crop, and Tile) is essential for responsive layout construction.

Image Scale Modes:
 - Fill:  Scales image to cover container completely (may clip edges).
 - Fit:   Scales image to fit inside container without clipping (may leave gaps).
 - Crop:  Allows manual repositioning and framing of source image.
 - Tile:  Repeats image at original scale across container pattern.

Step-by-Step Instructions

1. Place External Images:

   • Press Control + Shift + K / Cmd + Shift + K to trigger the Place Image dialog.

   • Select an image file from your computer and click Open.

   • Hover over your canvas. Notice your cursor now displays a miniature preview thumbnail of the image along with a count indicator (1).

   • Click inside a rectangle on your canvas. The shape’s solid color is replaced by the image fill.

2. Adjust Image Scale Modes:

   • Click the filled shape. In the right panel under Fill, click the image preview thumbnail box.

   • A pop-up window appears. Click the dropdown menu at the top (currently set to Fill).

   • Select Crop. Blue handles appear around the raw unclipped bounds of the source photo. Drag these handles to reposition and crop the focus area inside your shape.

   • Experiment with Fit and Tile options from the same dropdown menu.

3. Image Masking via Shapes:

   • Create an intricate shape background: Draw an Ellipse (O, $120 \times 120$ px).

   • Place an image layer directly above the Ellipse in the Layers panel list.

   • Select both the Ellipse layer and the Image layer.

   • Look at the top center toolbar and click the Use as Mask icon (Shortcut: Control + Cmd + M / Control + Option + M).

   • The top image is now clipped strictly inside the circular vector geometry of the underlying shape mask.

Day 12: Icons

Lecture & Theory

User interfaces utilize SVG (Scalable Vector Graphics) for iconography. Unlike raster PNG or JPG files, SVG icons consist of math-based coordinate paths that can be resized infinitely without visual pixelation, degradation, or blur.

Proper icon integration requires maintaining a uniform bounding frame size (typically $24 \times 24$ px or $20 \times 20$ px containers) and ensuring vector path fill layers are flattened and unified so color overrides can be applied cleanly using global design system color styles.

Step-by-Step Instructions

1. Import SVG Files:

   • Download or acquire clean SVG icons (e.g., from Feather Icons, Heroicons, or Lucide Icons).

   • Drag-and-drop an .svg file directly from your computer folder onto the open Figma canvas.

2. Standardize Icon Bounding Containers:

   • Select the imported icon. Inspect its dimensions in the Properties panel.

   • Ensure the parent frame enclosing the icon vector paths is set to exactly 24 px Width by 24 px Height.

   • Check the Constrain proportions padlock icon next to the W/H fields to ensure aspect ratios remain locked during subsequent resizing.

3. Flatten Vector Paths and Recolor:

   • Double-click inside the icon frame to select its internal vector layer path.

   • If an icon contains multiple fragmented stroke lines, press Control + E / Cmd + E to Flatten vector paths into a single clean geometry path.

   • Navigate to the Fill or Stroke section in the right design panel.

   • Click the Style icon (4 dots) and apply your existing color style: Brand / Primary Blue.

Day 13: Basic Prototyping

Lecture & Theory

Prototyping transforms static vector wireframes into interactive, clickable user flows. In Figma, interactive prototyping operates via nodal connections created between source objects (buttons, cards) and target destinations (Frames).

A prototype link consists of three key parameters:

1. Trigger: The user input action required to initiate navigation (e.g., On Click, On Hover, On Drag).

2. Action: The navigation outcome (e.g., Navigate To, Open Overlay, Scroll To, Back).

3. Animation: The visual transition effect applied during screen changing (e.g., Instant, Dissolve, Smart Animate, Slide In).

Step-by-Step Instructions

1. Switch to Prototype Mode:

   • Look at the top of the right sidebar panel. Click the Prototype tab (or press Shift + E).

   • Hover your cursor over a button element placed inside screen Mobile / Home Screen. Notice circular connection nodes (plus icons) appearing along the selection bounding box edges.

2. Draw a Navigation Interaction Link:

   • Click-and-drag the blue connection node handle from the button element across the canvas, and release it directly over the Mobile / Login Screen target frame.

   • An Interaction Details pop-up modal will appear on your screen.

3. Configure Interaction Details:

   • Set Trigger dropdown to On click.

   • Set Action dropdown to Navigate to.

   • Set Destination frame to Mobile / Login Screen.

   • Set Animation dropdown to Push. Set direction arrow pointing left (←). Set Duration to 300 ms and Easing curve to Ease Out.

  [ Source Frame: Home ]                               [ Target Frame: Login ]
  ┌────────────────────┐                               ┌────────────────────┐
  │                    │                               │                    │
  │  [ Login Button ]──┼──(Trigger: On Click)─────────►│                    │
  │                    │  (Action: Navigate To)        │                    │
  └────────────────────┘  (Anim: Push 300ms)           └────────────────────┘

Day 14: Preview Mode

Lecture & Theory

Validation of user interactions requires running your application flow inside Figma's rendering sandbox engine: Presentation Mode or the Inline Preview tool.

Testing user journeys allows designers to verify visual scale ratios, evaluate ergonomic reachability of mobile action buttons, identify navigation dead-ends, and review real-time animation transitions before writing code.

Step-by-Step Instructions

1. Launch Inline Preview:

   • Select your starting screen frame (Mobile / Home Screen).

   • Look at the top toolbar right side. Click the Play Icon with a Frame (Shortcut: Shift + Spacebar) to trigger In-Context Inline Preview.

   • A pop-up window presents the interactive prototype directly over your workspace canvas. Click the prototype button to test screen transitions instantly.

2. Launch Full Presentation View:

   • Look at the absolute top right corner of the application window. Click the main Present button (Diagonal Play Icon) or press Control + Option + Enter / Cmd + Option + Enter.

   • A dedicated browser window tab opens rendering the frame housed inside a realistic device viewport mockup wrapper.

3. Configure Presentation Settings:

   • In the top-right toolbar of the Presentation window, click Options.

   • Switch device scale mode between:

     • Fit to screen

     • Fill screen

     • 100% - Display at full size

   • Press R on your physical keyboard while viewing the presentation mode to quickly restart the entire prototype flow from the designated starting screen frame.

Day 15: Milestone Project — 3-Screen Mobile App

Lecture & Theory

To synthesize the learnings from Phase 1, you will construct a low-fidelity interactive 3-screen mobile application user flow (Home Screen $\rightarrow$ Login Screen $\rightarrow$ User Profile Screen).

This milestone combines structured Frame management, consistent Column Layout Grids, explicit Typography scale hierarchies, component instance usage, and interactive nodal screen linking.

Step-by-Step Instructions

1. Set Up Frames and Grids:

   • Create three iPhone 15 Pro frames (393 x 852 px) side-by-side.

   • Rename them in sequence: App / 1-Home, App / 2-Login, App / 3-Profile.

   • Apply a 4-column layout grid to all three frames ($Margin: 20, Gutter: 16$).

2. Build Screen Layouts:

   • Screen 1 (Home): Place a large hero image card at top, a title text layer (Discover Design Systems), and a Primary Button component instance labeled Login to Continue.

   • Screen 2 (Login): Create two styled input field rectangles with inner placeholder text (Email Address, Password), and a Primary Button labeled Submit Login. Add a text link at bottom: Skip to Profile.

   • Screen 3 (Profile): Place an ellipse mask avatar image ($80 \times 80$ px) at top center, add a heading layer (Alex Johnson), a subtitle (Lead UI/UX Architect), and a button labeled Sign Out.

3. Wire Up Prototype Connections:

   • Switch to Prototype Tab (Shift + E).

   • Link Login to Continue button on Screen 1 $\rightarrow$ Screen 2 (Navigate to, On Click, Slide In from right, 300ms).

   • Link Submit Login button on Screen 2 $\rightarrow$ Screen 3 (Navigate to, On Click, Smart Animate or Dissolve, 300ms).

   • Link Sign Out button on Screen 3 $\rightarrow$ Screen 1 (Navigate to, On Click, Slide Out to right, 300ms).

4. Validate Flow: Press Shift + Spacebar to open Inline Preview, and click through the complete end-to-end loop journey.

🎨 Phase 2: Core Design (Days 16–30)

Day 16: Auto Layout Basics

Lecture & Theory

Auto Layout is Figma's implementation of modern CSS Flexbox. It converts static, manually positioned vector frames into dynamic layout engines. When an element inside an Auto Layout container changes size or text length, the parent frame automatically expands, shrinks, or reflows neighboring elements to maintain precise spatial relationships.

Auto Layout eliminates manual pixel dragging when editing content across UI components like buttons, lists, menus, and table rows.

Step-by-Step Instructions

1. Apply Auto Layout to a Button:

   • Create a text layer: Get Started Now (Inter Bold 16px).

   • Select the text layer and press Shift + A (or right-click and select Add Auto Layout).

   • Notice that the layer is automatically enclosed within a special parent frame identified in the Layers panel by an icon containing two horizontal or vertical bars ($\vert{}\vert{}$ or $=$).

2. Inspect and Modify Auto Layout Padding Parameters:

   • Select the Auto Layout button frame. Look at the right Properties panel under Auto layout.

   • Locate Horizontal padding (left/right space) and set it to 24 px.

   • Locate Vertical padding (top/bottom space) and set it to 12 px.

   • Add a background Fill color (#2563EB) and set Corner Radius to 8 px.

3. Test Content Responsiveness:

   • Double-click the text layer inside your new button on the canvas.

   • Edit the text string from Get Started Now to Go. Notice how the surrounding blue button background container automatically contracts while preserving the exact 24px left/right and 12px top/bottom padding margins.

  ┌─ Auto Layout Frame ──────────────────────────┐
  │ ◄──24px──► [ Dynamic Text Layer ] ◄──24px──► │
  └──────────────────────────────────────────────┘

Day 17: Constraints

Lecture & Theory

Constraints dictate how nested child elements respond when their parent Frame container is manually stretched or resized across varying screen resolutions (Desktop, Tablet, Mobile).

Constraints are defined along two axis dimensions:

• Horizontal Constraints: Left, Right, Left and Right (Stretches with frame), Center, Scale.

• Vertical Constraints: Top, Bottom, Top and Bottom, Center, Scale.

Step-by-Step Instructions

1. Apply Constraints to a Navigation Bar:

   • Select your desktop parent frame (1280px width).

   • Draw a rectangle spanning the full width at top ($1280 \times 64$ px) to act as a Navbar background. Place a logo text layer on the far left, and a profile avatar on the far right.

2. Configure Pinning Options:

   • Select the logo text element on the left.

   • In the right Properties panel, find the Constraints box grid graphic.

   • Set Horizontal Constraint dropdown to Left, and Vertical to Top.

   • Select the profile avatar element on the right.

   • Set Horizontal Constraint dropdown to Right, and Vertical to Top.

3. Test Responsive Stretch Behavior:

   • Select the primary desktop parent frame layer.

   • Click-and-drag the right edge handle of the parent frame to expand its width from 1280px to 1600px.

   • Observe how the logo remains pinned to the left edge, while the profile avatar shifts right to stay pinned to the right edge.

Day 18: Padding

Lecture & Theory

Padding defines the interior protective spacing buffer between the outer perimeter frame boundary of an Auto Layout container and its inner child contents.

Figma separates padding controls into Individual Padding settings (Top, Right, Bottom, Left). Proper spatial scale systems typically leverage standard pixel multipliers (such as an 8pt Grid system using $4\text{px}, 8\text{px}, 16\text{px}, 24\text{px}, 32\text{px}, 48\text{px}$, and $64\text{px}$ increments).

Individual Padding Controls:
           [ Top Padding: 16px ]
 ┌────────────────────────────────────────┐
 │ [Left: 24px]  [ Content ]  [Right: 24px]│
 └────────────────────────────────────────┘
          [ Bottom Padding: 16px ]

Step-by-Step Instructions

1. Build an Auto Layout Card Container:

   • Create three text layers: Title (Card Title, 20px Bold), Body Copy (Card description line text..., 14px Regular), and Action Link (Read More →, 14px Medium).

   • Multi-select all three text layers and press Shift + A to wrap them inside a vertical Auto Layout container frame.

2. Set Up Asymmetric Individual Padding:

   • Select the auto layout frame container.

   • In the right panel under Auto layout, click the Independent padding icon (a square with four highlighted outer stroke lines).

   • Set Top padding = 24, Right padding = 20, Bottom padding = 32, Left padding = 20.

3. Apply Visual Styling:

   • Add a solid background Fill (#FFFFFF White).

   • Add a drop Effect (Drop Shadow: $X: 0, Y: 4, Blur: 12, Spread: 0, Color: \text{Black } 8\%$).

   • Set Corner Radius to 12 px.

Day 19: Spacing (Gap Between Items)

Lecture & Theory

While Padding governs external perimeter inner margins, Spacing Between Items (Gap) controls the explicit spatial distance between adjacent child elements stacked inside an Auto Layout container.

Auto Layout alignment engines support two distinct item spacing modes:

1. Packed (Fixed Gap): Child items maintain a strictly defined pixel distance gap between each other ($12\text{px}, 16\text{px}$, etc.).

2. Space Between (Auto Gap): Child items are pushed to the absolute outer edges of the container, while the internal gap automatically expands or contracts based on available container width.

Step-by-Step Instructions

1. Adjust Packed Item Gaps:

   • Select the vertical Card container built on Day 18.

   • In the Properties Panel under Auto layout, locate the Vertical gap between items field (icon with two parallel lines separated by an arrow).

   • Change the value from 0 to 12 px. Observe how all three nested text elements push apart smoothly by exactly 12px.

2. Implement Space Between (Auto Alignment):

   • Create a new horizontal Auto Layout frame (Shift + A) containing a Left Text Label (Notifications) and a Right Switch Toggle graphic.

   • Set the Auto Layout container frame width manually to 345 px.

   • In the right Properties panel under Auto Layout, click the Alignment and padding grid box.

   • Change the dropdown at the top right of the popup grid from Packed to Space between (or double-click the inner grid line graphic).

   • Notice how the text label pins to the left border and the switch toggle pins to the right border automatically.

Day 20: Interactive Components

Lecture & Theory

Interactive Components allow designers to embed micro-interactions inside component variants. Instead of linking entire screen frames together in Prototype mode, you wire prototype states within the component set itself.

When an instance of an Interactive Component is placed on any screen frame across a design file, it automatically responds to user triggers (e.g., hover effects, toggle switches, active checkbox states) without requiring separate screen flows.

  Component Set: Toggle Switch
  ┌────────────────────────────────────────────────────────┐
  │  (Variant 1: Off) ──[ On Click / Change To ]──► (Variant 2: On) │
  └────────────────────────────────────────────────────────┘

Step-by-Step Instructions

1. Create Variant States for a Switch Component:

   • Draw a small oval track ($W: 48, H: 24, R: 12$, Fill: #E2E8F0) and a white circle knob ($20 \times 20$ px) aligned to the left inside the track. Group them and turn into a Component (Cmd + Option + K). Name it Component / Switch.

   • Add a Variant state. Set the new variant track background fill to #22C55E (Green) and reposition the inner white circle knob to the far right inside the track.

   • Name variant 1 State = Off, and variant 2 State = On.

2. Wire Component Prototype Interactions:

   • Switch to the Prototype panel (Shift + E).

   • Select the State = Off variant button on canvas.

   • Drag its blue connection node arrow directly to the State = On variant button right next to it inside the purple dotted frame.

   • Set Trigger = On click, Action = Change to, Target Variant = State = On, Animation = Smart Animate, 200ms, Ease Out.

   • Click the State = On variant and drag a blue connection arrow back to State = Off using identical Change to settings.

3. Test Local Micro-Interactions on Screen:

   • Drag an instance of Component / Switch onto a mobile frame.

   • Run Inline Preview (Shift + Spacebar). Click the switch on your screen to watch it toggle smoothly on and off in place.

Day 21: Scroll Groups

Lecture & Theory

Mobile and web interfaces frequently feature fixed frame regions (such as fixed top navigation headers and sticky bottom nav bars) alongside dynamic content regions that scroll vertically or horizontally (e.g., product card carousels).

In Figma, setting Overflow Scrolling properties on a child Frame nested inside a parent device screen container isolates scroll actions strictly to designated spatial areas.

Step-by-Step Instructions

1. Construct a Horizontal Product Carousel Frame:

   • Draw five rectangular product card frames ($160 \times 200$ px each) side by side.

   • Multi-select all 5 cards and press Shift + A to wrap them in a horizontal Auto Layout frame. Set gap to 16 px.

   • Name this auto layout parent container Carousel Container.

2. Wrap Container in a Clip-Frame Boundary:

   • Right-click Carousel Container and select Frame selection (Shortcut: Control + Option + G / Cmd + Option + G). Name this new parent frame Scroll Window.

   • Shrink the bounding frame width of Scroll Window manually so it matches the width of your mobile screen ($393$ px). Enable Clip content checkbox in the right panel.

3. Enable Overflow Scrolling:

   • Switch to the Prototype panel in the right sidebar (Shift + E).

   • Locate the Overflow scrolling section.

   • Change the dropdown from No scrolling to Horizontal.

4. Test Scroll Behavior:

   • Drag Scroll Window inside your primary mobile screen frame. Ensure the device screen itself has its vertical scrolling enabled or static position set.

   • Open Presentation mode (Shift + Spacebar). Drag your mouse horizontally across the product cards to scroll through the hidden items out of view.

Day 22: Overlays

Lecture & Theory

An Overlay is an interactive screen content layer (such as a slide-out drawer menu, modal confirmation box, or contextual dropdown) that renders over top of the current base screen frame without forcing a complete page navigation reload.

Overlays reduce visual frame duplication across large prototype flows by keeping background screens visible underneath semi-transparent backdrop darkeners.

Step-by-Step Instructions

1. Design a Separate Modal Card Frame:

   • Create a standalone Frame on the canvas detached from all other screens ($W: 320, H: 240, R: 16$, Fill: #FFFFFF).

   • Add title text (Confirm Action), body copy (Are you sure you want to delete this item?), and two buttons (Cancel, Delete).

   • Name this detached frame Modal / Confirm Delete.

2. Wire Up Overlay Action Trigger:

   • Select a trigger button (Trash Icon) located inside your primary dashboard screen frame.

   • Switch to the Prototype tab (Shift + E).

   • Drag a blue prototype connection wire from the trash icon to the detached Modal / Confirm Delete frame.

3. Configure Overlay Options:

   • Set Trigger = On click.

   • Set Action = Open overlay.

   • Set Overlay position dropdown = Centered (or Manual, Top Left, Bottom Sheet).

   • Check the box: Close when clicking outside.

   • Check the box: Add background behind overlay. Click the color swatch next to it and set it to #000000 at 50% Opacity.

   • Set Animation = Dissolve or Move In (from Top, 300ms).

Day 23: Smart Animate

Lecture & Theory

Smart Animate is Figma's automated interpolation and motion tweening engine. When linking two frames using Smart Animate, Figma automatically matches identical layers (determined by matching layer names and hierarchy paths) across the source and destination frames.

Figma smoothly interpolates differences between matched layers across several properties:

• Position ($X, Y$)

• Scale ($W, H$)

• Rotation angle

• Opacity

• Fill color

• Corner radius

  Source Frame (Layer Name: "Card")      Destination Frame (Layer Name: "Card")
  ┌─────────────────┐                    ┌──────────────────────────────────┐
  │ [Card: Small]   │ ──Smart Animate─►  │ [Card: Expanded Full Screen]    │
  └─────────────────┘                    └──────────────────────────────────┘

Step-by-Step Instructions

1. Set Up Source and Destination Frames:

   • Create a Screen Frame (Source Frame). Draw a circle ($60 \times 60$ px, Fill: #3B82F6) in the bottom right corner. In the Layers panel, name this layer Animated Orb.

   • Duplicate the entire screen frame (Control + D / Cmd + D) to create Destination Frame.

   • In Destination Frame, select the Animated Orb circle layer. Expand its size to $300 \times 300$ px, change its Fill color to #EC4899 (Pink), and move it to top-center.

2. Wire Up Smart Animate Transition:

   • Switch to the Prototype tab (Shift + E).

   • Select the Animated Orb circle inside Source Frame and drag a prototype arrow to Destination Frame.

   • Set Trigger = On click.

   • Set Action = Navigate to.

   • Set Animation dropdown to Smart Animate.

   • Set Easing curve to Custom Spring or Ease In and Out Back (400ms).

3. Run Interaction Test:

   • Launch Inline Preview (Shift + Spacebar). Click the blue orb and watch it smoothly expand, recolor, and glide across the screen simultaneously.

Day 24: Plugins

Lecture & Theory

Plugins expand Figma's core feature set by introducing automated workflows, API integrations, lorem-ipsum placeholder generation, accessibility compliance checkers, real-time data population, and rich asset library imports.

Plugins operate via the Figma Community ecosystem and execute JavaScript directly within your open design document workspace sandbox.

Step-by-Step Instructions

1. Access Plugins Panel:

   • Look at the top toolbar center. Click the Resources icon (a icon resembling a diamond, square, and circle stacked together, or press Shift + I).

   • Select the Plugins tab located at the top of the dropdown menu modal.

2. Search and Run UI Asset Plugins:

   • Type Unsplash in the search box. Click Run on the Unsplash plugin.

   • Select a shape on your canvas, search for Architecture inside the Unsplash window, and click a photo to populate the vector shape instantly with a high-resolution image fill.

3. Run Iconography and Content Plugins:

   • Open Resources (Shift + I), search for Iconify or Lucide Icons, and click Run.

   • Search for Settings, click an icon, and drag it directly onto your working canvas.

   • Search for Content Reel plugin to quickly fill empty text layers with realistic user names, addresses, and avatar headshots in a single click.

Day 25: Design Tokens (Variables & Styles)

Lecture & Theory

Design Tokens are atomic visual architecture values (hex colors, pixel dimensions, typography definitions, elevation shadows) expressed as reusable variables.

Figma manages native tokens through Variables and Styles. Variables support values for Color, Number (spacing, radii, border width), String (copy translation strings), and Boolean (visibility toggles). Variables support multi-mode switching (e.g., swapping a complete UI layout from Light Mode to Dark Mode instantly).

  Variable Tokens Collection:
  - Color / BG / Surface ───► Light Mode: #FFFFFF  │  Dark Mode: #0F172A
  - Space / Padding-MD ────► Value: 16px

Step-by-Step Instructions

1. Open Variables Management Panel:

   • Deselect all canvas elements by clicking on empty workspace background canvas space.

   • In the right sidebar panel, locate the Local variables section and click the Open variables icon.

2. Create Color and Number Variable Collections:

   • In the modal window that opens, click Create variable.

   • Select Color. Name the variable color/surface-primary. Set its initial default hex value to #FFFFFF.

   • Click Create variable again. Select Number. Name the variable spacing/gap-md. Set its numerical value to 16.

3. Add a Second Mode (Light/Dark Switch):

   • At the top right of the Variable Collection table window, click the + button (Add Mode).

   • Column 1 is now labeled Mode 1 (rename to Light). Column 2 is labeled Mode 2 (rename to Dark).

   • Under the Dark mode column, change the hex value for color/surface-primary from #FFFFFF to #0F172A.

4. Bind Variables to Design Elements:

   • Select a card background shape. In the right panel under Fill, click the Style/Variables icon and select color/surface-primary from the variables list.

   • Select a parent Auto Layout frame. In the spacing input box, click the Variable icon and bind spacing/gap-md.

   • Select the parent frame, look at the right sidebar panel under Layer, and click the Change variable mode icon to switch the entire frame between Light and Dark modes instantly.

Day 26: Collaboration

Lecture & Theory

Figma is a multiplayer, web-native environment. Multiple designers, developers, product managers, and reviewers can work simultaneously inside the same design canvas file without overriding work or generating merge conflicts.

Understanding file access permissions (Can View, Can Edit) and cursor tracking tools enables effective real-time design reviews and team collaboration.

Step-by-Step Instructions

1. Share File Access Permissions:

   • Look at the absolute top right corner of the application window. Click the blue Share button.

   • In the invite dialog modal, enter a teammate's email address.

   • Click the permissions dropdown box to assign access rights:

     • Can edit: Allows full design modification privileges.

     • Can view: Restricts access to viewing, commenting, and inspect options only.

   • Click Copy link to generate a direct URL link to share via communication channels.

2. Utilize Cursor Chat and Audio Spotlight:

   • Press / (Forward Slash) on your keyboard while on the canvas. A dynamic chat bubble appears directly attached to your visual mouse cursor.

   • Type a real-time message: Checking out the new button variants! Press Enter or Esc to clear cursor chat.

3. Spotlight Mode:

   • Click your user avatar circle displayed in the top right corner toolbar to Spotlight yourself, forcing all other current file viewers' screens to follow your exact canvas pan and zoom movements.

Day 27: Comments

Lecture & Theory

The Comments tool embeds contextual threaded feedback directly onto design canvas elements. Rather than taking external screenshots and sending feedback through isolated messaging channels, team members drop anchored pin comments directly on specific UI components, vector paths, or prototype screens.

Step-by-Step Instructions

1. Drop Anchored Comments on Canvas:

   • Press C (or click the Comment Icon in the top left toolbar) to activate the Comment Tool.

   • Hover over the design canvas. Click directly on a specific button element that requires design changes.

   • Type your feedback in the popup card: Increase the horizontal contrast on this CTA button to meet WCAG AA standards. Click the send arrow button.

2. Mention Teammates Contextually:

   • Click on a headline typography layer using the Comment tool (C).

   • Type @ followed by a teammate's user name: @Sarah Please review this revised hero headline copy.

3. Manage and Resolve Comment Threads:

   • Look at the left sidebar panel. Switch to the Comments tab to view a chronological master list of all open feedback pins across the document file.

   • Click a comment card in the left panel list. Figma smoothly pans and zooms your canvas directly to the target element pin.

   • Click the Checkmark icon (Resolve) at the top right of the comment card pop-up once the requested design change has been executed.

Day 28: Version History

Lecture & Theory

Figma continuously autosaves design changes to the cloud. To manage structural iterations, rollback mistaken deletions, or document significant milestones, designers use Version History.

Creating explicit version checkpoints allows teams to save named snapshots with detailed changelogs, review visual diffs across dates, and restore previous document states safely.

Step-by-Step Instructions

1. Save a Named Version Milestone:

   • Click the file title dropdown arrow located in the top toolbar menu (next to the file name).

   • Select Save to version history (Shortcut: Control + Option + S / Cmd + Option + S).

   • In the modal dialog window, enter a title: V1.0 - Core Navigation Completed.

   • Type a detailed descriptive summary note: Added Auto Layout navbar, primary button variants, and responsive layout constraints. Click Save.

2. Inspect and Compare Document History Logs:

   • Click the file title dropdown arrow again and select Show version history.

   • A right-hand sidebar panel list opens displaying every autosave checkpoint captured chronologically by time and editor name.

3. Restore or Duplicate Past Versions:

   • Click on an older saved version entry in the right sidebar list. Observe the main canvas view update to reflect that past state.

   • Click the three dots (...) icon next to the selected historical version entry.

   • Select Restore this version to roll back your file, or select Duplicate to create a separate branch file copy without affecting the current working draft.

Day 29: Exporting Assets

Lecture & Theory

Developer handoff requires exporting production-ready visual graphic assets from Figma files into optimized formats:

• PNG: Lossless raster format suitable for complex images requiring transparency.

• JPG: Lossy raster format suitable for dense photographic content to minimize file sizes.

• SVG: Scalable vector code format ideal for icons, logos, and simple vector illustrations.

• PDF: Document vector format ideal for printable spec sheets and client presentations.

Step-by-Step Instructions

1. Set Up Export Presets on Layers:

   • Select an icon component frame ($24 \times 24$ px).

   • Look at the absolute bottom of the right-hand Design Panel. Locate the Export section.

   • Click the + button in the Export header row.

2. Configure Multi-Format and Multi-Scale Exports:

   • By default, an export preset row reads 1x PNG.

   • Change format dropdown from PNG to SVG.

   • Click + again to add a second parallel export preset rule. Set scale multiplier to 2x and format to PNG (for high-density Retina screen rendering).

3. Preview and Execute Asset Export:

   • Click the Preview toggle box inside the export settings panel row to view the cropped bounding area preview thumbnail.

   • Click the button labeled Export [Layer Name].

   • Choose a target folder location on your local computer hard drive and click Save.

   • To batch-export all designated production assets globally across a document file, press Control + Shift + E / Cmd + Shift + E to launch the Export Inspector dialog.

Day 30: Milestone Project — 5-Screen Interactive App

Lecture & Theory

Phase 2 culminates in the execution of a high-fidelity 5-screen mobile application prototype incorporating modern layout techniques: Auto Layout structural frameworks, nested Variant component libraries, Interactive Components, Scroll Groups, Overlays, and Smart Animate transitions.

Step-by-Step Instructions

1. Construct a 5-Screen Structure:

   • Create 5 iPhone 15 Pro frames: 1-Onboarding, 2-Feed, 3-Details, 4-Cart Overlay, 5-Checkout.

2. Implement Core Structural Components:

   • Build a fixed Bottom Tab Bar Auto Layout Component with 4 interactive icon tabs (Home, Search, Cart, Profile). Pin it to the bottom of Screens 2, 3, and 5 using Constraints ($Bottom, Center$).

   • Build an Interactive Component Switch for item toggles and an interactive Button Set (Default, Hover, Pressed).

3. Assemble Advanced Screen Contents:

   • Screen 1 (Onboarding): Add hero graphic, title text, and a Smart Animate button linking to Screen 2.

   • Screen 2 (Feed): Add a Scroll Group Horizontal Carousel at top and a vertical Auto Layout feed list of card components below.

   • Screen 3 (Details): Link a feed card from Screen 2 to Screen 3 using Smart Animate (transitioning a thumbnail image smoothly into a full-bleed hero banner photo).

   • Screen 4 (Cart Overlay): Wire a View Cart button on Screen 3 to launch Screen 4 as an Overlay (Slide Up, Add background behind overlay set to $50\%$ opacity darkener).

   • Screen 5 (Checkout): Add payment detail input fields and a Complete Order button linking back to Screen 2 with a success notification.

4. Audit and Play Flow: Run full presentation mode (Control + Option + Enter) to verify that all interactions run smoothly without broken layouts or frame errors.

🎨 Phase 3: Creative Projects (Days 31–45)

Day 31: Wireframes

Lecture & Theory

Wireframing is the structural phase of UI/UX design. Low-Fidelity (Lo-Fi) wireframes prioritize content hierarchy, information architecture, functional layout structure, and user navigation paths over visual styling details (such as colors, photographs, or typography choices).

Lo-Fi wireframes intentionally restrict visual presentation to monochrome grayscale palettes, generic box geometry placeholders, and simple vector path wireframe blocks to accelerate fast design exploration.

Step-by-Step Instructions

1. Establish a Grayscale Wireframe Palette:

   • Create grayscale variables or style fills: #FFFFFF (Canvas), #F1F5F9 (Containers), #94A3B8 (Placeholders/Borders), #1E293B (Text).

2. Build Generic UI Block Placeholders:

   • Image Placeholder: Draw a rectangle shape ($300 \times 180$ px, Fill: #E2E8F0). Press L (Line tool) and draw an $X$ vector crossing diagonally from corner to corner inside the box to denote an image container.

   • Text Block Lines: Draw thin rectangles ($H: 12\text{px}$, $R: 6\text{px}$, Fill: #CBD5E1) placed at varied horizontal lengths to represent text paragraphs visually without typing copy.

3. Draft a Low-Fidelity Web Landing Page Wireframe:

   • Create a Desktop frame (1440 x 900 px).

   • Assemble a Lo-Fi layout from top to bottom: Nav Header block, Hero section (Image block right, text block lines left), 3-Column Feature Cards grid, and Footer region.

Day 32: UI Kits

Lecture & Theory

UI Kits (such as Google Material Design 3, Apple iOS Human Interface Guidelines, or Tailwind UI) are comprehensive external libraries of pre-built, standardized UI components, typography scales, layout frameworks, and icon sets.

Importing and integrating established UI Kits accelerates production workflows while ensuring structural compliance with native mobile platform design standards.

Step-by-Step Instructions

1. Import an External UI Kit from Figma Community:

   • Navigate to the top left main menu (Figma Icon) $\rightarrow$ Community.

   • Search for Material Design 3 Kit or iOS 17 UI Kit.

   • Click Open in Figma to duplicate the community UI Kit file directly into your drafts.

2. Link a Community UI Kit Library:

   • Open your primary working design file.

   • Look at the left sidebar panel and switch to the Assets tab (Shortcut: Option + 2 / Alt + 2).

   • Click the Library icon (a book icon at top right of Assets panel).

   • Locate the imported UI Kit file in the list and toggle its activation switch to On.

3. Utilize External Kit Components:

   • Go back to your working design canvas. In the Assets tab left sidebar, search for Navigation Bar or iOS Status Bar.

   • Drag the pre-built, fully responsive iOS Status Bar component directly onto the top of your mobile frame.

Day 33: Style Guide

Lecture & Theory

A Style Guide is a centralized visual documentation sheet that defines and organizes an organization's foundational design tokens, visual guidelines, and brand assets.

A comprehensive style guide documents:

1. Color Systems: Primary, Secondary, Neutral, and Functional Semantic States (Success, Warning, Error, Info).

2. Typography Scale: Font families, weights, sizing hierarchy ($H1, H2, H3$, Body, Caption), line heights.

3. Elevation & Shadows: Depth hierarchies.

4. Grid Systems & Spacing Rules: 8pt grid metrics.

Step-by-Step Instructions

1. Create a Dedicated Style Guide Frame:

   • Create a large canvas Frame (1920 x 1080 px, Fill: #F8FAFC). Title it Design System / Style Guide.

2. Document the Color Palette:

   • Draw a row of $80 \times 80$ px rounded square swatches. Apply your global color styles to them.

   • Below each swatch, add two text layers: Color Name (Primary Blue) and Value Token (#2563EB - var(--color-primary)).

3. Document the Typography Scale:

   • Create vertical text samples displaying your typography hierarchy side-by-side:

     • Display H1: Inter Bold 48px / Line Height 56px

     • Heading H2: Inter SemiBold 32px / Line Height 40px

     • Heading H3: Inter SemiBold 24px / Line Height 32px

     • Body Text: Inter Regular 16px / Line Height 24px

     • Caption: Inter Medium 12px / Line Height 16px

   • Bind each text layer directly to its corresponding global Typography Style.

Day 34: Design Systems

Lecture & Theory

A Design System expands a static Style Guide into an operational, scalable library of reusable, code-aligned components and design tokens shared across an entire organization.

Design systems rely on modular component architecture: Atoms (buttons, inputs, icons) combine to form Molecules (search bars, input groups), which combine to form Organisms (headers, card grids), which populate complete Templates and Pages.

  [ Atoms ] (Buttons, Icons) ──► [ Molecules ] (Search Bar) ──► [ Organisms ] (Header)

Step-by-Step Instructions

1. Structure a Dedicated Component Library File:

   • Create a new Figma document named Global Design System - Core Library.

   • Organize pages in the left sidebar: 01 - Tokens, 02 - Atoms (Buttons/Inputs), 03 - Molecules (Cards/Navs).

2. Publish the Design System Library:

   • Click the Assets tab in the left sidebar (Option + 2).

   • Click the Library book icon. Click the Publish button located at the top right of the modal window.

   • Type a publish release changelog note: Initial release of core color variables, typography styles, and primary button components. Click Publish.

3. Consume Published Library in Secondary Files:

   • Open a completely new, separate Figma design file.

   • Open Assets panel $\rightarrow$ Library book icon. Toggle your Global Design System - Core Library switch to On.

   • Drag components out from the assets menu panel into your new file canvas.

Day 35: Mobile App Design Project (Shopping App)

Lecture & Theory

Applying Phase 3 principles, you will design a high-fidelity mobile e-commerce shopping experience consisting of three primary views: Home Product Discovery, Category Filter Feed, and Product Detail View.

This project emphasizes modular design system library usage, high-contrast typography hierarchies, card grid layouts, and realistic content population.

Step-by-Step Instructions

1. Set Up Project Workspace:

   • Create three iPhone 15 Pro frames (393 x 852 px).

   • Apply a 4-column layout grid ($Margin: 16, Gutter: 12$).

2. Build Screen 1 (Home Discovery):

   • Top Header: User Greeting, Search Input Bar component, Cart Icon badge.

   • Hero Banner Auto Layout Card: Promotional background image fill, callout text (50% Off Summer Collection), and a Shop Now CTA button.

   • Category Chips: Horizontal Auto Layout frame of rounded pill components (All, Shoes, Clothing, Accessories).

3. Build Screen 2 (Product Grid Feed):

   • Header: Category title (Shoes), Filter Action icon.

   • 2-Column Product Card Grid: Create a master Product Card Auto Layout component containing an image fill box ($165 \times 160$ px), Heart wishlist icon toggle, Brand Label text, Price Label text ($129.00), and Add to Cart button instance. Duplicate cards to populate a 2-column grid.

4. Build Screen 3 (Product Detail Page):

   • Full-width top hero image carousel frame ($393 \times 360$ px).

   • Title text layer (Nike Air Max 270), Star Rating badge, Description body paragraph.

   • Size Selector Component: Horizontal Auto Layout row of selectable circular buttons (US 8, US 9, US 10).

   • Sticky Bottom Bar: Price Label left, Add to Cart Primary Button right.

Day 36: Web Design Project (Landing Page)

Lecture & Theory

Web landing pages require structural visual layouts designed to guide site visitors through a conversion funnel. Unlike mobile design, web layouts utilize wide desktop viewports (such as 1440px wide frames) supported by 12-column layout grids.

Core web design sections include: Nav Bar, Hero Header (Value proposition + CTA), Social Proof/Logo Ticker, Feature Cards, Pricing Matrix, Testimonials, and Footer.

Step-by-Step Instructions

1. Setup Frame and Grid:

   • Create a Desktop Frame (1440 x 2400 px).

   • Apply a 12-Column Layout Grid ($Type: Stretch, Count: 12, Margin: 80, Gutter: 24$).

2. Construct Desktop Hero Section:

   • Nav Bar: Horizontal Auto Layout spanning 12 columns. Logo far left, Navigation Links middle (Features, Pricing, About), Primary Button far right (Get Started).

   • Hero Grid Content: In columns 1–6, place an H1 headline (Empower Your Workflow with AI), sub-headline text, and an input box + button group. In columns 7–12, place a high-fidelity web dashboard preview graphic container.

3. Build Feature Grid Section:

   • Place a centered H2 section heading (Why Choose Our Platform).

   • Create a 3-column feature card layout array (each card spanning 4 grid columns wide) utilizing Auto Layout containers with 24px padding and drop shadows.

4. Build Footer Region:

   • Full-width dark background container (#0F172A). 4-column link lists (Product, Company, Resources, Legal) and copyright bar at bottom.

Day 37: Dashboard Design

Lecture & Theory

Dashboard interfaces focus on data visualization, information density, functional management controls, and structured metric tracking.

Designing functional dashboards requires clear structural layout partitioning:

• Persistent Side Navigation Drawer: Fixed vertical bar containing primary app section navigation links.

• Top Utility Header: Search inputs, notification bell badges, user profile dropdowns.

• Main Canvas Work Area: Dynamic widget grids containing Key Performance Indicators (KPI metrics cards), data charts, and data tables.

Step-by-Step Instructions

1. Set Up Dashboard Layout Architecture:

   • Create a large Frame (1440 x 900 px, Fill: #F8FAFC).

   • Place a left vertical Auto Layout sidebar frame ($W: 240, H: 900$, Fill: #FFFFFF). Add logo at top and vertical menu item buttons.

   • Place a top horizontal header bar frame ($W: 1200, H: 64$, Fill: #FFFFFF) pinned to top right ($X: 240, Y: 0$).

2. Build Metric KPI Cards:

   • Create an Auto Layout component card ($W: 270, H: 120, R: 12$, Fill: #FFFFFF, Border: #E2E8F0).

   • Top Row: Metric Title text (Total Revenue) left, Context Icon right.

   • Middle Row: Big Numerical Value text ($48,294.00, 28px Bold).

   • Bottom Row: Trend Badge pill (+12.5% Green fill text).

   • Place 4 KPI cards side-by-side in a horizontal row across the main canvas content area.

3. Build a Data Chart Placeholder Widget:

   • Create a card frame ($W: 700, H: 380$). Add chart title (Monthly Analytics).

   • Use the Pen Tool (P) to draw a smooth, vector line chart curve across the card area. Add vertical column guides to mark months ($Jan, Feb, Mar$).

Day 38: Portfolio Site

Lecture & Theory

A UX/UI designer’s portfolio homepage communicates visual competency, personal branding, structural discipline, and case study problem-solving capabilities to hiring managers and potential clients.

Key structural elements include an impactful Hero Intro Statement, Featured Case Study Cards (displaying project thumbnail graphics, role tags, and problem/solution summaries), an About/Skills section, and a Contact CTA section.

Step-by-Step Instructions

1. Setup Frame and Hero Section:

   • Create a Desktop Frame (1440 x 1800 px, Fill: #090D16 Dark Theme).

   • Hero Content: Place a prominent typography statement: Hi, I'm Alex 👋 — UI/UX Architect crafting accessible design systems and digital products.

2. Build Featured Case Study Cards:

   • Create a large horizontal Auto Layout card frame ($W: 1280, H: 420, R: 24$, Fill: #1E293B).

   • Left Side (Text Content, 50% width): Category Tag (Mobile Fintech App), Title (Reimagining Digital Banking for Gen Z), Description text paragraph, Tag Pills (UX Research, Design System, Figma), and a View Case Study → Link Button.

   • Right Side (Visual Mockup, 50% width): High-fidelity mobile app screen mockups angled visually or cropped inside an outer card frame.

   • Duplicate this card layout vertically to showcase 3 distinct portfolio projects.

3. Footer CTA Section:

   • Centered section at bottom: H2 Title (Let's build something great together), Email button (alex@design.com), and Social Links (LinkedIn, GitHub, Dribbble).

Day 39: E-Commerce Site Flow

Lecture & Theory

E-commerce UX relies on frictionless conversion paths. Designing an e-commerce web user flow requires mapping structural navigation from a high-level Product Listing Page (PLP) to a specific Product Detail Page (PDP), into an interactive Slide-Out Cart Drawer, and through a multi-step Checkout Screen.

Step-by-Step Instructions

1. Set Up Multi-Screen E-Commerce Flow Frames:

   • Create 3 Desktop Frames (1440 x 900 px): PLP - Product List, PDP - Detail View, Checkout.

2. Build Product Listing Page (PLP):

   • Top Navbar with Search and Cart Badge Icon (Count: 3).

   • Left Sidebar Filter Panel ($W: 240$ px): Checkbox categories (Brands, Price Range, Color, In Stock).

   • 3-Column Product Grid: Product cards with images, prices, titles, and Quick Add hover buttons.

3. Wire Interactive Cart Overlay Drawer:

   • Create a detached tall frame ($W: 420, H: 900$, Fill: #FFFFFF) named Drawer / Cart.

   • Include vertical list of cart item cards (Item photo thumbnail, Title, Quantity Incrementor [-] 1 [+], Item Price, and Trash delete icon).

   • Bottom Sticky Area: Subtotal summary amount ($258.00), and a primary CTA button labeled Proceed to Checkout.

   • Switch to Prototype mode (Shift + E). Link the Navbar Cart Icon on PLP to open Drawer / Cart as a right-pinned Overlay (Slide In from Right).

4. Link Checkout Flow:

   • Link Proceed to Checkout button inside the Cart Overlay directly to the Checkout screen frame.

Day 40: Blog Layout

Lecture & Theory

Editorial and blog layouts focus primarily on reading ergonomics, text legibility, visual contrast, line lengths, and content scannability.

Designing readable editorial content requires setting explicit typographic constraints:

• Optimal Measure (Line Length): $45\text{ to }75\text{ characters per line}$ (typically a text block width between $600\text{px and }720\text{px}$).

• Generous Line Height: $150\%\text{ to }160\%$ of font size for body paragraph text.

• Vertical Paragraph Spacing: Clear gaps between text blocks to reduce cognitive fatigue.

Step-by-Step Instructions

1. Setup Editorial Page Frame:

   • Create a Desktop Frame (1440 x 1600 px, Fill: #FFFFFF).

2. Build Editorial Header Region:

   • Centered Article Header Container ($W: 800$ px): Category Pill Tag (Design Systems), Article Title H1 (The Future of Auto Layout in Modern UI Architecture, Inter Bold 44px, Line Height 52px), Author Byline Avatar Row (Author Photo, Name Sarah Chen, Date July 28, 2026, Read Time 8 min read).

   • Full-bleed Hero Feature Image ($W: 1120, H: 500, R: 16$).

3. Structure Content Column:

   • Centered Main Text Block Auto Layout Frame ($W: 680$ px).

   • Set body copy text properties: Font Size 18 px, Line Height 28 px ($155\%$), Color #334155.

   • Interleave rich media blocks: Sub-heading H2 text blocks, Blockquote callout frames (Left border stroke 4px solid blue, light grey background fill, italicized text), and inline photo illustrations with caption text below.

4. Add Interactive Comments Section:

   • Bottom area ($W: 680$ px): Input box frame (Add a comment...), Post Comment button, and a vertical nested thread list of user comment cards.

Day 41: Interactive Prototype Project

Lecture & Theory

This project focuses on combining advanced dynamic prototyping mechanics—specifically linking simultaneous triggers (On Drag, While Hovering, On Scroll) alongside Smart Animate transitions to create high-fidelity user interactions.

Step-by-Step Instructions

1. Create an Expandable Bottom Sheet Component:

   • Create a mobile screen frame. Place a detached frame at bottom ($W: 393, H: 600, R: 24$, Fill: #FFFFFF) representing a map details bottom sheet. Name this frame Sheet / Expanded.

   • Create a duplicate copy of the screen frame, but push the bottom sheet frame down vertically off the screen bottom edge so only its top 80px pull-handle bar remains visible. Name this frame Sheet / Collapsed.

2. Wire On-Drag Interaction Triggers:

   • Switch to Prototype mode (Shift + E).

   • Select the top pull-handle bar layer inside Sheet / Collapsed.

   • Drag a prototype connection wire arrow to Sheet / Expanded.

   • Set Trigger = On drag, Action = Navigate to, Animation = Smart Animate, Easing: Ease Out, 300ms.

   • Select the handle bar on Sheet / Expanded and drag a wire back to Sheet / Collapsed using identical On drag settings.

3. Test Gesture Interaction:

   • Open Inline Preview (Shift + Spacebar). Click-and-drag your mouse upward on the sheet drag-handle to pull the bottom sheet up over the map, then drag it downward to collapse it smoothly back off screen.

Day 42: Micro-Interactions

Lecture & Theory

Micro-interactions are targeted functional animations that communicate status feedback, reward user actions, and provide visual delight (e.g., animated heart "Like" buttons, subtle button hover elevations, animated toggle switches, or circular progress indicators).

Micro-interactions are built inside Component Sets utilizing While hovering, While pressing, and After delay prototype triggers combined with Smart Animate.

Step-by-Step Instructions

1. Build an Animated Heart Like Button Component:

   • Draw an outlined heart vector icon ($24 \times 24$ px, Stroke: #64748B, Fill: None). Turn into a Component set named Component / Like Button.

   • Add Variant 2: Scale heart vector path up slightly ($28 \times 28$ px, Stroke: #EF4444, Fill: #EF4444 Solid Red).

   • Add Variant 3: Scale heart back down to $24 \times 24$ px (Stroke: #EF4444, Fill: #EF4444).

2. Wire State Transition Triggers:

   • Link Variant 1 (Outline) $\rightarrow$ Variant 2 (Scaled Up): Trigger = On click, Action = Change to, Animation = Smart Animate, 150ms.

   • Link Variant 2 (Scaled Up) $\rightarrow$ Variant 3 (Final Filled): Trigger = After delay (100ms), Action = Change to, Animation = Smart Animate, 150ms.

3. Build an Elevated Hover Button:

   • Create a Component button. Variant 1 (Default): Shadow none, $Y: 0$. Variant 2 (Hover): Drop Shadow $Y: 8$, Translate position up $Y: -2\text{px}$.

   • Link Variant 1 $\rightarrow$ Variant 2: Trigger = While hovering, Action = Change to, Animation = Smart Animate, 200ms.

4. Test Micro-Interactions: Place instances of both components on a frame and run Inline Preview to test real-time feedback.

Day 43: Accessibility (WCAG Compliance)

Lecture & Theory

Accessible UI design ensures digital products are fully usable by people with visual, motor, auditory, or cognitive impairments. Web Content Accessibility Guidelines (WCAG 2.1) require specific minimum color contrast ratios for text legibility:

• Level AA Requirement: Minimum contrast ratio of 4.5:1 for standard body text, and 3.0:1 for large heading text ($\ge 24\text{px}$ or $18\text{px Bold}$).

• Non-text Contrast: Minimum contrast ratio of 3.0:1 for UI components, input borders, and focus state indicators.

Step-by-Step Instructions

1. Install Contrast Checker Plugin:

   • Press Shift + I (Resources) $\rightarrow$ Plugins tab.

   • Search for Stark or Contrast plugin and click Run.

2. Audit Text Contrast Ratios:

   • Select a text layer displaying light grey text (#94A3B8) placed over a white frame background (#FFFFFF).

   • Run the Contrast plugin. Observe the resulting analysis report: Contrast Ratio reads 2.7:1 (Fails WCAG AA standards).

   • Modify the text color swatch in the design panel to a darker slate shade (#475569).

   • Re-run the contrast inspector tool. Confirm the contrast ratio now meets or exceeds 4.5:1 (Passes WCAG AA).

3. Verify Focus Indicators and Target Sizes:

   • Audit touch target sizes on mobile screens: Ensure all interactive buttons, icon hits, and input fields maintain a minimum hit boundary box size of at least $44 \times 44$ px.

Day 44: Testing & Iteration

Lecture & Theory

Usability testing evaluates UI designs by observing real users attempting to accomplish specific tasks within interactive prototypes.

Post-test analysis identifies user friction points, navigation confusion, broken visual mental models, and copy clarity issues. Designers then execute structural design iterations to fix highlighted usability issues.

Step-by-Step Instructions

1. Prepare Prototype Test Links:

   • Open your 5-screen interactive application prototype.

   • Click Share at top right. Set permission to Anyone with the link can view.

   • Click Copy link.

2. Formulate Task Scenarios for Test Users:

   • Write down explicit functional user tasks:

     • Task 1: "Locate the running shoes section and filter items by size 10."

     • Task 2: "Add a selected item to your shopping cart and open the checkout screen."

3. Log Feedback and Execute Design Iterations:

   • Observe a user interacting with the prototype (or review recorded screen session feedback).

   • Identify friction points (e.g., "User clicked on a non-clickable static banner image expecting it to navigate to the catalog").

   • Drop anchored Comments (C) on the exact canvas screen areas where errors occurred.

   • Execute immediate visual iterations: convert the static banner into an active clickable button container component.

Day 45: Milestone Project — 6+ Page Full Website Prototype

Lecture & Theory

Phase 3 culminates in designing and prototyping a complete multi-page responsive corporate website experience consisting of 6+ interconnected page frames:

1-Home, 2-About Us, 3-Services, 4-Pricing Matrix, 5-Blog Index, and 6-Contact Us.

Step-by-Step Instructions

1. Set Up Multi-Page Desktop Architecture:

   • Create 6 Desktop Frames (1440 x 1200 px each) aligned cleanly in two rows on your canvas.

   • Apply a standardized 12-Column Grid to all 6 frames ($Margin: 80, Gutter: 24$).

2. Implement Global Master Navigation Header & Footer:

   • Create a master Auto Layout Navbar Component (Logo, Home, About, Services, Pricing, Blog, Contact, Get Started Button).

   • Create a master Footer Component.

   • Place instances of the Navbar and Footer components on all 6 page frames in identical top/bottom layout positions.

3. Populate Unique Page Contents:

   • Page 1 (Home): Hero banner, Feature matrix grid, Testimonials carousel, CTA strip.

   • Page 2 (About): Company story timeline, Team member photo grid with hover card states.

   • Page 3 (Services): Service offering cards, Process step-by-step flow.

   • Page 4 (Pricing): Monthly/Annual toggle switch (Interactive Component) and 3 Tiered Pricing Cards (Starter, Pro, Enterprise).

   • Page 5 (Blog Index): Featured article hero, 3-column article card feed with category tags.

   • Page 6 (Contact): Interactive input form fields (Name, Email, Message), Map embed graphic, and Send Message CTA.

4. Wire End-to-End Navigation Prototype:

   • Switch to Prototype mode (Shift + E). Link every navbar text menu link instance across all 6 pages to its corresponding target screen frame.

   • Launch Presentation mode (Control + Option + Enter) and execute a complete click-through audit across all 6 pages.

🚀 Phase 4: Advanced Skills (Days 46–60)

Day 46: Advanced Smart Animate

Lecture & Theory

Advanced Smart Animate leverages morphing, path interpolation, relative spatial positioning, and layer matching to create complex screen transitions—such as expanding a compressed list item card smoothly into a full-screen detail view.

Successful Smart Animate execution requires keeping exact layer structural hierarchies and matching layer names across both source and destination frames.

  Source Frame: List View                      Destination Frame: Detail View
  ┌───────────────────────┐                    ┌───────────────────────────────┐
  │ [Card Component A]    │ ──Smart Animate──► │ [Card Component A: Expanded]  │
  │  ├─ "Hero Image"      │                    │  ├─ "Hero Image" (Full Bleed) │
  │  └─ "Title Text"      │                    │  └─ "Title Text" (Large Font) │
  └───────────────────────┘                    └───────────────────────────────┘

Step-by-Step Instructions

1. Build Source Frame (List View):

   • Create a mobile screen frame. Place a small card frame ($W: 345, H: 100, R: 16$, Fill: #1E293B) inside it.

   • Inside the card, place an image layer named Hero Photo ($80 \times 80$ px) and a text layer named Card Header (Card Title Text).

   • Name this source frame Screen / List View.

2. Build Destination Frame (Expanded Detail View):

   • Duplicate the entire screen frame (Cmd + D). Name it Screen / Detail View.

   • Inside Screen / Detail View, resize the card container frame to fill the entire screen viewport ($393 \times 852$ px, $R: 0$).

   • Select Hero Photo layer inside: resize it to fill top banner area ($393 \times 300$ px).

   • Select Card Header text layer inside: scale font size up to 28 px and move below image banner.

3. Wire Advanced Smart Animate Trigger:

   • Switch to Prototype Mode (Shift + E).

   • Link card frame on Screen / List View $\rightarrow$ Screen / Detail View.

   • Set Trigger = On click, Action = Navigate to, Animation = Smart Animate, Easing = Custom Spring ($Mass: 1, Stiffness: 100, Damping: 15$).

4. Test Card Expansion: Run Inline Preview (Shift + Spacebar). Click the card item and watch it morph smoothly into the full detail view.

Day 47: Advanced Overlays

Lecture & Theory

Advanced Overlays manage multi-layered UI depth contexts—such as nesting a slide-out shopping cart drawer overlay over a base screen, which then launches a secondary modal dialogue confirm overlay on top of itself.

Controlling overlay placement coordinates, backdrop darkeners, and stacking orders is critical for complex web application workflows.

Step-by-Step Instructions

1. Create Base Screen and Drawer Overlay:

   • Base Screen: Desktop / Storefront.

   • Drawer Frame: Detached tall frame ($W: 400, H: 900$, Fill: #FFFFFF) named Overlay / Shopping Cart. Add items list and a Checkout button.

2. Create Secondary Nested Confirm Modal Overlay:

   • Create a second detached square frame ($W: 320, H: 200, R: 16$, Fill: #FFFFFF) named Overlay / Confirm Discount. Add promo code text and an Apply button.

3. Wire Multi-Layered Overlay Triggers:

   • In Prototype Mode (Shift + E), link the Navbar Cart Icon on Desktop / Storefront to Overlay / Shopping Cart (Action: Open overlay, Position: Top Right, Animation: Slide In from Right).

   • Inside Overlay / Shopping Cart, link a Have a promo code? text link to Overlay / Confirm Discount (Action: Open overlay, Position: Centered, Animation: Dissolve).

4. Test Stacking Behavior: Run preview mode. Open the cart drawer overlay, then click the promo link to verify the second confirmation overlay renders centered on top of the open drawer backdrop smoothly.

Day 48: Advanced Interactive Components

Lecture & Theory

Advanced Interactive Components involve embedding complex nested micro-interactions across multi-property component sets (e.g., an interactive Tab Bar Component where clicking individual tab items switches active indicator states internally without triggering page frame reloads).

Step-by-Step Instructions

1. Build Individual Tab Item Component Set:

   • Create a component named Tab Item.

   • Variant 1 (Active = False): Text color #64748B, Indicator bar height 0 px.

   • Variant 2 (Active = True): Text color #2563EB, Indicator bar height 3 px solid blue.

2. Assemble Master Tab Bar Component:

   • Place three Tab Item component instances (Home, Analytics, Settings) side-by-side inside a horizontal Auto Layout frame container.

   • Combine variants into a master component set named Navigation Header:

     • Variant 1: Tab 1 Active (Home = True, Analytics = False, Settings = False)

     • Variant 2: Tab 2 Active (Home = False, Analytics = True, Settings = False)

     • Variant 3: Tab 3 Active (Home = False, Analytics = False, Settings = True)

3. Wire Internal Variant State Triggers:

   • In Prototype Mode (Shift + E), wire the Analytics tab item instance inside Variant 1 to point directly to Variant 2 (Action: Change to, Animation: Smart Animate, 200ms).

   • Wire remaining tab item triggers across all three variant states.

4. Deploy and Test: Drag an instance of Navigation Header onto a dashboard screen frame and test tab state switching in preview mode.

Day 49: Advanced Scroll Groups

Lecture & Theory

Complex application interfaces frequently feature nested multi-directional scroll regions—for example, a vertical mobile social feed frame containing embedded horizontal product carousels, alongside sticky pinned top headers and sticky bottom navigation bars.

Step-by-Step Instructions

1. Build Nested Scroll Architecture:

   • Create a tall content container frame ($W: 393, H: 1800$ px) named Feed Container.

   • Add vertical content cards down the frame length.

   • At $Y: 400$ px position inside the feed, insert a horizontal product carousel Auto Layout container ($W: 800, H: 220$ px). Turn on Horizontal Overflow Scrolling on the carousel container frame.

2. Wrap Feed Container inside Screen Viewport Frame:

   • Place Feed Container inside a standard iPhone 15 Pro frame ($393 \times 852$ px).

   • Enable Vertical Overflow Scrolling on the main iPhone parent frame.

3. Apply Fixed Pinning Controls:

   • Select the top App Bar header layer and bottom Tab Bar layer inside the iPhone frame.

   • Look at the right panel under Prototype tab.

   • Set Positioning dropdown box to Fixed (when scrolling).

4. Test Nested Multi-Directional Scrolling:

   • Launch Presentation Mode (Control + Option + Enter).

   • Scroll vertically down the feed: Observe the top/bottom bars remaining fixed in place while the feed content glides beneath them.

   • Scroll horizontally across the carousel widget embedded inside the feed list.

Day 50: Advanced Design Systems

Lecture & Theory

Scaling enterprise design systems requires structuring organized Library Files that export atomic design tokens, base component primitives, complex operational organisms, and page layout templates.

Maintaining design systems involves managing structural library updates, tracking version control changelogs, evaluating component deprecations, and distributing library updates smoothly to consumer design team files.

Step-by-Step Instructions

1. Organize Design System Library Architecture:

   • Open your master library file: Global Design System - Core Library.

   • Group component assets using slash naming conventions in the Layers Panel:

     • Button / Primary / Default

     • Button / Primary / Hover

     • Input / Text / Unfocused

     • Input / Text / Focused

2. Publish System Library Changes:

   • Make a visual update to a core atomic token (e.g., adjust global border radius token value from 8 px to 10 px).

   • Open Assets Panel (Option + 2) $\rightarrow$ Click Library book icon $\rightarrow$ Click Publish updates.

   • Type a clear version changelog message: Updated global component corner radius tokens from 8px to 10px across core button and input primitives. Click Publish.

3. Accept Library Updates in Consumer File:

   • Open your project design file consuming the published library.

   • Look at the bottom right corner of the screen: A notification toaster popup appears: Library updates available.

   • Click Review. A diff inspection window opens showing visual side-by-side comparisons of component updates. Click Update all.

Day 51: Developer Handoff

Lecture & Theory

Developer handoff is the transition bridge between UI visual design and frontend software engineering execution. Figma's dedicated Dev Mode provides developers with inspect tools to extract precise CSS/Swift UI/React Native code snippets, measure pixel distances, inspect component variant properties, download assets, and track design change diffs.

  Design View ──(Toggle Dev Mode Shift + D)──► Dev Mode Inspector Panel
                                               ├── CSS / Tokens Code Specs
                                               ├── Box Model Padding Measurements
                                               └── Production Asset Exports

Step-by-Step Instructions

1. Toggle Dev Mode Workspace:

   • Look at the absolute top right corner of the application window.

   • Click the Dev Mode Toggle Switch (icon featuring code brackets </>, or press Shift + D).

   • Notice the application workspace interface changes to an inspection green theme interface.

2. Inspect Object Code Properties and Box Models:

   • Click any Auto Layout button component on the canvas.

   • Look at the right-hand inspection panel.

   • Inspect the generated code section box: View production-ready CSS Flexbox code rules (display: flex; flex-direction: row; padding: 12px 24px; gap: 8px; background: #2563EB; border-radius: 8px;).

3. Measure Pixel Distances:

   • Hover your cursor over a card layer while holding your mouse position over neighboring layout elements.

   • Red measurement line guides instantly display exact bounding padding and spatial margin gaps in pixels ($16\text{px}, 24\text{px}$).

4. Mark Status for Production:

   • Select a completed screen frame. In the top right sidebar panel, change frame development status tag from In Development to Ready for dev.

Day 52: Collaboration Workflow

Lecture & Theory

Professional design operations rely on clear review workflows: managing design system branching, organizing real-time critique sessions, managing async comment threads, assigning tasks, and establishing explicit file approval statuses.

Step-by-Step Instructions

1. Create File Branching (Organization Plan Feature):

   • Click the file title dropdown arrow at top toolbar.

   • Select Create branch. Name the working branch Feature / Dark-Mode-Navigation.

   • Execute experimental design iterations safely inside the isolated branch without altering the main production file.

2. Merge Branch Changes:

   • Click the file title dropdown arrow $\rightarrow$ Select Merge branch.

   • Review visual diff comparison changes against the main file. Click Merge.

3. Conduct Asynchronous Review Process:

   • Select a screen frame requiring feedback. Click the Comment Tool (C).

   • Tag a reviewer: @SeniorLead Please audit text contrast ratios on this card.

   • Use section status stamps: Draw a Section frame container around a group of screens (Shift + S). Label the section tag In Review or Approved.

Day 53: Responsive Web Design

Lecture & Theory

Responsive web design ensures digital layouts adjust fluidly across disparate device screen screen widths: Desktop ($1440\text{px}$), Tablet ($768\text{px}$), and Mobile ($375\text{px}$).

Achieving responsiveness in Figma requires leveraging Auto Layout containers set to Fill Container (fluid horizontal stretch) alongside fixed layout grid margins and adaptive component reflowing.

Step-by-Step Instructions

1. Set Up Multi-Device Breakpoint Frames:

   • Create 3 frames side-by-side: Desktop ($1440 \times 900$ px), Tablet ($768 \times 1024$ px), Mobile ($375 \times 812$ px).

2. Construct Responsive Auto Layout Layouts:

   • Create a 3-card feature container on Desktop ($1440$ px). Wrap the cards in a horizontal Auto Layout frame. Set each card width to Fill container (or $33\%$ width).

   • Stretch the desktop frame parent width manually: Notice how the three inner cards resize fluidly.

3. Adapt Layout Layouts Down to Mobile Breakpoints:

   • Copy the feature container to the Tablet frame ($768$ px): Change Auto Layout direction from Horizontal to Vertical (or 2-column wrapped grid).

   • Copy the container to the Mobile frame ($375$ px): Set Auto Layout direction to Vertical Stack (1-column full width), and change inner card width rules to Fill container ($100\%$ width).

  Desktop (1440px):  [ Card 1 ] [ Card 2 ] [ Card 3 ]  (Horizontal Flex)

  Mobile (375px):    [     Card 1     ]
                     [     Card 2     ]                (Vertical Flex)
                     [     Card 3     ]

Day 54: Cross-Platform Design

Lecture & Theory

Designing cross-platform digital applications requires adapting core brand experiences to comply with platform-specific native UI guidelines: Apple iOS Human Interface Guidelines (HIG) vs. Google Material Design 3 (M3).

• iOS UI Conventions: Centered navbar titles, bottom tab bars with outline icons, back button navigation labels (◄ Back), segmented control pills.

• Android UI Conventions: Left-aligned app bar titles, floating action buttons (FAB), bottom navigation bars with active indicator pills, system top status bars.

Step-by-Step Instructions

1. Set Up Platform-Specific Screen Containers:

   • Frame 1: Platform / iOS - iPhone 15 Pro ($393 \times 852$ px).

   • Frame 2: Platform / Android - Pixel 8 ($412 \times 915$ px).

2. Design Native iOS Interface:

   • Top Header: Place native iOS Navigation Bar component ($393 \times 44$ px) featuring centered title text (Settings) and a blue chevron left back button (◄ Account).

   • Navigation: Place native iOS Tab Bar component at bottom ($393 \times 83$ px) featuring thin vector line icons.

3. Design Native Android Material Design 3 Interface:

   • Top Header: Place M3 Top App Bar component featuring left-aligned title text (Settings) and a left arrow icon button.

   • Floating Action Button: Add a round square M3 FAB button ($56 \times 56$ px, Fill: Accent Primary Container) placed at bottom right above the nav bar.

   • Navigation: Place native M3 Navigation Bar at bottom featuring active pill selection indicators behind icons.

Day 55: Advanced Prototyping

Lecture & Theory

This master project synthesizes Phase 4 techniques into an advanced interactive application prototype flow: combining Smart Animate screen transitions, nested Interactive Components, multi-layer Overlays, horizontal/vertical Scroll Groups, and variable state switches.

Step-by-Step Instructions

1. Structure Application Screens:

   • Create 4 interconnected frames: 1-Feed, 2-Item Detail, 3-Cart Drawer, 4-Checkout Success.

2. Implement Interactive Components:

   • Place interactive Heart Like buttons, interactive Toggle Switches, and an interactive Tab Bar Component across screens.

3. Wire Advanced Prototype Interactions:

   • Feed $\rightarrow$ Detail View: Link a product thumbnail card on Screen 1 to Screen 2 using Smart Animate (350ms Custom Spring) to morph the image thumbnail into a full hero banner photo.

   • Detail View $\rightarrow$ Cart Overlay: Link an Add to Cart button on Screen 2 to launch Screen 3 as an Overlay Drawer (Slide In from Right, Close when clicking outside, dark backdrop $50\%$ opacity).

   • Cart Overlay $\rightarrow$ Checkout: Link Pay Now button inside Cart Overlay to Navigate to Screen 4 (Checkout Success) with a celebratory confetti Lottie/Smart Animate scale-up micro-interaction.

4. Audit Flow: Run full presentation mode and conduct an end-to-end interactive audit.

Day 56: Portfolio Project (High-Fidelity App)

Lecture & Theory

To prepare for professional presentation, you will execute a high-fidelity, polished mobile application design consisting of a minimum of 6 fully realized screens built strictly using scalable design tokens, responsive Auto Layout containers, and published library components.

Step-by-Step Instructions

1. Define Application Scope and System Assets:

   • Choose an application vertical: Fintech Investment Dashboard, Fitness Activity Tracker, or Travel Booking Engine.

   • Create 6 iPhone 15 Pro frames (1-Onboarding, 2-Dashboard, 3-Search/Filter, 4-Item Details, 5-User Profile, 6-Settings).

2. Apply Design Tokens and Components:

   • Ensure every shape fill, border, and background is bound to a centralized global Variable Color Token.

   • Ensure all text elements are bound to global Typography Styles.

   • Ensure all UI cards, input fields, buttons, and nav bars are Auto Layout Component Instances.

3. Refine Visual Details:

   • Add realistic high-resolution photographs using the Unsplash plugin.

   • Populate realistic content data (names, dates, dollar amounts) using Content Reel plugin.

   • Verify all color contrast ratios meet or exceed WCAG AA standards ($4.5:1$).

Day 57: Client Presentation

Lecture & Theory

Designers must effectively articulate design decisions to executive stakeholders, clients, and cross-functional teams. Presenting design work requires framing decisions around user problems, business objectives, design system consistency, and technical feasibility rather than subjective aesthetic preferences.

  Presentation Arc:
  1. Business/User Problem  ──► 2. Strategic Rationale ──► 3. Prototype Demonstration

Step-by-Step Instructions

1. Structure Figma Deck Frames:

   • Create presentation deck frames (1920 x 1080 px) directly inside your Figma file:

     • Slide 1: Project Title & Executive Summary.

     • Slide 2: Target User Personas & Core Problem Statement.

     • Slide 3: Design System Tokens & Component Overview.

     • Slide 4: Embedded Interactive Prototype Video / Live Demo Link.

     • Slide 5: Usability Test Results & Measurable Impact Metrics.

2. Configure Presentation Mode Deck:

   • In Prototype Mode (Shift + E), wire slide frames sequentially (Slide 1 $\rightarrow$ Slide 2 via On Key Press: Right Arrow or On Click).

3. Execute Live Stakeholder Walkthrough:

   • Launch Presentation Mode (Control + Option + Enter). Walk through deck slides logically, explaining why specific layout structures, color systems, and interaction patterns were chosen to solve the core business problem.

Day 58: Usability Testing

Lecture & Theory

Executing structured usability testing validates whether your finalized high-fidelity interactive prototype effectively solves user friction. Collecting qualitative feedback (user observations, verbalized think-aloud notes) and quantitative metrics (task completion rates, error rates, task completion times) drives data-backed design refinements.

Step-by-Step Instructions

1. Set Up a Usability Feedback Grid inside Figma:

   • Create a dedicated canvas frame ($W: 1200, H: 800$, Fill: #F8FAFC) named Research / Feedback Matrix.

   • Create a 4-quadrant grid table using sticky note component frames:

     • Top Left (Green): What Worked Well (Positive Feedback).

     • Top Right (Red): Friction Points & Task Failures.

     • Bottom Left (Yellow): User Questions & Confusion.

     • Bottom Right (Blue): Feature Ideas & Iteration Actions.

2. Conduct Usability Testing Sessions:

   • Share interactive prototype link with 3 to 5 test participants.

   • Observe participants attempting to complete core task flows without guiding or prompting them.

3. Document and Prioritize Iteration Actions:

   • Populate sticky notes inside the matrix table in real-time during user session reviews.

   • Group common sticky notes into affinity clusters to identify high-priority iteration fixes.

Day 59: Final Polish

Lecture & Theory

Prior to publishing a design file for portfolio showcase or engineering handoff, designers execute a comprehensive Quality Assurance (QA) Audit.

A final polish audit verifies:

1. Visual Hierarchy & Typography Realignment: Eliminating unstyled text layers.

2. Spatial Grid Precision: Ensuring all padding and gaps adhere strictly to the 8pt spatial grid system.

3. Clean Layer Architecture: Removing empty unused scratchpad layers, grouping orphan elements, and renaming generic layer names (Rectangle 142 $\rightarrow$ Card Background).

4. Accessibility Verification: Double-checking WCAG AA contrast compliance and touch target boundaries.

Step-by-Step Instructions

1. Run Design System & Unused Style Linter:

   • Press Shift + I (Resources) $\rightarrow$ Plugins tab. Search for Design Lint or Use Automated Linter and click Run.

   • Review the automated audit log report listing unlinked color swatches, missing typography styles, or broken auto layout constraints. Click errors to fix them automatically.

2. Clean Layer Panel Hierarchy:

   • Select all primary screen frames. Expand layer trees in the left sidebar panel.

   • Rename generic groups (Group 42) to descriptive component names (Header Bar).

   • Delete detached scratchpad visual elements scattered around canvas workspace edges.

3. Verify Spatial Pixel Geometry:

   • Select layout containers while holding Option (macOS) or Alt (Windows) to measure spatial gaps. Verify all gaps equal standard 8pt grid metrics ($8\text{px}, 16\text{px}, 24\text{px}, 32\text{px}$).

Day 60: Final Project — Portfolio Showcase Case Study

Lecture & Theory

Congratulations on reaching Day 60! To conclude your 60-day Figma curriculum, you will synthesize your learnings into a professional Portfolio Case Study Showcase Presentation housed in a clean, production-ready Figma document.

Your portfolio case study will document your complete end-to-end design engineering process—from initial research wireframes to production-ready design systems, responsive web/mobile screens, interactive prototype flows, and developer specifications.

  ================================================================================
  🏆 DAY 60 CAPSTONE: PORTFOLIO CASE STUDY SHOWCASE
  ================================================================================
  Section 1: Hero Cover Graphic & Project Overview
  Section 2: Problem Statement, Research & Low-Fidelity Wireframes
  Section 3: Design System Architecture (Tokens, Typography, Component Libraries)
  Section 4: High-Fidelity Responsive Multi-Platform Screens (Desktop & Mobile)
  Section 5: Interactive Prototype Showcase (Smart Animate & Overlays)
  Section 6: Developer Handoff Specs & Accessibility Audit Report
  ================================================================================

Step-by-Step Instructions

1. Structure a Master Showcase Canvas Frame:

   • Create a large presentation canvas frame (1920 x 4800 px, Fill: #0F172A Dark Canvas) named Portfolio Case Study - Master Showcase.

2. Assemble Section 1 — Hero & Problem Statement:

   • Header ($1920 \times 600$ px): Large typography title (E-Commerce Ecosystem — End-to-End UI/UX Case Study), Subtitle, Role Tag Pills (Product Designer, Design System Lead), and an angled 3D-perspective hero mockup graphic displaying responsive mobile and desktop screens side-by-side.

3. Assemble Section 2 — Research & Low-Fidelity Architecture:

   • Place grayscale wireframes (Day 31) side-by-side with user journey flow charts and feedback iteration notes.

4. Assemble Section 3 — Design System Showcase:

   • Embed a live visual documentation panel displaying your published Variable Token Swatches (Light & Dark modes), Typography Scale Hierarchy, and interactive Variant Component Sets (Buttons, Inputs, Nav Bars).

5. Assemble Section 4 — High-Fidelity Multi-Platform Screens:

   • Display high-fidelity Responsive Web Desktop Pages ($1440$ px) side-by-side with corresponding Mobile App Screens ($393$ px).

   • Annotate key UX decisions using callout badges pointing directly to specific card components, layout grids, and navigation patterns.

6. Assemble Section 5 — Interactive Prototype & Developer Specs:

   • Embed a playable inline preview window (Shift + Spacebar) or video screen recording link showcasing Smart Animate card expansions, slide-out cart overlays, and micro-interactions.

   • Display a Dev Mode inspection callout section showing CSS flexbox token specs, padding measurements, and WCAG AA accessibility contrast passing reports ($4.5:1$).

7. Export and Publish:

   • Click Share at top right. Set permission to Anyone with the link can view.

   • Export section frames as high-resolution 2x PNG or PDF portfolio presentations to share with prospective employers, clients, and the global design community!