'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
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
Typography
- Guide to text
- Add a font to Figma design
- Create and edit text
- Browse and apply fonts
- Explore text properties
- See all 14 articles
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
- Add images and videos to design files
- See all 12 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
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