Figma is a contemporary design tool built specifically for web, UX, and app designers. Unlike traditional image editing software such as Photoshop, which was originally developed for print and photo retouching, Figma is designed from the ground up for creating user interfaces and user experiences. Through guided instruction and hands-on projects, you will explore tools for building responsive layouts with frames, managing typography, color, and imagery, and creating reusable components. You will also design interactive prototypes with scrolling areas, navigation overlays, and simple animations.
Because Figma is cloud-based, collaborating with others and sharing files is seamless whether you are using the desktop application or working directly in your web browser.
What You Will Learn
- Create UI and UX designs for websites, apps, and digital products
- Design complete layouts optimized for mobile, tablet, and desktop screens
- Work with grid-based layouts, extract image assets, and share designs with clients and developers
- Build interactive prototypes to demonstrate user flows and interactions
- Create animations using Smart Animate
- Use components and variants to streamline updates and maintain consistency
- Collaborate with Team libraries to share styles and reusable design elements
Course Outline
Section 1
Creating a New Figma File
-
Creating a new file
-
Setting up frames (other apps call these artboards)
-
Setting up a Layout Guide
Designing on a Layout Guide (like the Bootstrap Grid)
-
How to design on a Layout Guide
-
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
