Figma Design
Design and prototype in one place
Figma Design
-
Tour the interface
Explore
- Use AI tools in Figma Design
- Explore design files
- Change the background color of the canvas
- Access design tools from the toolbar
- Navigating UI3: Figma's new UI
- See all 7 articles
File utilities
-
Create designs
Create and edit layers
- Frames in Figma Design
- Sketch on the canvas with the pencil tool
- Shape tools
- The difference between frames and groups
- Arc tool: create arcs, semi-circles, and rings
- See all 6 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, position, and dimensions
- See all 17 articles
Design with vector tools
- Vector networks
- Edit vector layers
- Create custom shapes with the shape builder tool
- Boolean operations
- Flatten layers
- See all 7 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 14 articles
Color, gradients, and images
- Use patterns as a fill or stroke
- Sample colors with the eyedropper tool
- Paints in Figma
- Color models in Figma Design
- Add fills to text and shape layers
- See all 14 articles
Additional properties
Use auto layout
-
Figma Draw
-
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 6 articles
Variables
- The difference between variables and styles
- Guide to variables in Figma
- Overview of variables, collections, and modes
- Create and manage variables and collections
- 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
- Variables in Dev Mode
Turn designs to code
- Guide to the Dev Mode MCP Server
- 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
- Connect your prototype
- Add prototype connections from main 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
- See viewer history for your files
- Present to collaborators using spotlight
- Use cursor chat in Figma Design
- Optimize design files for developer handoff
Branching and merging