What The Figma? (WTF) – An Introduction to Figma for Beginners

What The Figma? (WTF) – An Introduction to Figma for Beginners

Duration

2 Days

Course Fee

688 SGD

Apply Now

What The Figma? (WTF) – An Introduction to Figma for Beginners

Course Description

What The Figma? (WTF) – An Introduction to Figma for Beginners is a fun, hands-on, two-day training designed to take beginners from “What does this button do?” to confidently creating, collaborating, and organizing designs in Figma. This course will cover Figma’s essential tools and workspace, introduce foundational UI design principles, and guide you through creating wireframes and simple prototypes from scratch.

Whether you’re a budding designer, a product manager, or simply curious about the design process, this course will provide you with practical skills and a solid understanding of how Figma can empower your work. By the end, you’ll know how to set up a project, design basic UI elements, create simple interactions, and navigate collaborative workflows with ease. Join us and discover how Figma can bring your design ideas to life – no previous experience required!

Apply Now

Target Audience

This is course is suitable for anyone who wants to understand UX design. It is particularly valuable for:

  • Aspiring designers
  • Graphic designers and professionals working in other design sub-disciplines looking to transition into a career in UX Design.
  • Software engineers
  • Students
  • Business owners and entrepreneurs
  • Product managers
  • Marketers
  • Anyone curious about UX design and looking to apply the principles to various industries

Prerequisite

You are required to have basic computer navigational skills such as opening and closing of files, dragging, and dropping of widgets, copying, and pasting of files.

To get the best-recommended learning outcome result of this course, it is strongly advised to have a working mouse to practice with, instead of relying solely on the trackpad of a laptop PC

Learning Outcomes

  • Identify the primary components of the Figma interface, including layers, tools, and panels, and describe their functions.
  • Recognize and apply foundational UI design principles, such as alignment, spacing, and hierarchy, in simple design exercises.
  • Demonstrate the ability to create basic UI components like buttons, text fields, and icons, using Figma’s tools.
  • Construct low-fidelity wireframes that clearly map out the structure of a user interface.
  • Design a simple prototype in Figma by applying basic interactive elements like navigation links and transitions.
  • Organize and manage Figma files using layers, naming conventions, and pages for a clean and efficient workspace.
  • Collaborate effectively using Figma’s commenting and sharing features to engage with peers or stakeholders.
  • Evaluate and revise prototypes based on initial usability feedback, iterating for improved user experience.
  • Distinguish between different types of UI elements (e.g., interactive vs. non-interactive) and choose appropriate elements for a design.
  • Interpret and apply basic color theory to create visually balanced and accessible designs.
  • Demonstrate how to use Figma’s alignment and spacing tools to arrange components in a visually appealing layout.
  • Illustrate basic design flows by connecting wireframes and interactive elements to simulate user journeys in Figma.
  • Present wireframes and prototypes clearly to communicate design choices to team members or stakeholders.

Course Highlights

  • Comprehensive Curriculum: Covers everything from Figma basics to advanced techniques, ensuring a solid foundation and mastery of the tool.
  • Hands-on Learning: Practical exercises and real-world projects to solidify understanding and build a strong portfolio.
  • Focus on Efficiency: Discover time-saving techniques and shortcuts to optimize your design workflow.
  • Prototyping: Create interactive prototypes to bring designs to life and test user experiences.
  • Collaboration and Sharing: Understand how to effectively collaborate with teams and share designs.
  • Accessibility and Best Practices: Learn to design inclusive interfaces and follow industry best practices

Course Objectives

By the end of this course, you will be confident in using Figma to create quality designs, collaborate effectively with teams, and stay ahead in the design industry.

We will equip you with the skills to build prototypes for Desktop-view + Mobile-view. You will get to choose and create pages such as:

(Event Sign-Up Flow, Service get-a-quote lead-generation flow, New User Sign-up Onboarding Flow)

Here are some examples that we will be exploring and attempting to create:

  • Home Page / Landing Page
    • Head Navigation
    • Hero Banner
    • Value Statement
    • Infographic – Unique Selling Points
    • Feature Callout
    • Step-by-step guide segment
    • Testimonials
    • Mini-FAQs
    • Lead-generation Form
    • Footer
  • About Us Page
    • Hero Banner
    • Mission / Vision Statement
    • Infographic – Roadmap
    • Meet-the-team
    • Social Media, Addresses and contact points
    • Contact Us Form

Course Outline

Day 1: Figma Interface and Fundamentals, Design Elements and Styles

  • Overview of Figma and its features
  • Understanding the interface and workspace – Basic Navigation & Shortcuts
  • Setting up a new project
  • Exploring the toolbar, panels, and canvas
  • Using zoom, pan, and selection tools
  • Understanding frames, groups, sections and layers
  • Creating and managing artboards
  • Using rulers, guides, and grids
  • Drawing & manipulating shapes: rectangles, circles, lines, and polygons
  • Editing shapes: resizing, rotating, and aligning
  • Using vector tools effectively
  • Boolean operations
  • Adding and formatting text
  • Text styles and formatting
  • Text alignment and spacing
  • Working with different text types
  • Creating and using text styles
  • Typography best practices for UI design
  • Practical exercises in creating and editing shapes and text
  • Applying fills, strokes, and gradients
  • Creating, managing and using colour styles
  • Applying effects: shadows, blurs, and more
  • Creating and managing colour palettes
  • Applying styles to design elements
  • Importing, editing and placing images
  • Using icons and vector graphics
  • Masking and cropping techniques
  • Using image fills and patterns
  • Creating responsive images
  • Using frames and auto-layout
  • Aligning and distributing elements
  • Creating simple grids and guides
  • Creating reusable components
  • Using component variants for customization
  • Organizing component libraries
  • Understanding Auto Layout principles
  • Creating responsive layouts
  • Using Auto Layout for efficient design

Day 2 - Design Workflows and Best Practices

  • Creating and using components
  • Understanding component instances and overrides
  • Basic component library management
  • Creating a basic siteblock