Figma

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