Figma Design
-
Tour the interface
Explore
- Explore design files
- Change the background color of 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
File utilities
-
Create designs
Create and edit layers
- Frames in Figma Design
- Sketch on the canvas with the pencil tool
- Vector networks
- Shape tools
- Boolean operations
- See all 8 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, and position
- See all 19 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 15 articles
Color, gradients, and images
- Sample colors with the eyedropper tool
- Paints in Figma
- Color models in Figma Design
- Add fills to text and shape layers
- Upload an image as a fill
- See all 13 articles
Additional properties
Use auto layout
-
Build design systems
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 7 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
- 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
-
Dev Mode
Tour the interface
Inspect designs
- Guide to inspecting
- Compare changes in Dev Mode
- Add measurements and annotate designs in Dev Mode
- 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
-
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
- Create interactions
- Add prototype connections to 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
-
Import and export
-
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
- Present to collaborators using spotlight
- Use cursor chat in Figma Design
- Optimize design files for developer handoff
Branching and merging
-
Use AI in Figma Design