Figma design

Get started

Explore Design files

• Use the Inspect panel
• Access design tools from the toolbar
• Explore the canvas
• Optimize design files for developer handoff
• Select layers and objects
• See all 13 articles

Import and export

• Imports in Figma design
• Guide to exports in Figma
• Import files into Figma
• Import Sketch files
• Copy assets between design tools
• See all 6 articles

Figma for Beginners tutorial

• ▶️ Beginner 1: Explore ideas
• ▶️ Beginner 2: Create designs
• ▶️ Beginner 3: Build prototypes
• ▶️ Beginner 4: Prepare for handoff

• View layer outlines in Figma design

Images, shapes and tools

Shapes and tools

• Sketch on the canvas with the pencil tool
• Vector networks
• Frames in Figma
• Frames and Groups
• Basic shape tools in Figma design
• See all 10 articles

Images

• Add images to design files
• Add animated GIFs to prototypes
• Upload an image as a fill
• Add images in bulk with Place image
• Paste images in the canvas
• See all 8 articles

Text and fonts

Text

• Add right-to-left text
• Use OpenType features
• Getting started with text
• Create type layers with the text tool
• Edit text layers
• See all 14 articles

Fonts

• Use variable fonts
• Access local fonts on your computer
• Add icons to text layers with icon fonts
• Manage missing fonts
• Manage conflicting fonts
• See all 6 articles

Layer properties and settings

Properties

• Adjust alignment, rotation, and position
• Paints in Figma
• Apply paints with the color picker
• Add fills to text and shape layers
• Apply and adjust stroke properties
• See all 9 articles

Layer settings

• Copy and paste properties between layers
• Set small and big nudge values
• Rename Layers
• Lock and unlock layers
• Toggle visibility to hide layers

Layout tools

• Using auto layout
• Update old auto layout frames
• Measure distances between layers
• Explore auto layout properties
• Arrange layers with Smart selection
• See all 9 articles

Components and styles

Styles

• Styles in Figma
• Create color, text, effect and layout grid styles
• Apply Styles to layers and objects
• Manage and share styles

Components

• Create and use component properties
• Guide to components in Figma
• Name and organize components
• Create components to reuse in designs
• Create and insert component instances
• See all 12 articles

Libraries

• Swap style and component libraries
• Move published components
• Guide to libraries in Figma
• Publish styles and components
• Review and accept library updates
• See all 12 articles

Prototypes and animations

Build prototypes

• Guide to prototyping in Figma
• Prototype interactions and animations
• Add prototype connections to components
• Prototype scrolling with overflow behavior
• Preserve scroll position in prototypes
• See all 8 articles

Presets

• Prototype triggers
• Prototype actions
• Prototype animations
• Prototype easing and spring animations

View prototypes

• Present designs and prototypes
• View prototype connections
• View prototypes on a mobile device
• Comment on prototypes

Collaborative tools

Comments

• Getting started with comments
• Add comments to files
• View and manage comments
• Move or edit comments
• Adjust comment notification settings

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