Figma Course

Figma Course Content

Here is our detailed course content. Our course content is divided into three sections.

Section 1

Introduction: Web app vs Desktop App

• Web app vs Desktop App

Creating New Files & Designing on a Grid

• Creating a new file
• Setting up frames (other apps call these artboards)
• Adding text
• Creating colored backgrounds for text columns

Importing & Cropping Photos

• Importing & cropping photos
• Adding a drop shadow
• Rounding corners

Vector Graphics, Colors, Shadows, & More

• Importing & modifying vector graphics
• Aligning & distributing layers
• Layer opacity vs. fill opacity
• Reusing colors (color styles)
• Adding a drop shadow

Text Styles

• Opening files in Figma
• Handling missing fonts
• Creating, editing, & organizing text styles

Section 2

Components (Reusable Elements)

• Creating & editing components
• Overriding content in one instance vs. globally updating all components
• 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

• Using Tidy Up for Even Spacing
• Using Auto Layout
• Constraints & Resizing
• Spacing, Rearranging, & Adding Items with 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

Intro to Smart Animate

• The Basics of Smart Animate
• Different Kinds of Easing

Parallax Animation

• Setting Up the Parallax Assets
• Building the Parallax Animation

Variants

• Creating & Using Component Variants
• Variant Properties & Values
• Boolean Values (Toggle On/Off)

Hovers & Overlays

• Adding a Hover State to a Button (Using Variants)
• Opening a Pop-Up (Using an Overlay)

Adding Interactions

• Creating a Working Prototype
• Adding Tap Interactions
• Adding the Ability to Drag
• Adding Keystrokes
• Custom Easing