UI Styleguide With Figma

Learn how to collaborate trough design

Member

4,317 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

4,317 Happy Members

Review setelah bergabung di kelas UI Styleguide With Figma

Muhammad Irfan Per

Full-Stack Developer

mantap

Nungki Bangkit

UI Designer

Mudah di mengerti

Muhammad Rizqi Akb

Full-Stack Developer

tutornya mantap mas

Fikri M Sanad

Full-Stack Developer

Jelas Bangettt

Farhan Fadhlurrahm

Lifetime Learner

Ilmunya sangat bermanfaat sekali

Maulana Rifky

Full-Stack Developer

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

abdul kodir

Lifetime Learner

lanjut kelas premium

Rizki Ramadhany

Lifetime Learner

mantap

Queen Virginia J.

Front-End Developer

Penyampaiannya sangat jelas :)

Tegar Ramadhan

Full-Stack Developer

kelasnya mantap, mudah dipahami

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

natasya valencia

Full-Stack Developer

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

Winny Dea Monica

Lifetime Learner

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

Ronald Raihan A

UI Designer

penjelasan materi mudah di pahami

Teguh Samodra

Front-End Developer

Keren

Bima Aditya

Lifetime Learner

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

wennidia

UI Designer

Makasih Ilmunya

Riswandha Agustian

Lifetime Learner

Mantaap sekali, sangat bermanfaat bagi yg baru belajar ui.

alfannur

Product Designer

mantap ka ,. penjelasan mudah dimengerti

Ivan S P S T

Lifetime Learner

terimakasih ilmunya kak

Iman Rahman

Full-Stack Developer

Ngikutin tutorial ini bikin desain jadi lebih mudah dan cepat

Herian Eduward

UI Designer

materi mudah dimengerti

Randy

Full-Stack Developer

Jelas dan terstruktur

Gema Ramadhan

UI Designer

Sangat detail! kereeen

Octarina Asriningr

UI Designer

kelas gratis tapi isinya manteppp!!

Arum

UI Designer

ok

Ferdiansah

UI Designer

terimakasih

Didi Farizal

UI Designer

mantab! sangat membantu sekali. apalagi ini free. daging banget

Naufal Ghifari

Logo Designer

Mudah dimengerti.

Muhammad Dhiauddin

Full-Stack Developer

mantap

Idolarosa Hutabara

UX Designer

The Best

Ronaldo Christian

UI Designer

Terima kasih atas ilmu yang diberikan, sangat bermanfaat!

Ahmad Rafinaldi Ry

UI Designer

Kelasnya keren, sangat bermanfaat

Toriq

Front-End Developer

Terima kasih ilmunya bang, dari yang awalnya buta sama sekali mengenai figma jadi setidaknya memahami basic basicnya. Sampai jumpa di Class selanjutnya

Muhammad Ghozy Sam

Full-Stack Developer

Masyaallah mantap, ilmu yang sangat penting untuk memulai desain UI :)

Alif Ramadhan

UI Designer

makasih banyakkk

Rafif Fauzi F

UI Designer

Sangat bermanfaat

Sina Mustopa

Full-Stack Developer

Sangat memberikan ilmu yang jelas dan padat untuk hal baru dari tata desain style guide, kece dan mantap keren, terimakasih

Ed US

UI Designer

Membantu sekali untuk aku yg baru mulai belajar

Fiqri

Front-End Developer

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

Bachtiar Zulkarnae

Lifetime Learner

Materi dasar yang gak berat dan mudah dipahami

Kevin Ardani

Lifetime Learner

Terima kasih kak

aldy suryanto

Lifetime Learner

KEREN BANG

Rido Nur Rahman

Full-Stack Developer

Sangat memudahkan

Evita Cindy Septiv

Lifetime Learner

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

Anjas Ramdan

UI Designer

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

F.A.Chalik

Full-Stack Developer

mantap

Sharen Alicia Ayug

UI Designer

banyak sekali pengetahuan pengetahuan baru yang aku dapet. sukses selalu

Ibnu Kahfi

UI Designer

Sangat membantu dan mudah untuk di pelajari :)

Faiz al-jumaedi

UI Designer

menggokil walau gratis isinya daging banget 💥

Gumilar

UI Designer

praktek mudah dipahami

Muhammad Afrizal R

Front-End Developer

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

M. Iqbal Effendi

Back-End Developer

Keren, membantu banget

Putra Kesuma

Full-Stack Developer

keren

ahmad hakim makari

Lifetime Learner

Materi bukan Abal abal

Rizwan Gustama

Full-Stack Developer

Materi nya mudah di pahami

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

Iqbal Rasetio

Lifetime Learner

Mantap

Asep Dedi Rukmana

Full-Stack Developer

Mantap

Dianti Anggraeni

UI Designer

Free & Fire! Bermanfaat sekali :D

Fatkhurohman

Full-Stack Developer

Materinya doop banget asli, langsung nangkep :) Thanks mas

Deni Widodo

Lifetime Learner

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

agung guthe

UI Designer

bermanfaat bagi saya yg baru mau belajar figma

Shanti Rahayu

UI Designer

bagus dan sangat membantu

Avan Hilal Agustaf

Product Designer

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

Rendyanta Maulana

Full-Stack Developer

Mantap banget materi nya

Muhamad Angga Maul

Full-Stack Developer

mantap

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

Binti Nurul

Lifetime Learner

Terima kasih Mas Angga sudah berbagi ilmu. Barakallah..

Abi hisam

Full-Stack Developer

sangat mudah di pahami..

pancaran ratna

UI Designer

mudah dipahami,singkat,padat,dan jelas

Naufal Aziz

UX Designer

materinya bermanfaat dan simple

Irvan hilmi

Full-Stack Developer

mantpp

Pradana Yoga Chris

Full-Stack Developer

Sangat Bermanfaat

Reynald Daffa

Lifetime Learner

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

Ilham Fikri A Fata

Lifetime Learner

Bagus isi materinya

lintang samudera

UX Designer

Materi yang bagus penjelasan yang diberikan dapat dipahami

Featured Projects

0 Hasil karya terbaik di kelas UI Styleguide With Figma

Belum ada hasil karya.