UI/UX Design Figma Fundamentals

Kualitas UI/UX yang rendah berdampak negatif terhadap produk digital. Kebutuhan pengguna tidak terjawab sehingga pengguna dan pendapatan bisnis hilang (Green, 2024). Hal ini terjadi karena UI/UX design tidak berorientasi pada kebutuhan pengguna, tidak disusun melalui kolaborasi antara designer dan developer, dan tidak menerapkan standar dan alur kerja serah terima yang terstruktur (Jůn, 2025).

Course ini membahas UI/UX design dengan pendekatan sistematis dan aplikatif menggunakan Figma. Pembelajaran dimulai dari pemahaman prinsip inti UI/UX dan Design Thinking menggunakan FigJam untuk membangun empati pengguna dan problem framing yang tepat. Materi kemudian dilanjutkan dengan praktik wireframing dan desain responsif melalui Auto Layout dan Grid System. Materi diperkuat dengan penguasaan component-based design (Components & Variants), prototyping interaktif (Transitions dan Smart Animate), hingga tahapan usability testing, sharing prototype, dan handover ke tim developer. Model pembelajaran dirancang berbasis kombinasi konsep, eksplorasi studi kasus, dan praktik langsung end-to-end. Peserta mampu menghasilkan desain yang konsisten, fungsional, serta siap diimplementasikan dalam pengembangan produk digital.

OBJECTIVES

1. Memahami dasar-dasar desain UI/UX menggunakan Figma dan FigJam
2. Menerapkan prinsip desain yang konsisten dengan grid, warna, dan tipografi
3. Membuat antarmuka responsif menggunakan Auto Layout dan komponen berbasis variants
4. Membuat prototipe interaktif dengan animasi transisi dan komponen dinamis
5. Mengelola dan membagikan desain melalui proses ekspor aset dan handover yang efektif

AUDIENCE

1. Developer
2. Product Designer
3. UI/UX Designer

PREREQUISITES

Tidak ada training khusus yang dipersyaratkan

CONTENT

1. Introduction to UI/UX Design

1.1 What Is UI/UX Design?
1.2 Difference Between UI and UX Design
1.3 Principles of the UX Design
1.4 Principles of UI Design
1.5 Design Thinking, Sketching and Ideation

2. Exploring Figma and Transitioning from Other Tools

2.1 What is Figma?
2.2 Desktop App Versus Web App
2.3 Transitioning to Figma from Sketch and Adobe XD
2.4 Exploring the Welcome Screen

3. Structuring Moodboards, Personas, and User Flows within FigJam

3.1 Exploring Ideas and Collaborating in FigJam
3.2 Creating Moodboards and Personas in FigJam
3.3 Building User Flow in FigJam

4. Design Environment

4.1 Starting a New Design Project
4.2 Exploring the Toolbar
4.3 Exploring the Left Panel
4.4 Exploring the Right Panel

5. Wireframing a Mobile-First Experience Using Vector Shapes

5.1 Evolving the Idea to a Wireframe
5.2 Playing with Shapes in Figma
5.3 Advanced Vectors with the Pen Tool
5.4 Developing the App Structure

6. Designing Consistently Using Grids, Colors, and Typography

6.1 Getting Started with Grids
6.2 Working with Typography, Colors, and Effects
6.3 Introducing Styles

7. Creating a Responsive Mobile Interface Using Auto Layout

7.1 Introducing Auto Layout
7.2 Resizing and Constraints
7.3 Applying Auto Layout to Interface

8. Building Components and Variants in a Collaborative Workspace

8.1 Creating and Organizing Components
8.2 Extending Components with Variants
8.3 Multiplayer Mode, Libraries, and Version Control

9. User Interface Design on Tablet, Desktop, and the Web

9.1 Discovering Responsive Design
9.2 Adjusting the Interface for Tablets
9.3 Adjusting the Interface for the Web and Desktop

10. Prototyping with Transitions, Smart Animate, and Interactive Components

10.1 Mastering Transitions and Triggers
10.2 Animating with Smart Animate
10.3 Structuring Interactive Components
10.4 Creating Interactive Overflows and Overlays

11. Testing and Sharing Prototype on Browsers and Real Devices

11.1 Viewing Interactive Prototype
11.2 Sharing Prototype with Others
11.3 Working with Feedback and Reviews

12. Exporting Assets and Managing the Handover Process

12.1 Exporting from Figma
12.2 Exploring the Inspect Tab
12.3 Handling Over the Project for Development

13. Discovering Plugins and Resources in the Figma Community

13.1 Exploring the Figma Community
13.2 Finding Useful Resources
13.3 Extending Figma with Plugins