Figma design

Get started with Figma design

• View layers, pages and components (left sidebar)
• Design, prototype, and inspect (right sidebar)
• Access design tools from the toolbar
• Explore the canvas
• Select layers and objects
• Measure distances between layers

Import and export

• Getting Started with Imports
• Guide to exports in Figma
• Import files into Figma
• Import files from Sketch
• Copy assets between design tools

Images, shapes and tools

• Frames in Figma
• Add Images to your designs
• Add animated GIFs to prototypes
• Frames and Groups
• Upload an image as a fill
• Using Shape Tools

Text, type, and fonts

• Getting started with text
• Explore text properties
• Create type layers with the text tool
• Edit text layers
• Add links to text
• Add Emoji to Text Layers

Layer properties and settings

• Adjust corner radius and smoothing
• Apply and adjust stroke properties
• View and adjust colors in a mixed selection
• Rename Layers
• Adjust alignment, dimensions, rotation, and position
• Paints in Figma

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

• Guide to Components in Figma
• Name and organize components
• Create components to reuse in designs
• Create an instance of a component
• Create and use variants

Libraries and design systems

• Guide to libraries in Figma
• Create branches and merge changes
• Publish styles and components
• Review and accept updates from libraries
• Manage libraries in design files
• Manage libraries for your drafts

Prototypes and animations

• Prototype easing curves
• Preserve scroll position in prototypes
• Guide to prototyping in Figma
• Set prototype device and starting frame
• Prototype triggers
• Prototype actions

Collaborative tools

• Use the Inspect panel
• Add comments to files
• View and manage comments
• Move or edit comments
• Adjust comment notification settings
• Follow along with observation mode