Figma Learn
Get started
enterto select ↑↓to navigate escto close

Figma Design

Design and prototype in one place

Dev Mode

Translate designs into code

FigJam

Collaborate with a digital whiteboard

Figma Slides

Co-create presentations

Figma Draw

New

Illustrate with advanced vector tools

Figma Buzz

Beta

Produce on-brand assets at scale

Figma Sites

Beta

Publish fully responsive websites

Figma Make

Beta

Prompt to code anything you can imagine

AI

Explore all Figma AI features

Work across Figma

Learn how Figma tools work together

Developer docs

Work with APIs, embeds, and more

For everyone

Account
  • Manage settings
  • Change preferences
Files and projects
  • Use the file browser
  • Manage files and projects
  • Sharing and permissions

For administration

Billing
  • Overview
  • Manage seats
  • Manage your plan
  • Pay for Figma
Teams
  • Manage a team
Organizations
  • Overview
  • Login and authentication
  • Deploy Figma
  • Members and guests
  • Teams
  • Libraries and resources
Enterprise
  • Billing groups
  • Workspaces
  • Security features

Find out more

Courses

New

Level up your Figma skills with these comprehensive skill-based courses.

Projects

Get hands-on experience in Figma with these practical bite-sized projects.

Tutorials

Explore tools and features by watching and following along with these expert-led video tutorials.

Get solutions

Troubleshoot

Get help with common issues and troubleshoot unexpected behavior.

Work with support

Submit a bug report, get help collecting log files, and find your system information.

Common questions

Get answers to frequently asked questions.

Figma Community Forum

Ask the community, share ideas, and connect with other Figma users.

Get started
Products Figma Design Dev Mode FigJam Figma Slides

Figma Draw

New

Figma Sites

Beta

Figma Make

Beta

Figma Buzz

Beta
Features AI Work across Figma Developer docs
For everyone Account Files and projects
For administration Billing Teams Organizations Enterprise
Find out more Courses Projects Tutorials
Get solutions Troubleshoot Work with support Common questions Figma Community Forum

Figma Design

  • Tour the interface
  • Create designs
  • Figma Draw
  • Build design systems
  • Dev Mode
  • Create prototypes
  • Import and export
  • Work together in files
  • Tour the interface

    Explore

    • Use AI tools in Figma Design
    • Explore design files
    • Change the background color of the canvas
    • Access design tools from the toolbar
    • Navigating UI3: Figma's new UI
    • See all 7 articles

    File utilities

    • Use the actions menu in Figma Design
    • Keyboard shortcuts in Figma
    • Set small and big nudge values
    • Adjust your zoom and view options
    • Set custom thumbnails for files
    • See all 8 articles
  • Create designs

    Create and edit layers

    • Frames in Figma Design
    • Sketch on the canvas with the pencil tool
    • Shape tools
    • The difference between frames and groups
    • Arc tool: create arcs, semi-circles, and rings
    • See all 6 articles

    Work with layers

    • Edit objects on the canvas in bulk
    • Identify matching objects
    • Parent, child, and sibling relationships
    • Select layers and objects
    • Adjust alignment, rotation, position, and dimensions
    • See all 17 articles

    Design with vector tools

    • Create custom shapes with the shape builder tool
    • Vector networks
    • Edit vector layers
    • Boolean operations
    • Flatten layers
    • See all 6 articles

    Text and typography

    • Guide to text in Figma Design
    • Explore text properties
    • Add a font to Figma Design
    • Browse and apply fonts
    • Create and apply text styles
    • See all 14 articles

    Color, gradients, and images

    • Use patterns as a fill or stroke
    • Sample colors with the eyedropper tool
    • Paints in Figma
    • Color models in Figma Design
    • Add fills to text and shape layers
    • See all 14 articles

    Additional properties

    • Apply and adjust stroke properties
    • Apply effects to layers
    • Adjust corner radius and smoothing

    Use auto layout

    • Create multi-dimensional auto layout flows
    • Use the horizontal and vertical flows in auto layout
    • Use the grid auto layout flow
    • Guide to auto layout
    • Toggle auto layout on designs
  • Figma Draw

    • Explore Figma Draw
    • Draw with illustration tools
    • Create patterns with transforms
  • Build design systems

    Styles

    • Styles in Figma Design
    • Create color, text, effect, and layout guide 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
    • See all 6 articles

    Variables

    • The difference between variables and styles
    • Guide to variables in Figma
    • Overview of variables, collections, and modes
    • Create and manage variables and collections
    • Modes for variables
    • See all 6 articles

    Create and share libraries

    • Guide to libraries in Figma
    • Add descriptions to styles, components, and variables
    • Publish a library
    • Move published components
    • Edit main components
    • See all 7 articles

    Use libraries

    • Get started with Apple's UI kit
    • Start designing with UI kits
    • Apply styles to layers and objects
    • Review and accept library updates
    • Swap style and component libraries
    • See all 9 articles

    Manage your libraries

    • Add or remove a library from a design file
    • Enable access to libraries in your drafts
    • Enable a library for a team
    • Swap components and instances
    • Remove your access to a library
  • Dev Mode

    Tour the interface

    • Guide to Dev Mode
    • Navigate designs in Dev Mode
    • Dev Mode for admins

    Inspect designs

    • Compare changes in Dev Mode
    • Add measurements and annotate designs
    • Variables in Dev Mode

    Turn designs to code

    • Code Connect
    • Use code snippets in Dev Mode
    • Link Dev resources to layers in Dev Mode
    • Figma for VS Code

    Dev Mode across your organization

    • Dev Mode statuses and notifications
    • Dev Mode focus view
    • Dev Mode ready for dev view
    • Manage Dev Mode settings for an organization
  • Create 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
    • Connect your prototype
    • Add prototype connections from main components
    • Create and manage prototype flows
    • 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

    • Present prototypes offline
    • Set prototype device and background settings
    • View prototype connections
    • Play your prototypes
    • View prototypes on a mobile device
    • See all 6 articles
  • Import and export

    • Guide to imports in Figma Design
    • Import files to the file browser
    • Import Sketch files
    • Copy assets between design tools
    • Export from Figma Design
    • Export formats and settings
  • Work together in files

    Comments

    • Guide to comments in Figma
    • Add comments to files
    • View and manage comments
    • Move or edit comments
    • Comment on prototypes
    • See all 6 articles

    Multiplayer tools

    • See viewer history for your files
    • 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
    • See all 8 articles
Use cases
  • UI design
  • UX design
  • Prototyping
  • Graphic design
  • Wireframing
  • Brainstorming
  • Templates
  • Remote design
Explore
  • Design features
  • Prototyping features
  • Design systems features
  • Collaboration features
  • FigJam
  • Pricing
  • Enterprise
  • Students and educators
  • Customers
  • Security
  • Integrations
  • Contact
Resources
  • Blog
  • Best practices
  • Support
  • Developers
  • Learn design
  • Downloads
  • What's new
  • Releases
  • Careers
  • About us
  • Agency partners
  • Privacy
  • Status
Compare
  • Sketch
  • Adobe XD
  • Invision Studio
  • Framer
  • Design on Windows
  • Miro