UI Styleguide With Figma

Learn how to collaborate trough design

Member

2,895 enrolled

Tingkatan
Sertifikat
-
Konsultasi
-

Develop Your Skills

Dalam membuat tampilan UI, Designer perlu menerapkan design yang menarik dan tentunya konsisten dengan UI Style Guide agar memudahkan proses web/mobile development. Dengan UI Style Guide, Designer dapat menghemat waktu karena pembuatan komponen design menjadi lebih praktis dan dapat dikerjakan oleh beberapa designer secara bersamaan.

Pada kelas ini, Mentor menggunakan Figma yang telah digunakan oleh banyak perusahaan besar dunia seperti GitHub, Dropbox, Twitter dan Slack. Kita akan belajar proses design yang cepat dengan fitur-fitur bermanfaat seperti Auto Layout, Design Tokens, hingga beberapa rekomendasi pilihan plugin yang sangat efisien. Nantinya kita juga akan membuat design library dan komponen design yang responsive dengan fitur Auto Layout.

Kelas ini cocok bagi Anda yang ingin mendalami UI Style Guide secara gratis. Selain itu, Mentor ahli kami akan siap membantumu melalui grup konsultasi. Mari belajar Design bersama kami dan sampai jumpa di kelas!

Key Points

Membuat variant component

Membuat component responsive dengan auto layout

Memahami perbedaan frame dan group

Memahami style guide dan design library

Designed For

Desainer pemula yang ingin membuat design library

UI/UX Designer yang ingin mendalami tools Figma

Anda yang ingin mempelajari UI Design dengan Figma

Learn With Expert

Jalu Detya

UI/UX Designer

Profile Mentor

Happy Learning

Materi kelas yang bermanfaat untuk karir kita

1

Trailer

play_circle

Trailer kelas

1 mins

2

Auto Layout

play_circle

Auto Layout Intro

1 mins

play_circle

Auto Layout [Button]

3 mins

play_circle

Auto Layout [Navigation

5 mins

play_circle

Auto Layout [Card]

5 mins

play_circle

Auto Layout [List]

6 mins

3

Design Token

play_circle

Design Token/Style Library Intro

1 mins

play_circle

Design Token/Style Library [Color]

3 mins

play_circle

Design Token/Style Library [Typography]

2 mins

play_circle

Design Token/Style Library [Icon]

2 mins

play_circle

Design Token/Style Library [Effect]

2 mins

play_circle

Design Token/Style Library [Grid]

2 mins

4

Component

play_circle

Component Intro

1 mins

play_circle

Component Intro [Button]

2 mins

play_circle

Componen & Variant Intro [Button]

4 mins

5

Frame & group

play_circle

Frame & group

5 mins

6

Popular plugin

play_circle

Popular plugin

9 mins

7

Penutup

play_circle

Penutup

1 mins

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

Figma

Software Gratis

Download Now

2,895 Happy Members

Review setelah bergabung di kelas UI Styleguide With Figma

Ronald Raihan A

UI Designer

penjelasan materi mudah di pahami

Rizwan Gustama

Full-Stack Developer

Materi nya mudah di pahami

Fatkhurohman

Full-Stack Developer

Materinya doop banget asli, langsung nangkep :) Thanks mas

Asep Dedi Rukmana

Full-Stack Developer

Mantap

Iqbal Rasetio

Lifetime Learner

Mantap

Adli Putra Prasety

UI Designer

Sangat bermanfaat, penyampaian dan praktek yang jelas

Reihan Faizal Hani

Product Designer

banyak sekal ilmu yang bisa didapat dari kelas ini

Dianti Anggraeni

UI Designer

Free & Fire! Bermanfaat sekali :D

Kevin Ardani

Lifetime Learner

Terima kasih kak

alfannur

Full-Stack Developer

mantap ka ,. penjelasan mudah dimengerti

Muhammad Dhiauddin

Full-Stack Developer

mantap

wennidia

UI Designer

Makasih Ilmunya

Bima Aditya

Lifetime Learner

Penjelasan Dari Materi Jelas, Dan Langsung Di Praktikan, Sehingga Bisa Langsung Mengerti Use Case Penggunaan.

Teguh Samodra

Front-End Developer

Keren

agung guthe

UI Designer

bermanfaat bagi saya yg baru mau belajar figma

Winny Dea Monica

Lifetime Learner

Hai ka, ini sangat bantu aku banget mempercepat desain freelance aku. Thankyouuu banget kak!

natasya valencia

Full-Stack Developer

Materi yg disampaikan sangat bermanfaat dan memudahkan pemula untuk belajar UI/UX dengan cara yg efisien. Thx BWA!

Muhammad Irfan Per

Full-Stack Developer

mantap

Tegar Ramadhan

Full-Stack Developer

kelasnya mantap, mudah dipahami

Queen Virginia J.

Front-End Developer

Penyampaiannya sangat jelas :)

Rizki Ramadhany

Lifetime Learner

mantap

abdul kodir

Lifetime Learner

lanjut kelas premium

Maulana Rifky

Full-Stack Developer

Nice tutorial. The tutor has good and comprehensive storytelling skill. Nice!

Farhan Fadhlurrahm

Lifetime Learner

Ilmunya sangat bermanfaat sekali

Fikri M Sanad

Full-Stack Developer

Jelas Bangettt

Muhammad Rizqi Akb

Full-Stack Developer

tutornya mantap mas

Nungki Bangkit

UI Designer

Mudah di mengerti

Muhammad Daffa Raz

Mobile App Developer

Materi dan pengajar sangat baik dan penjelasan nya sangat singkat, padat dan jelas. thanks BWA atas figma course gratisan nya

Rido Nur Rahman

Full-Stack Developer

Sangat memudahkan

ahmad hakim makari

Lifetime Learner

Materi bukan Abal abal

Putra Kesuma

Full-Stack Developer

keren

M. Iqbal Effendi

Back-End Developer

Keren, membantu banget

Muhammad Afrizal R

Front-End Developer

mantap performa untuk bekerja dengan figma makin cepat dan rapi, thanks BWA

Gumilar

UI Designer

praktek mudah dipahami

Faiz al-jumaedi

UI Designer

menggokil walau gratis isinya daging banget 💥

Ibnu Kahfi

UI Designer

Sangat membantu dan mudah untuk di pelajari :)

Ed US

UI Designer

Membantu sekali untuk aku yg baru mulai belajar

F.A.Chalik

Full-Stack Developer

mantap

Anjas Ramdan

UI Designer

Mantaap kelasnya, apalagi sesi auto layout. Jadi tau dehh cara pake auto layout di figma

Evita Cindy Septiv

Lifetime Learner

materinya singkat padat tetapi sangat jelas dan mudah dipahami. Terima kasih banyak 👍

Riswandha Agustian

Lifetime Learner

Mantaap sekali, sangat bermanfaat bagi yg baru belajar ui.

aldy suryanto

Lifetime Learner

KEREN BANG

Sharen Alicia Ayug

UI Designer

banyak sekali pengetahuan pengetahuan baru yang aku dapet. sukses selalu

Bachtiar Zulkarnae

Lifetime Learner

Materi dasar yang gak berat dan mudah dipahami

Fiqri

Front-End Developer

Terima kasih. saya jadi lebih byk tau ttg fungsi2 di figma

Deni Widodo

Lifetime Learner

Materi nya bagus banget. Sangat mudah dipahami bagi pemula seperti saya. Terima kasih banyak mas angga. semoga ilmunya berkah.

Abi hisam

Full-Stack Developer

sangat mudah di pahami..

Binti Nurul

Lifetime Learner

Terima kasih Mas Angga sudah berbagi ilmu. Barakallah..

susanti faiz

Lifetime Learner

Terima kasih telah diberikan kelas gratis ka angga, jadi makin faham untuk pemula seperti aku. Semoga sehat selalu dan sukses terus ya

Muhamad Angga Maul

Full-Stack Developer

mantap

Rendyanta Maulana

Full-Stack Developer

Mantap banget materi nya

Avan Hilal Agustaf

Product Designer

Dengan mengikuti kelas dasar ini, aku jadi makin mudah memahami aplikasi Figma

Shanti Rahayu

UI Designer

bagus dan sangat membantu

pancaran ratna

UI Designer

mudah dipahami,singkat,padat,dan jelas

Ilham Fikri A Fata

Lifetime Learner

Bagus isi materinya

Reynald Daffa

Lifetime Learner

mungkin diberitau juga cara memberikan penamaan component yang baik tuh gimana, but overall nice explanation

Pradana Yoga Chris

Full-Stack Developer

Sangat Bermanfaat

Featured Projects

0 Hasil karya terbaik di kelas UI Styleguide With Figma

Belum ada hasil karya.