Figma Tool Overview and Setup

Figma Tool Overview

• Figma is a UI/UX design application
• It's compatible with most file formats
• It includes design tools useful for sharing files and collaboration
• It's a browser-based tool
• It is compatible with any operating system
• It's used to design vectors, applications, and screens
• It supports teamwork and collaboration
• Allows multiple members to work on one project simultaneously in real-time
• Follows a four-level file structure

Learning Objectives

• Identify the usage of the Figma tool
• List the steps to set up a Figma account
• Explain the Figma interface
• Describe how to manage Figma components
• Explain the process to create a first design in Figma

Setting Up a Figma Account

• Sign up with Google or email and password
• Option to sign up with SAML SSO
• This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply
• By clicking "Create account," you agree to Figma's Terms of Service and Privacy Policy
• Already have an account, log in

Understanding the Figma Interface (Dashboard)

• Includes recent, drafts, community beta, etc.
• Recommended Figma templates, new design files, and new FigJam files
• Figma dashboards, FigJam basics, prototyping in Figma, and other templates
• Can access team projects

Understanding the Figma Interface (Files/Projects)

• The Figma interface includes pages, layers, and assets
• Design files, FigJam files, and import options
• Files can be accessed by team members
• Projects are team workspaces with member invitations
• Description can be edited
• Starter teams are available

Figma Features

• Managing Components: Create and manage consistent designs across projects, Update components across designs, Components and elements are reusable across designs. Stored in the Assets tab
• Adding Lists: Adding Lists
• Using the Instance Swap Menu: Using the Instance Swap Menu
• Viewing Figma Community Files and Plugin Library: Viewing Figma Community Files and Plugin Library
• Connecting with other Figma Accounts: Connecting with other Figma Accounts
• Using the Inspect Tab: Using the Inspect Tab
• Integrating Zeplin: Integrating Zeplin
• Updating Projects Real-time: Updating Projects Real-time
• Intuitive Prototyping: Intuitive Prototyping
• Sharing Design Feedback: Sharing Design Feedback

Creating a Design in Figma

• Creating a Frame: Adding grids, shapes, images, and adding text
• Labeling Elements: Avoids confusion due to overlapping frames/layers. Organizes designs
• Creating Groups: Organizes designs

Figma Summary

• Figma is a cloud-based UI/UX design tool
• It generates codes, supports interactive prototyping, and creates mockups
• Compatible with any OS
• Supports teamwork and collaboration; real-time project management for multiple members
• Follows a four-level file structure
• Prototypes can be shared, reviewed, and automatically saved in real-time
• Draft files are saved on the cloud.
• Layers and Properties Panel help customize designs
• Multiple pages can be collated into a bigger project