Figma design

Design tools and shapes

• Frames in Figma
• Sketch on the canvas with the pencil tool
• Vector networks
• Basic shape tools in Figma design
• Organize your canvas with sections
• Boolean operations
• See all 9 articles

Properties

• Adjust alignment, rotation, and position
• Resize layers with the scale tool
• Apply and adjust stroke properties
• Arc tool: create arcs, semi-circles, and rings
• Apply shadow or blur effects
• Adjust corner radius and smoothing
• See all 11 articles

Color

• Add fills to text and shape layers
• Paints in Figma
• Apply paints with the color picker
• Color models in Figma
• Create unique effects with Blend modes
• View and adjust colors in a mixed selection

Images

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

Typography

Using the text tool

• Getting started with text
• Create type layers with the text tool
• Edit text layers
• Resize text layers
• Add Emoji to Text Layers
• See all 7 articles

Apply text properties

• Access local fonts on your computer
• Explore text properties
• Add links to text
• Bulleted and numbered lists
• Use OpenType features
• See all 10 articles

Auto layout

• Explore auto layout properties
• Using auto layout

Preferences

• Set small and big nudge values
• Adjust your zoom and view options
• Set custom thumbnails for files
• Add guides to the canvas or frames
• Use shortcuts and quick actions
• View layer outlines in Figma design

Design systems

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
• Create components to reuse in designs
• Name and organize components
• Edit main components
• Create and insert component instances
• See all 14 articles

Libraries

• Guide to libraries in Figma
• Add style and component descriptions
• Publish styles and components
• Review and accept library updates
• Swap style and component libraries
• See all 13 articles

Course: Introduction to design systems

• Overview: Introduction to design systems
• Lesson 1: Welcome to design systems
• Lesson 2: Define your design system
• Lesson 3: Build your design system
• Lesson 4: Document and manage your system

Prototypes and animations

Build prototypes

• Add video to prototypes
• State management for prototypes
• Guide to prototyping in Figma
• Prototype interactions and animations
• Add prototype connections to components
• See all 9 articles

Presets

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

View prototypes

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

Collaborative tools

Comments

• Guide to comments in Figma
• Add comments to files
• View and manage comments
• Move or edit comments
• Manage email notifications for comments on files

• Follow collaborators in a file
• Use cursor chat in Figma design
• Optimize design files for developer handoff

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
• See all 8 articles

Import and export

Import and export

• Export from Figma
• Export formats and settings
• Imports in Figma design
• Import files into Figma
• Copy assets between design tools
• See all 6 articles