Figma Essentials

Quick reference guide for Figma fundamentals.

What is Figma?

Figma is a collaborative design tool for creating user interfaces:

Browser-based (no installation required)

Real-time collaboration

Prototyping and animations

Design systems and components

Developer handoff

Basic Concepts

Frames

Frames are containers for your designs (like artboards):

Create Frame: Press F or use Frame tool

Common sizes: iPhone 14 Pro, Desktop, iPad, etc.

Auto Layout: Smart frames that resize based on content

Frame properties: Background, constraints, layout

Layers

Everything in Figma is a layer:

Shapes: Rectangle, Ellipse, Polygon, Star, Line

Text: Type tool for adding text

Images: Import images (JPG, PNG, SVG)

Frames: Containers for grouping content

Essential Keyboard Shortcuts

Navigation

Pan Canvas:           Space + Drag
Zoom In/Out:          Cmd/Ctrl + Scroll or +/-
Zoom to Fit:          Cmd/Ctrl + 0
Zoom to Selection:    Cmd/Ctrl + 2

Tools

Move Tool:            V
Frame Tool:           F
Rectangle:            R
Ellipse:              O
Line:                 L
Pen Tool:             P
Text:                 T
Hand Tool:            H
Comment:              C

Selection & Organization

Select All:           Cmd/Ctrl + A
Group:                Cmd/Ctrl + G
Ungroup:              Cmd/Ctrl + Shift + G
Frame Selection:      Cmd/Ctrl + Alt + G
Lock/Unlock:          Cmd/Ctrl + Shift + L
Hide/Show:            Cmd/Ctrl + Shift + H

Editing

Duplicate:            Cmd/Ctrl + D
Copy:                 Cmd/Ctrl + C
Paste:                Cmd/Ctrl + V
Paste over Selection: Cmd/Ctrl + Shift + V
Delete:               Backspace/Delete

Alignment

Align Left:           Alt + A
Align Horizontal:     Alt + H
Align Right:          Alt + D
Align Top:            Alt + W
Align Vertical:       Alt + V
Align Bottom:         Alt + S

Shapes and Vector Tools

Creating Shapes

Rectangle (R):        Click and drag to create
Ellipse (O):          Hold Shift for perfect circle
Line (L):             Click to start, click to end
Polygon:              Use shape tools dropdown
Star:                 Use shape tools dropdown

Vector Editing

Edit Mode: Double-click shape or press Enter

Add Point: Click on path

Delete Point: Select point and press Delete

Bend Path: Hold Cmd/Ctrl and drag point

Boolean Operations: Union, Subtract, Intersect, Exclude

Properties

Fill: Solid, gradient, or image

Stroke: Border around shape

Effects: Drop shadow, blur, layer blur

Corner Radius: Rounded corners

Opacity: Transparency level

Text Styling

Text Properties

Font Family:          Choose typeface
Font Weight:          Regular, Bold, etc.
Font Size:            In pixels (px)
Line Height:          Spacing between lines
Letter Spacing:       Space between characters
Paragraph Spacing:    Space between paragraphs

Text Alignment

Horizontal: Left, Center, Right, Justified

Vertical: Top, Middle, Bottom

Text Styles

Create: Select text → Text styles → Create style

Apply: Select text → Choose from Text styles

Edit: Changes apply to all instances

Auto Layout

Auto Layout creates responsive frames that adapt to content:

Enable Auto Layout

Select frame or objects

Press Shift + A or click "+" in Design panel

Configure spacing and padding

Properties

Direction:            Horizontal or Vertical
Spacing:              Gap between items
Padding:              Space around items
Alignment:            Top, center, bottom, space between
Resizing:             Hug contents or Fixed size

Use Cases

Buttons: Text + padding that adapts

Cards: Content that grows/shrinks

Navigation bars: Items that space evenly

Forms: Fields that stack vertically

Components

Components are reusable design elements:

Create Component

Select layers

Press Cmd/Ctrl + Alt + K or right-click → Create Component

Name your component

Component Properties

Main Component: Original (purple icon)

Instance: Copy of component (purple outline)

Override: Change instance without affecting main

Detach: Break link to main component

Component Variants

Create multiple variations of a component:

Example Button Component:
- Variant 1: Primary, Default
- Variant 2: Primary, Hover
- Variant 3: Secondary, Default
- Variant 4: Secondary, Hover

Constraints

Control how elements resize within frames:

Horizontal Constraints

Left: Fixed distance from left

Right: Fixed distance from right

Left & Right: Stretch horizontally

Center: Stay centered

Scale: Resize proportionally

Vertical Constraints

Top: Fixed distance from top

Bottom: Fixed distance from bottom

Top & Bottom: Stretch vertically

Center: Stay centered

Scale: Resize proportionally

Prototyping

Create interactive prototypes:

Creating Interactions

Switch to Prototype tab

Click on element

Drag connection to destination frame

Configure interaction:

- Trigger: On Click, Hover, etc. - Action: Navigate to, Open overlay, etc. - Animation: Instant, Dissolve, Slide, etc.

Interaction Types

Navigate To:          Go to another frame
Open Overlay:         Show modal/popup
Swap With:            Replace component
Back:                 Return to previous frame
Close Overlay:        Dismiss modal
Scroll To:            Jump to section

Animations

Instant:              No animation
Dissolve:             Fade transition
Smart Animate:        Animate matching layers
Move In/Out:          Slide from direction
Push:                 Push content aside
Slide In/Out:         Overlay slide

Color and Styles

Color Variables

Create: Select fill → Style icon → Create style

Apply: Select object → Choose from color styles

Edit: Updates all instances

Effects

Drop Shadow:          Shadow behind object
Inner Shadow:         Shadow inside object
Layer Blur:           Blur entire layer
Background Blur:      Blur content behind

Blend Modes

Normal: Default

Multiply: Darken

Screen: Lighten

Overlay: Contrast

Design Systems

Organize reusable elements:

Structure

📁 Design System
  📁 Colors
    • Primary
    • Secondary
    • Success
    • Error
  📁 Typography
    • Heading 1
    • Heading 2
    • Body
    • Caption
  📁 Components
    • Buttons
    • Input Fields
    • Cards
    • Navigation

Libraries

Publish: Share components across files

Enable: Use components from other files

Update: Sync changes to instances

Plugins

Extend Figma with community plugins:

Popular Plugins

Iconify:              Access icon libraries
Unsplash:             Stock photos
Content Reel:         Generate placeholder content
Stark:                Accessibility checker
Remove BG:            Background removal
Figmotion:            Advanced animations

Using Plugins

Right-click → Plugins → Browse plugins

Install plugin

Right-click → Plugins → Run plugin

Collaboration

Work together in real-time:

Features

Multiplayer:          See cursors and edits live
Comments:             Add feedback (C key)
Observations:         Watch someone design
Cursor Chat:          Quick message bubble
Sharing:              Share view/edit links
Version History:      Restore previous versions

Permissions

View Only: Can view and comment

Edit: Can make changes

Admin: Full control

Export

Export designs for development:

Export Settings

Format:               PNG, JPG, SVG, PDF
Scale:                1x, 2x, 3x (for retina)
Quality:              Compression level
Naming:               Custom export names

Export Methods

Select layer → Export section → Add export setting

Right-click → Export

Export all assets at once

Developer Handoff

Inspect Mode: Developers can view specs

CSS/iOS/Android: Generate code snippets

Assets: Download exported assets

Measurements: Auto-generated spacing/sizes

Responsive Design

Create designs that adapt to screen sizes:

Techniques

Constraints:          Pin elements to edges
Auto Layout:          Flexible spacing/sizing
Min/Max Width:        Limit resizing range
Breakpoints:          Design for different sizes

Best Practices

Design mobile-first

Use Auto Layout for flexibility

Set appropriate constraints

Test across device sizes

Use components for consistency

Tips

Use Components for repeated elements

Enable Auto Layout for responsive designs

Name layers clearly for better organization

Use Styles for consistent colors and text

Learn keyboard shortcuts for faster workflow

Organize with Pages for large projects

Use Grids for alignment (Ctrl + G)

Comment frequently for team collaboration

Version your work regularly

Use Plugins to speed up common tasks

Common Workflows

Creating a Button

Create rectangle (R)

Add text (T) inside

Select both → Auto Layout (Shift + A)

Add padding (e.g., 16px horizontal, 12px vertical)

Round corners (e.g., 8px)

Create component (Cmd/Ctrl + Alt + K)

Designing a Card

Create frame (F)

Add image placeholder

Add title and description text

Group content with Auto Layout

Add padding and spacing

Create component with variants

Building a Navigation

Create frame for nav bar

Add logo and menu items

Use Auto Layout with space-between

Set constraints for responsiveness

Create component for reuse

Resources

Figma Official Documentation

Figma Community

Figma YouTube Channel

Figma Config Conference

Design Systems in Figma