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
  • Implementing responsive design principles
  • Using constraints for flexible layouts
  • Creating & managing a basic design systems
  • Practical exercises in incorporating images into designs
  • Creating interactive prototypes
  • Adding interactions and animations
  • Using the prototype panel & features
  • Testing and iterating prototypes
  • Sharing files and projects
  • Real-time collaboration features
  • Using comments and feedback tools
  • Sharing designs with teams
  • Version control and history
  • Concept development and planning
  • Creating and refining a simple UI design
  • Applying techniques learned throughout the course
  • Exploring available plugins
  • Integrating with other design tools (optional)
  • Customizing Figma with plugins
  • New Figma Features From CONFIG 2024
  • Best practices for file structure
  • Consistent naming conventions
  • Design system organization
  • Improving file performance
  • Optimizing images and assets
  • Best practices for large files
  • Designing inclusive interfaces
  • Using Figma’s accessibility features
  • Understanding design thinking
  • Applying design methodologies
  • Efficient workflow strategies

Why Learn at DesignX?

At DesignX, we are passionate in delivering quality training and want to see you succeed. Get expert advice, learning resources, and post-training support for up to 3 years.

Re-attend the Course Within 3 Years

3-year access to the courseware via our LMS

Post-Training Mentoring with Industry Experts

Certification

A Certificate of Achievement will be awarded upon successfully completing at least 75% of the course.

Trainers

Portrait of Marc Chitran
Marc Chitran

Frequently Asked Questions (FAQs)

This course is perfect for beginners who want to learn Figma from the ground up, as well as professionals in related fields like product management, development, or marketing who want to better understand design processes.

No prior experience is required! This course starts with the basics, so whether you’re completely new to design or Figma, you’ll be able to follow along.

All you need is a laptop, a stable internet connection, and a free Figma account. A secondary monitor can enhance your experience but isn’t required.

You’ll learn how to navigate Figma’s interface, create basic UI elements, build wireframes, make interactive prototypes, and use Figma’s collaboration features to work effectively with others.

Yes, upon completing the two-day course, you’ll receive a certificate of completion, which can be used to showcase your Figma skills.

Absolutely! Figma is free to use, and all files created during the course are yours to keep. We’ll also share additional resources to help you keep building your skills.

This course is specifically for beginners, focusing on Figma basics, UI fundamentals, and simple prototyping. It’s a practical introduction, while advanced courses dive deeper into design systems, high-fidelity prototypes, and more complex workflows.

Yes, there may be opportunities to use personal projects for exercises like prototyping and presentation activities. This can make the learning even more relevant to your work or interests.

A significant portion of each day is devoted to practical exercises and projects. We believe hands-on practice is the best way to learn Figma, so expect to be working directly in the tool for the majority of the course.

Yes, we provide a set of resources at the end of the course, including tutorials, reading materials, and design templates to support your continued learning.

You’ll learn how to invite collaborators, leave comments, and use Figma’s versioning and sharing features. We’ll also cover best practices for working in a team environment.

We’ll touch on basic responsive design principles and show you how to use Auto Layout to create elements that adapt to different screen sizes. For deeper responsive design, consider advanced courses after this one.