UI/UX Design Figma Fundamentals

Dalam pengembangan antarmuka digital, Figma telah menjadi alat yang populer bagi desainer UI/UX karena kemampuannya dalam mendukung desain kolaboratif secara real-time. Namun, banyak desainer yang masih menghadapi berbagai tantangan dalam memahami alur kerja Figma secara efektif. Beberapa tantangan yang umum terjadi meliputi transisi dari alat desain lain, penataan elemen desain agar tetap konsisten, serta optimalisasi penggunaan komponen dan prototipe interaktif. Selain itu, pemahaman yang kurang dalam penggunaan fitur Auto Layout dan Variants sering menyebabkan desain yang tidak fleksibel dan sulit untuk diadaptasi ke berbagai ukuran layar.

Training UI/UX Design Figma Fundamentals ini dirancang untuk memberikan pemahaman yang komprehensif mengenai prinsip dasar desain menggunakan Figma dan FigJam. Materi yang dibahas mencakup eksplorasi fitur utama Figma, penataan moodboards dan user flows dalam FigJam, hingga pembuatan wireframe berbasis mobile-first menggunakan elemen vektor. Peserta juga akan belajar bagaimana menerapkan desain yang konsisten dengan grid, warna, dan tipografi, serta memanfaatkan Auto Layout untuk menciptakan antarmuka yang responsif. Selain itu, sesi pelatihan juga akan mencakup pembuatan komponen dan variants dalam lingkungan kerja kolaboratif serta teknik prototyping yang mencakup transisi, animasi pintar, dan komponen interaktif.

Dalam pelatihan ini, peserta akan mempelajari bagaimana menjelajahi fitur utama Figma dan FigJam, menyusun moodboards, persona, serta user flows secara efektif. Mereka juga akan memahami prinsip-prinsip desain konsisten menggunakan grid, warna, dan tipografi, serta membangun komponen dan variants untuk berbagai perangkat. Lebih lanjut, peserta akan belajar cara membuat prototipe yang interaktif, menguji dan berbagi desain di berbagai perangkat, serta mengelola proses ekspor aset dan handover kepada tim pengembang.

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