Day 2 UX 330

Figma Overview

  • Primary Tool: Figma is the main software that will be utilized throughout the semester.

  • Integration with Other Programs:

    • Works well with software like Adobe Suite.

    • Supports content import from other platforms, such as Canva.

  • Encouragement for Mastery: Aim to learn Figma comprehensively and utilize its features extensively.

Figma Interface

  • Initial Appearance:

    • Users encounter an empty canvas upon first login.

    • Tutorials may be available depending on settings.

  • Instructor Information:

    • Instructor: Mark Simpson, located in FAC 240 or 253.

    • Contact: Phone number provided for text communication (emails may be ignored).

Course Organization

  • Syllabus: Available on the class website with general course overview.

  • Assignments:

    • Located on Blackboard, likely subject to change.

    • Initial assignments may vary after evaluation over the weekend.

  • Resources: Includes materials from previous semesters that may be beneficial in future jobs.

Figma for Education

  • Education License: The Figma education plan provides access to the Pro license for students and faculty,

    • Allows for the full spectrum of features typically requiring payment.

  • Community Site:

    • A platform where users publish templates and resources, some for free, some for purchase.

    • Encouragement to utilize this site for templates and inspiration.

Key Figma Features

Design Panel

  • Design:

    • Main workspace for creating new designs.

    • Initial focus on drawing shapes and layout.

  • FigJam: A collaborative whiteboard space useful for brainstorming and teamwork.

  • Slides: Equivalent to presentation software (e.g., PowerPoint)

    • Allows design of slides that can be shared with clients (requires free Figma account).

  • Buzz: Tailored for advertising and social media content creation.

  • Site: Tool for mocking up websites and apps.

  • Make: Early AI integration for generating web prototypes based on descriptions.

Design Process in Figma

  • User Interface and Experience (UX):

    • Discussion around broader aspects of UX, beyond just web design.

    • Example of Samsung's fridge with integrated smart technology highlights potential applications of UX design.

  • Creating Frames: A critical function involving creating sections for different screens (desktop, mobile).

  • Interactive Components: Figma enables linking pages through elements (e.g., buttons) for navigation.

  • Exporting Options: Potential to use Figma for PDF creation; can handle various media, including images and videos.

Tools Within Figma

  • Primitives: Shapes (rectangles, circles, polygons) can be built and adjusted.

  • Text Tools: Similar to InDesign, allows for precise typography control.

  • Comment and Measurement Tools:

    • Enable client or user feedback on designs.

    • Accurate and precise measurements for design elements.

  • Actions Tool: Access to assets and plugins that extend Figma’s capabilities.

Homework Assignment

  • Term Definitions: Define the following terms:

    • Graphic Design

    • Interactive Design

    • User Experience Design

    • User Interface Design

    • Human-Centered Design

  • Submission: Definitions to be submitted digitally; expect to review in the next class session.