Start learning Figma for UI/UX design. Gain a solid understanding of its capabilities, from creating files, to designing on a grid, working with text/photos/colors, creating components, building prototypes, exporting assets, sharing files, creating animations, and more.
Overview
Syllabus
Section 1
Creating a New Figma File
- Creating a new file
- Setting up frames (other apps call these artboards)
- Setting up a Layout Grid
Designing on a Layout Grid (like Bootstrap)
- Designing on a Layout Grid
- Adding text
- Creating colored backgrounds for text columns
Importing & Cropping Photos
- Importing & cropping photos
- Rounding corners
Vector Graphics, Colors, Shadows, & More
- Importing vector graphics
- Aligning & distributing layers
- Layer opacity vs. fill opacity
- Reusing colors (color styles)
- Adding a drop shadow
Section 2
Components (Reusable Elements)
- Creating & editing components
- Overriding content in one instance vs. globally updating all components
- Setting Constraints
- Detaching from a component
Turning a Design into a Clickable Prototype
- Linking between frames (artboards)
- Previewing the prototype
- Creating an overlay
- Fixing the position of elements so they don’t scroll
Exporting Assets for Web: SVG, JPEG, & PNG
- Exporting individual assets
- Exporting frames (artboards)
Sharing Figma Files: Commenting, Testing, Developers, etc.
- Sharing a Figma file
- Sharing a Prototype
- Commenting on shared files
- Viewing a prototype for user testing
- Specs for developers
Section 3
Auto Layout: Introduction
- Using Tidy Up for Even Spacing
- Using Auto Layout
- Alignment Constraints
- Spacing, Rearranging, & Adding Items with Auto Layout
Auto Layout: Deeper Dive
- Nesting Auto Layouts
- Auto Layout Gap Spacing & Padding
- Auto Layout Sizing & Constraints
- Negative Spacing & Stacking Order
- Ignoring Auto Layout
Linking Up/Down a Page, Scrollable Areas, & Hyperlinks
- Making Links that Scroll Up/Down a Page
- Making the Navbar Fixed to the Screen
- Adjusting the Position & Speed of the Scroll
- Creating a Scrollable Area Within a Page
- Adding Hyperlinks
Text Styles
- Opening Sketch files in Figma
- Handling missing fonts
- Creating, editing, & organizing text styles
Section 4
Component Properties & Variants
- Component Properties (Text, Boolean, Instance Swap, & Variant)
- Creating & Using Component Variants
Hovers, Overlays, & Smart Animate
- Adding a Hover State to a Button (Using Variants)
- Opening a Pop-Up (Using an Overlay)
- Auto Animating the Hover with Smart Animate
Team Libraries (Shared Libraries)
- Publishing a Team Library
- Using Components in a Team Library
- Using Styles in a Team Library
- Swapping Team Libraries
Taught by
Cameron Stevens, Michael Suen, and Christophe Dayton
