Figma Bootcamp

Getting to know Figma

• Introduction to workspace
• Pages, Canvas and frames

Frame properties in Figma

• Changing the size of a frame
• Creating your own custom sized frames
• Building frames to scroll
• Adjusting a frame’s bounds
• Creating backgrounds for your frames
• Changing the fill style

Understanding layers in Figma

• Selecting items with the same properties
• Grouping and ungrouping
• Selecting and moving layers
• Grouping and ungrouping
• Viewing, locking, and unlocking layers
• Aligning and distributing objects

Using the prototyping tools in Figma

• Creating links
• Testing your links
• Editing Links
• Create fixed objects in a prototype

Using rulers, grids, and guides   

• Using rulers
• Adding guides
• Using and editing layout grids

Creating shapes and other objects in Figma

• Creating custom shapes using boolean features
• Transforming and positioning
• Creating custom corners

Using Fills and strokes with Figma

• Changing the blending mode
• Changing multiple colors in selections
• Saving colors
• Applying stroke properties
• Color Values
• Frequent Colors
• Copying and pasting object properties

Applying effects in Figma

• Blurs
• Shadows

Applying constraints using Figma

• Keeping object position within Figma frames
• Controlling the resize and proportions

Working with images in Figma

• Editing an image
• Cropping and masking
• Eliminating selected parts of an image

Inserting Text into a Figma Prototype

• Kerning and Tracking
• Creating and editing text styles
• Creating styles    
• Color fill and border styles
• Layer styles

Building reusable components in Figma

• Working with text and image overrides
• Organizing components
• Nesting components

Using Figma's Automatic layout

• Auto layout with multiple items

Using Figma libraries as design assets

• Creating, sharing, and editing libraries

Saving & exporting your Figma prototype

• Export Settings

Using Figma plug-ins

• How to find plug-ins
• Loading plug-ins

Responsive layout controls in Figma

• Using layout grids, columns, and rows
• Understanding constraints as they relate to the layout grids
• Saving and applying layout styles

Understanding and applying Constraints in Figma

• Controlling alignment
• Controlling spacing in your design
• Constraints as they relate to parent-child relationships

Figma Components

• Swapping components
• Nesting components
• Component naming and organization
• Creating variables
• Creating interactive components

Adding Animation in Figma

• Basic animation prototyping
• Setting up triggers
• Using the auto-animate features
• Simulating menus with auto-animate transitions

Plug-ins

• Discovering and adding plug-ins
• Plug-ins that can make you more efficient
• Plug-ins for development

Creating a pattern library for your design system

• Creating and organizing pages in your library
• Organizing your library
• Sharing your library

Sharing your prototype

• Sharing for review
• Sharing for development
• Exporting and sharing your prototype’s specs

Using variables in Figma

• Taking advantage of color, number, string, and boolean variables
• Creating variable collections