Figma Learn
  • Get started
    • Figma design
      • FigJam
        • Community
          • Administration
            • Support resources
              Sign up
              Sign up

              Figma design

              • Tour the interface
              • Tools, shapes, and layers
              • Styling elements
              • Styles
              • Components
              • Variables
              • Libraries
              • Course: Introduction to design systems
              • Prototypes
              • Dev Mode
              • Comments
              • Multiplayer tools
              • Branching and merging
              • Import and export
              • File utilities
              • 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
              • 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

                • Follow collaborators in a file
                • 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
              • Twitter
              • YouTube
              • Instagram
              • Facebook
              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