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