Figma Master Class

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

Overview and theory of Figma design system

• Why use a Figma design system
• How Figma libraries fit into a design system
• Discovering the significant parts of a design system

Figma design systems in practice: building a design system in Figma

• Hands-on practice building a Figma design system from scratch 
• Tips and tricks on building elements that are responsive
• Building components

Getting started with Figma design systems

• Figma design system functionality
• How design systems fit into your Figma workflow

Parts of a design system

• Discovering how libraries play a part in a Figma design system
• Determining structure and taxonomy based on use case

Starting your Figma design system

• Where do you begin?
• Understanding the design system process

Conducting a design audit

• Locating and evaluating existing Figma components, styles, and tokens
• Categorize all UI elements
• Determining the nature and functionality of your styles, components, and tokens
• Eliminating duplication, Identifying redundant and determining missing components
• Confirming the visual design is consistent and suitable
• Verifying that existing elements match style and aesthetics

Naming conventions for Figma design systems

• Building names in a meaningful and modular way
• Using names for system organization in Figma

Using variables in a Figma design system

• Creating Boolean variables
• Creating String Variables
• Organizing collections

Creating design tokens in a design system

• Understanding when to use design tokens for sizes
• Applying and editing tokens in Figma
• Using modes with design tokens

Creating and using fill styles

• Difference between Figma color variables and fill styles
• Creating fill styles for gradients and images
• Organizing and naming fill styles
• Integrating styles into other files and systems

Creating text styles for Figma design systems

• Creating and editing type styles
• Organizing and naming fill styles
• Integrating styles into other files and systems

Creating components and component sets in a Figma design systems

• Figma component best practices
• Component organization
• Adding properties
• Exposing properties

Publishing and using Figma design systems

• Publishing your Figma design system
• Implementing your design system
• Sharing your design system6                               
• Updating your design system