Figma design

Tour the interface

• Explore design files
• Explore the canvas
• Access design tools from the toolbar
• View layers and pages in the left sidebar
• Design, prototype, and explore layer properties in the right sidebar

Tools, shapes, and layers

Create layers

• Frames in Figma
• Sketch on the canvas with the pencil tool
• Vector networks
• Basic shape tools in Figma design
• Create and edit text
• See all 12 articles

Work with layers

• Select layers and objects
• Adjust alignment, rotation, and position
• Copy and paste objects in the canvas
• Resize layers with the scale tool
• Organize your canvas with sections
• See all 16 articles

Use auto layout

• Explore auto layout properties
• Using auto layout

Styling elements

Paints (color, gradients, and images)

• Paints in Figma
• Color models in Figma design
• Add fills to text and shape layers
• Upload an image as a fill
• Apply paints with the color picker
• See all 9 articles

Typography

• Guide to text
• Access local fonts on your computer
• Browse and apply fonts
• Explore text properties
• Add links to text
• See all 12 articles

Strokes

• Apply and adjust stroke properties

Blurs and shadows

• Apply shadow or blur effects

Corner radius

• Adjust corner radius and smoothing

Styles

• Styles in Figma
• Create color, text, effect and layout grid styles
• Manage and share styles

Components

• Guide to components in Figma
• Create components to reuse in designs
• Create and use variants
• Create interactive components with variants
• Explore component properties
• Create and manage component properties
• See all 8 articles

Variables

• The difference between variables and styles
• Guide to variables in Figma
• Overview of variables, collections, and modes
• Create and manage variables
• Modes for variables
• Apply variables to designs

Libraries

Create and share libraries

• Add descriptions to styles, components, and variables
• Publish a library
• Move published components
• Edit main components
• Hide styles, components, and variables when publishing
• See all 6 articles

Use libraries

• Apply styles to layers and objects
• Review and accept library updates
• Swap style and component libraries
• Create and insert component instances
• Detach an instance from the component
• See all 7 articles

Manage your libraries

• Manage libraries in design files
• Manage libraries for your drafts
• Manage libraries in teams
• Swap components and instances
• Remove your access to a library

• Guide to libraries in Figma

Course: Introduction to design systems

• Overview: Introduction to design systems
• Lesson 1: Welcome to design systems
• Lesson 2: Define your design system
• Lesson 3: Build your design system
• Lesson 4: Document and manage your system
• Update 1: Tokens, variables, and styles

Prototypes

Guides

• Guide to prototyping in Figma
• State management for prototypes
• Use animated GIFs in prototypes
• Use videos in prototypes
• Prototype triggers
• See all 8 articles

Create prototypes

• Use sections in prototyping
• Create interactions
• Add prototype connections to components
• Set prototype device and starting point
• Create overlays in your prototypes
• See all 7 articles

Advanced prototyping

• Advanced prototyping examples
• Smart animate layers between frames
• Variable modes in prototypes
• Multiple actions and conditionals
• Use expressions in prototypes
• See all 6 articles

View prototypes

• View prototype connections
• Play your prototypes
• View prototypes on a mobile device
• Accessible prototypes in Figma

Dev Mode

Overview

• Guide to Dev Mode
• Figma for VS Code

Inspect designs

• Navigate designs in Dev Mode
• Use code snippets in Dev Mode
• Compare changes in Dev Mode
• Link Dev resources to layers in Dev Mode

Comments

• Guide to comments in Figma
• Add comments to files
• View and manage comments
• Move or edit comments
• Comment on prototypes
• Manage email notifications for comments on files

Multiplayer tools

• Present to collaborators using spotlight
• Use cursor chat in Figma design
• Optimize design files for developer handoff

Branching and merging

• Guide to branching
• Share a branch
• Get updates from main files
• View and manage branches
• Request a branch review
• Review branch changes
• See all 8 articles

Import and export

• Imports in Figma design
• Import files from the file browser to Figma design
• Import Sketch files
• Copy assets between design tools
• Export from Figma
• Export formats and settings

File utilities

• Use shortcuts and quick actions
• Set small and big nudge values
• Adjust your zoom and view options
• Set custom thumbnails for files
• Add guides to the canvas or frames
• View layer outlines in Figma design
• See all 7 articles