How to Use Figma

Jul 24, 2024

How to Use Figma

Introduction

  • Presenter: Kevin
  • Topic: How to use Figma
  • Purpose: Create, prototype, and collaborate on interface designs for free.
  • Personal Experience: Used at Microsoft for software product designs.

Overview

  1. Getting Figma
  2. Starting a project
  3. Adding Frames
  4. Creating and editing shapes
  5. Adding and formatting text
  6. Placing images and masks
  7. Working with layers
  8. Adding components and constraints
  9. Making a prototype
  10. Previewing and sharing designs

Getting Started with Figma

  • Website Links: Available in the video's description for setting up an account.
  • First Run Flow:
    • Name Setup: Enter your name for collaboration visibility.
    • Work Description: Specify your type of work and collaborator type (e.g., freelancer, teammates).
    • Invitation: Option to invite collaborators at this stage or later.
    • Purpose Selection: Specify the reason for using Figma (e.g., just for fun, professional use).
    • Plan Selection: Starter (free) or Professional plan.
    • Product Selection: Figma (designing/prototyping) and FigJam (whiteboarding).

File Browser

  • Main Landing Page: Recent files view, ability to filter and adjust views.
  • Drafts: Personal sketches and ideas, view-only for others.
  • Teams and Projects:
    • Creating Teams: Invite members, create projects.
    • Organizing Files: Moving files between drafts and projects.
    • Adding New Files: Design or FigJam files.
    • Favorite Files: Mark and access frequently used files.

Starting a New Design

  • Frames:
    • Insertion: Use Frame tool (shortcut 'F') or select default device sizes.
    • Dimensions: Adjust dimensions manually or using preset dimensions.
    • Frame Management: Renaming layers, adding additional frames, panning, and zooming.
  • Layers:
    • Naming and Organizing: Rename layers to relevant content.
    • Pages: Creating and naming pages for different device types.

Editing Frames and Shapes

  • Background: Set fill properties (color, gradient, image, video).
  • Images: Insert shapes (e.g., rectangles), use as masks for images.
  • Adjustments: Use design properties (e.g., dimensions, stroke, effects).
  • Navigation Bars: Adding frames and shapes, drafting navigation elements.

Adding Text and Icons

  • Text Tool: Insert text (shortcut 'T'), adjust properties (font size, alignment).
  • Icons: Use shapes and pen tools to create icons (e.g., home, location pin).
  • Importing Icons: Use community assets and templates (e.g., Iconamoon).

Components and Constraints

  • Creating Components:
    • Turning Frames into reusable components.
    • Local Components: Drag and use in projects, changes in main components reflect everywhere.
  • Constraints:
    • Setting Constraints: Define how layers resize with the frame.
    • Locking Positions: Positioning objects (e.g., navigation bars) on different screen sizes.

Designing the App UI

  • Home Screen:
    • Background and Logo: Adding and positioning image background and logo.
    • Styling: Darken images, add text with design properties.
  • Location Screen:
    • Repeating Elements: Using components for location cards.
    • Updating Styles: Reflect changes across all instances.
  • Cart Screen: Add cart title, maintain consistency using styles.

Prototyping and Sharing

  • Creating Prototypes:
    • Define Flows: Set starting points and navigation actions.
    • Animations: Define transitions between screens.
  • Testing Prototypes: Preview functionalities, get feedback.
  • Feedback and Comments: Add comments, collaborate using feedback.
  • Exporting Designs: Options to export views and share with team.

Conclusion

  • Figma is a robust tool for design and collaboration, ideal for app and website development.
  • Encourages viewers to subscribe for more tutorials.