Design X Institute | Design School in Singapore
What the Figma (WTF) – Advanced Layouts and Components
What the Figma (WTF) – Advanced Layouts and Components
What the Figma (WTF) – Advanced Layouts and Components
Duration
2 Days
Course Fee
388 SGD
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.
As the most used Prototyping platform in the UI Design industry, the applications and features of Figma are continually growing to keep up with the needs of users around the globe.
As you go through this course, you’ll acquire the skills wielded by UI Design professionals to create prototypes that will dazzle your users, whilst developing a profound understanding of the industry. From concept to a highly polished finish, you’ll confidently manage your own UX projects ideal for your portfolio.
Whether you’re a UX design enthusiast, budding designer or product manager looking to increase your capabilities, 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 turn your basic Figma projects into design masterpieces. Join us and discover how Figma can bring your design ideas to life – no previous experience required!
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
In this course, you will be working on various hands-on exercises that focus on building your skills and confidence in using Figma to create quality designs, collaborate effectively with teams, and stay ahead in the design industry. You will learn :
- Workflow techniques, managing design assets, styles, components, grid and column layouts
- Setting up your brand within your design
- Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
- Auto Layout Feature
- Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
- Incorporating Animations into your elements
- How to use Variables and put them to work creating even more complete prototypes
- Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components.
We will equip you with the skills to build prototypes for various screen sizes. You will get to choose and create captivating screens and pages such as:
(Event Sign-Up Flow, Service get-a-quote lead-generation flow, New User Sign-up Onboarding Flow)
Course Schedule
| Learning Mode | Course Dates | Duration |
|---|---|---|
| In-Person | 05, 06 Apr 2025 (Sat, Sun) | 16 Hours |
| In-Person | 07, 08 Jul 2025 (Mon, Tue) | 16 Hours |
| In-Person | 25, 26 Sep 2025 (Thu, Fri) | 16 Hours |
| In-Person | 06, 07 Dec 2025 (Sat, Sun) | 16 Hours |
Click on the course dates above to register online.
Course Outline
Instructor-Led | Lecture, Group Discussion
- Quick Introduction to Figma (incl. features to be used in project)
- In-class Project Brief – Creation of Single Page Website
- Set up project canvas + Naming convention best practices
Design Process
- Understanding design thinking
- Applying design methodologies
- Efficient workflow strategies
Instructor-led | Lecture, Demonstration and modelling, Individual Exercise
System Tokens
- Concept: Auto Layout
- Grid System
- Breakpoints + Responsive Variables
- Styles – Creating a colour palette system
- Styles – Creating a font system (font pairing)
- Styles – Effects System (Shadows)
Design System Components
- Concept: Components & Instances (Incl. overrides)
- Atoms – Logos + Icons + Image Placeholders
- Molecules – Buttons + Input Fields + Dropdowns + Checkboxes
- Organisms – Header Navigation + Footer Navigation + Cards + Accordions
- Siteblocks
Instructor-led | Lecture, Demonstration and modelling
- Adding & Formatting Images
- Adding & Formatting Text
- Hero Banner Segment
- USPs Segment
- Features Segment
- Bento Segment
- Team Members Segment
- Pricing Segment
- Testimonials Segment
- CTA Segment
- Social Proof Segment
- Statistics Infographic Segment
Accessibility
- Designing inclusive interfaces
- Using Figma’s accessibility features
Instructor-led | Lecture, Demonstration and modelling, Practice and feedback
- Concept: Prototype Mode (incl. Auto Animate)
- MicroAnimations – Default State > OnHover > OnPress > Inactive
- Sticky Scroll
- Animating the high-resolution landing page
Instructor-led | Lecture, Demonstration and modelling, Individual Exercise
- Sharing files and projects (Presentation -or- Handover to devs)
- Real-time collaboration features
- Using comments and feedback tools
- Version control and history
Instructor-led | Lecture, Demonstration and modelling, Individual Exercise
Plugins and Integrations
- Exploring available plugins
- Integrating with other design tools (optional)
- Customizing Figma with plugins
- New Figma Features From CONFIG 2024
File Organization and Naming Conventions
- Best practices for file structure
- Consistent naming conventions
- Design system organization
Performance Optimization
- Improving file performance
- Optimizing images and assets
- Best practices for large files
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
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.
