FIGMA :

ALL ABOUT UI DESIGN & PROTOTYPING

Daniel Indrayana
Agenda:
Kenapa Menggunakan Figma?

Pengenalan Figma

Hands-on Figma Sebagai Tool Product Design

Tanya Jawab Seputar Product Design

@daniel Design Introduction: Figma

01
Kenapa Menggunakan
Figma?

@daniel Design Introduction: Figma

Alasan Saya Menggunakan Figma
Dimulai dari Gratis (Personal)

Multi Platform (Web browser, mac, windows, hingga app di smartphone)

Fitur Kolaborasi Online (Multi User Editing & Commenting)

Community Yang Inspiratif

Banyak Plugins & Assets Untuk Mempercepat Design

All-In-One Design Tool

@daniel Design Introduction: Figma

@daniel Design Introduction: Figma
02
Pengenalan Figma

@daniel Design Introduction: Figma

Figma Adalah Salah Satu Tool Design
Jangan
Jatuh
Cinta Pada
Design
Tool!
Semua Bisa
Didesign
Dalam Figma

@daniel Design Introduction: Figma

Social Media Post Design

@daniel Design Introduction: Figma

Illustration

@daniel Design Introduction: Figma

NFT Avatar Design

@daniel Design Introduction: Figma

3D Design (with Plugins)

@daniel Design Introduction: Figma

Interface Figma

@daniel Design Introduction: Figma

 1 Main Menu

2.
4. Insp-
Page, 3.
ector
Layer & Canvas
Panel
Assests
Dasar Figma

@daniel Design Introduction: Figma

Dimulai Dengan Membuat Frame (F)

@daniel Design Introduction: Figma

Sesuaikan Frame Sesuai Kebutuhan

@daniel Design Introduction: Figma

Memasukan Teks (T)

@daniel Design Introduction: Figma

Membuat Rectangle (R)

@daniel Design Introduction: Figma

Memasukan Image Kedalam Rectangle (Mask)

@daniel Design Introduction: Figma

Ulangi Proses 1 - 4 Untuk Membuat UI

@daniel Design Introduction: Figma

Step by Step UI
Design di dalam
Figma

@daniel Design Introduction: Figma

Menentukan Styling

@daniel Design Introduction: Figma

Dimulai Dengan Membuat Design Component

@daniel Design Introduction: Figma

Menggunakan Auto Layout

@daniel Design Introduction: Figma

Menerapkan Component

@daniel Design Introduction: Figma

03
Hands-on Figma
+ Tips & Trick

@daniel Design Introduction: Figma

Download & Login Ke Figma

@daniel Design Introduction: Figma

Figma User Dashboard (Setelah Login)

@daniel Design Introduction: Figma

Setting New Frames (Sesuai Kebutuhan)

@daniel Design Introduction: Figma

Membuat Grid & Layout Columns

@daniel Design Introduction: Figma

Mengenal Layers & Groups

@daniel Design Introduction: Figma

Vector Shape

@daniel Design Introduction: Figma

Images

@daniel Design Introduction: Figma

Typography

@daniel Design Introduction: Figma

Membuat Colour Styles

@daniel Design Introduction: Figma

Membuat Text Styles

@daniel Design Introduction: Figma

Membuat Effect Style

@daniel Design Introduction: Figma

Membuat Grid Style

@daniel Design Introduction: Figma

Membuat Reusable Components

@daniel Design Introduction: Figma

Mengenal Components

@daniel Design Introduction: Figma

Swapping & Nesting Components

@daniel Design Introduction: Figma

Overwrites Components

@daniel Design Introduction: Figma

Merubah Layers Menjadi Auto-Layout

@daniel Design Introduction: Figma

Nested Auto Layout

@daniel Design Introduction: Figma

Setting Up Prototype

@daniel Design Introduction: Figma

Connecting Screens

@daniel Design Introduction: Figma

Overflow Behaviours

@daniel Design Introduction: Figma

Sharing With Other (Developers View)

@daniel Design Introduction: Figma

Exporting Assets

@Christine Vallaure

@daniel Design Introduction: Figma

Favorite
Figma Plugins

@daniel Design Introduction: Figma

Iconify by Vjacheslav Trushkin

@daniel Design Introduction: Figma

Unsplash by Unsplash

@daniel Design Introduction: Figma

Content Reel by Microsoft

@daniel Design Introduction: Figma

Brandfetch by Brandfetch

@daniel Design Introduction: Figma

Charts by Sam Mason de Caires

@daniel Design Introduction: Figma

Super Tidy by Ismael Gonzalez

@daniel Design Introduction: Figma

Autoflow by Coinbase

@daniel Design Introduction: Figma

Color Contrast Checker by Tiffany Chen

@daniel Design Introduction: Figma

Similayer by David Williames

@daniel Design Introduction: Figma

Roto by Carlo Jörges

@daniel Design Introduction: Figma

Figmotion

@daniel Design Introduction: Figma

Referensi Buku Product Designer

@daniel Design Introduction: Figma

Terima Kasih
Selamat tidur