Introducing 👋HaloFigma

Tutorial Interaktif Design System

Belajar membuat Design System dari NOL langsung praktek di Figma

Join waiting list, dapetin tutorial gratisDapatkan akses tutorial full version
⭐️⭐️⭐️⭐️⭐️ 4.7 (3,400+ downloads)
tutorial belajar membuat design system user interface dari nol langsung praktek di figma

Apa itu HaloFigma

Halofigma itu tutorial interaktif membuat Design System dari NOL untuk mu yang sedang belajar UI dan UX Design. Dibuat dan dikerjakan langsung di Figma, 100% praktek.

Tutorial bahasa Indonesia pertama yang nge-cover topik Design System secara mendalam.

Think of it as your baby steps on building your Design System from scratch. Full hands-on. Right from Figma!

Kenapa kamu harus belajar Design System

Karena di setiap product tech company saat ini membutuhkan nya. Belajar membuat design system akan membantumu dan tim bekerja lebih efektif, efisien, serta hemat waktu untuk menghasilkan desain yang konsisten terjaga kualitasnya.

Sayangnya banyak yang gatau harus mulai darimana dan gatau apa yang dilakuin uda benar atau belum. HaloFigma bantu kamu mengatasi 2 hal itu, juga bantu kamu jadi desainer yang berpikir lebih sistematis dan terstruktur.

Bayangkan kalo kamu punya skill itu, kamu bakal jadi 🔥 hot property di kantor.

Saya melamar pekerjaan di bidang ui ux design dan mendapat pre test sebelum masuk tahap interview user. Di soal test terdapat design system perusahaan, tapi saya bingung menggunakannya...

Nur Khomairoh, UI Designer 1yr exp

...beberapa kali ikut interview ada pertanyaan mengenai apakah sudah pernah membuat design system.

Naurazka, UI Designer 1yr exp
7 dari 10 designer bilang mereka ditanya DS saat interview dan totally ngerasa clueless.

Gimana cara kerjanya

Kita bermain langsung di Figma, kamu akan belajar langkah demi langkah membuat Style Guide dan Component Library menggunakan teknik advanced seperti Auto Layout dan Variants yang menghasilkan adapative dan responsive components.

Kamu juga belajar menyusun dokumentasi yang baik dari mulai menyusun Naming Conventions hingga mengatur Layer Styles , Text Styles dan mendesain web dokumentasi sendiri. Dituntun dari mulai tingkat kesulitan rendah hingga tinggi dan diakhiri dengan qUIz.

Ini format pembelajaran baru, bukan webinar, bukan video, tapi interaktif steps di Figma yang bisa dimainkan tanpa distraksi dari media lainnya.

I prefer to learn in a practical format like this. I often find with video format I don't really learn as much as I do the practical work after finish watching the whole thing, not to mention I have to switch between different platforms to do the work #annoying

Ellen Anastasia, Product Designer 2yrs exp

Format belajar baru ni. Belajarnya lebih asik karena bisa langsung praktik di figma. Jadinya lebih paham karena teorinya langsung diterapkan ke desain dan step-step nya juga gampang banget dimengerti. Kalau menggunakan video kadang agak ribet harus pindah-pindah antara liat video dan nerapin ke figma

Nur, UI Designer <1yr exp
97.9% dari 328 orang yang telah mencoba, lebih memilih tipe pembelajaran baru ini.

Dengan cara learning by doing ini, kamu akan mengenal shortcuts, real gems plugins, dan teknik Figma yang ga banyak orang tau. Ini semua akan mempercepat proses kerjamu.

Gue jujur baru tau plugin yg diajarin tadi. Itu bisa saving time banget. Sama bagian implementing the text style ke UI nya. Jadi keliatan praktek realnya gimana.

Alvin Niza, Product Designer 3yrs exp

Real gems. Saat menggunakan plugin (yg diajarin) seperti magic, jujur baru tau disini ternyata ada pluginnya.

Anggit, UI Designer 1yr exp
9 dari 10 orang mengaku mendapat trick baru dan terpukau dengan plugin yang diajarin HaloFigma.
intruksi tutorial
tutorial membuat card component di figmatutorial membuat variant component di figma

Apa aja yang dipelajarin

Banyak konten bertebaran tentang Typography, Color Theory, maupun Atomic Design namun ga ada yang jelasin real practice nya gimana. HaloFigma bener2 pure practice, yang ga hanya ngasih kamu ilmu tapi juga langsung aplikasi nya.

Isi Tutorial Design System:

Style guide READY
7 BAB, 42 BAGIAN
  • Typography
  • Color system
  • Shadows
  • Grid dan Spacing
  • Icon library
Component Library OCT 2021
10 BAB, 64 BAGIAN
  • Auto Layout, Components dan Variants
  • Basic components
  • Advanced components
qUIz: Aplikasiin yg udah dibuat NOV 2021
3 BAB, 25 BAGIAN
  • Mendesain web interface
  • Mendesain mobile interface
Documentation MID NOV 2021
9 BAB, 54 BAGIAN
  • Mendesain web dokumentasi
  • Dokumentasi Style Guide
  • Dokumentasi Components
  • Style guide
    • Typography
    • Color system
    • Shadows
    • Grid dan Spacing
    • Icon library
  • Component Library
    • Auto Layout, Components dan Variants
    • Basic components
    • Advanced components
  • qUIz: Aplikasiin apa yang udah dibuat
    • Mendesain web interface
    • Mendesain mobile interface
  • Documentation
    • Mendesain web dokumentasi
    • Dokumentasi Style Guide
    • Dokumentasi Components

Join waiting list dan dapetin tutorial gratis

Banyak benefit untuk jadi early supporter:

  • Ga cuman satu, tapi dapat dua tutorial gratis. Kamu bisa belajar membuat typography scale dan membuat color neutral palette.
  • Ngerasain experience baru dalam belajar desain dan mempraktekan nya 100% di kerjaanmu.
  • Bisa request dan nentuin konten akhir tutorial ini.
  • Jadi paling pertama dapetin product nya saat release.
  • Dapetin special price 70% OFF, hanya untuk waiting list.
Join waiting list
⭐️⭐️⭐️⭐️⭐️ 4.7 (2,700+ downloads)

Masih belum yakin? Dapetin tutorial gratis

Lebih dari 2,700+ orang udah mencobanya dan ketagihan.

  • Ga cuman satu, tapi dapat dua tutorial gratis. Kamu bisa belajar membuat typography scale dan membuat color neutral palette.
  • Ngerasain experience baru dalam belajar desain dan mempraktekan nya 100% di kerjaanmu.
Download tutorial gratis
Atau dapatkan Akses ke Tutorial Full Version sekarang
⭐️⭐️⭐️⭐️⭐️ 4.7 (3,400+ downloads)

Kata mereka yang sudah mencoba

Beberapa cerita pentingnya Design System dan pengalaman temen2 mencoba HaloFigma

Aku suka interactive tutorial gini. Karena real project dan langsung dikerjaini di tempat, kalau video cuma ditonton tapi ga langsung/belum tentu dikerjain, dan nambah hard skills juga. Keren banget ini.

Aghniya, UI UX Designer 1yr exp

Waktu itu sempet tes wawancara di salah satu startup sebagai UX designer intern. Terus ditanyain udah pernah tau tentang design system dll belum. Karena pengetahuan terbatas, jadi cuma tau teorinya aja. Sejak interview itu, jd pengen tau, gimana sih bentukannya design system itu, dan aku mendapatkannya disini.

Azizah, Pencari kerja

Kemarin diinterview sama company buat program internet kampus merdeka. Ditanyain macem macem istilah UI/UX. Pas ditanyain apa yg kamu tau tentang design system. Singkat cerita hari ini diumumin kalo saya diterima di program intern-nya. Design System sepenting itu dan saya mempelajari lebih disini.

Muhammad Faiz, Mahasiswa UNJ

I prefer to learn in a practical format like this. I often find with video format I don't really learn as much as I do the practical work after finish watching the whole thing, not to mention I have to switch between different platforms to do the work #annoying

Ellen, Product Designer 2yrs exp

Saya abis ikutan bootcamp ui ux tapi yaaa prakteknya ga mendetail cuma kulitnya aja tanpa arahan yg begitu jelas. Barusan bgt saya ditolak sama salah satu agency nih abis ditawarin jd ux designer di sana, cuma baiknya lead yg interview saya ngasih feedback dan insight harus improve di bagian mana, katanya saya still "raw" because you know anything but you dont know which one is describing you and suits you specifically, karena ya mereka maunya yg emg mantep di salah satu sektor skill biar joss gt (salah satu yg utama ya Design System). Tutorial ini ngebantu aku memahami Design System dengan lebih mudah dan praktis.

Nadhif, Mahasiswa Universitas Brawijaya

Kalo ditanya suka bagian mana di tutorial ini? Suka semua nya. Penjelasan nya sangat mudah dipahami. Enjoy banget bacanya dan sambil di praktekan jadi jauh lebih mudah.

Maullana, UI UX Designer 3yrs exp

Baru aja nyobain satu tutorial disini, udah ketagihan kak. Makasih banget.

Syauqi, Product Designer 2yrs exp

Kereen bangett ka, untuk aku yang emang bener bener lagi belajar dari nol ini kayak di tuntun banget tutorialnya dari awal sampai akhir. Setiap step2 nya pun jelas gak yg bikin bingung.

Tantry, Pencari kerja

Gue jujur baru tau plugin yg diajarin tadi. Itu bisa saving time banget. Sama bagian implementing the text style ke UI nya. Jadi keliatan praktek realnya gimana.

Alvin, Product Designer 3yrs exp

Cocok buat siapa?

Sejatinya cocok bagi siapa aja yang ingin memperdalam hard skill desain mu, baik UI designer, UX designer maupun Developers. Baik solo designer maupun team.

Cocok kalo:
  • Kamu paham basic dari figma tapi ga pernah buat component dan style guide dari NOL.
  • Kamu siap nyediain waktu untuk belajar mempertajam crafting skill mu.
  • Kamu mau pindah tools ke figma dan mau improve workflow kerja mu.
  • Kamu mau belajar cara bangun design system yang sustainable dan scalable.
  • Kamu mau punya passive income, buat dan jual UI kits dari hasil proses belajarmu disini.
  • Kamu mau nyobain apa yang uda diajarin ke Design System mu di kantor, ninggalin good legacy.
Ga cocok kalo:
  • Kamu belum pernah nyentuh Figma (kamu butuh tau basic nya dulu).
  • Kamu figma pro yang uda banyak buat Design System dari NOL.
  • Kamu mau jalan pintas aja tanpa dedikasiin waktu, atensi dan tenaga untuk belajar skill ini.

Siapa pembuatnya

author ebook petunjuk memulai ux dari nol dan tutorial membuat design system dari nol, ar wasil

👋 Halo perkenalkan saya Wasil.
Saya product designer yang bekerja dan tinggal di Singapore. Selama berkarir menjadi product designer, saya berkesempatan mencoba dan mengembangkan Design System sebagai solo designer (early stage startup) maupun sebagai individual contributor (corporate startup). Keduanya memiliki set of challenges yang berbeda yang saya ingin bagikan lewat tutorial ini.

Sebagai lulusan master teknik, saya senang mengambil pendekatan sistematis terhadap ilmu desain yang banyak kali dianggap sebatas faktor estetis saja.

Di tutorial ini saya ingin membagi pengalaman saya dalam bentuk real praktek dimana saya tuntun melalui instruksi detail step by step membangun Design System dari NOL. Saya tumpahkan semua tips and trick yang biasa saya pake di pekerjaan saya.

Selain bekerja, saya pun senang berbagi ilmu dan pengalaman dengan rekan seprofesi melalui akun HaloDesigners dan membantu temen2 pemula untuk terjun ke dunia UI UX Design dan Research melalui buku Petunjuk Memulai UX dari NOL.

Semoga dengan mengikuti tutorial ini kamu bisa mendapatkan high valuable skill baru untuk kamu praktekan di kantor atau di project pribadi mu.

Join waiting list dan dapetin tutorial gratis

Banyak benefit untuk jadi early supporter:

  • Ga cuman satu, tapi dapat dua tutorial gratis. Kamu bisa belajar membuat typography scale dan membuat color neutral palette.
  • Ngerasain experience baru dalam belajar desain dan mempraktekan nya 100% di kerjaanmu.
  • Bisa request dan nentuin konten akhir tutorial ini.
  • Jadi paling pertama dapetin product nya saat release.
  • Dapetin special price 70% OFF, hanya untuk waiting list.
Join waiting list
⭐️⭐️⭐️⭐️⭐️ 4.7 (2,700+ downloads)

Beli sekali, akses seumur hidup

Dapetin akses ke lebih dari 27 bab dan 162 bagian tutorial, lengkap dengan tips & tricks Figma

Individual License

Bayar sekali, akses seumur hidup
Rp
1,699,000
Rp 1,699,000
  • 1 pengguna
  • Modul 01 Styleguide (7 Bab)
  • Modul 02 Component Lib (10 Bab)
  • Modul 03 Menerapkan DS (3 Bab)
  • Modul 04 Documentation (9 Bab)
  • HaloFigma Design System
  • Kostumasi Design System
Beli akses
Diskon pre-order telah habis

Team License

Bayar sekali, akses seumur hidup
Rp
4,999,000
Rp 4,999,000
  • Unlimited pengguna
  • Modul 01 Styleguide (7 Bab)
  • Modul 02 Component Lib (10 Bab)
  • Modul 03 Menerapkan DS (3 Bab)
  • Modul 04 Documentation (9 Bab)
  • HaloFigma Design System
  • Kostumasi Design System
  • Bonus Design System Resources
  • Bonus Tambahan Component
  • Bonus Tambahan Quiz DS
Beli akses
Diskon pre-order telah habis

Diskon Pre-Order

Terimakasih 3,500+ orang waitinglist yang sudah berpartisipasi. Diskon Pre-order sekarang sudah ditutup, kamu bisa melanjutkan checkout dengan tombol Beli akses di atas.
💎 Super fans
Individual License
all gone  -   70% OFF
Beli Rp499,000SOLD OUT
Team License
all gone  -   70% OFF
Beli Rp1,499,000SOLD OUT
⭐️ Early fans
Individual License
all gone  -   60% OFF
Beli Rp699,000SOLD OUT
Team License
all gone  -   60% OFF
Beli Rp1,999,000SOLD OUT
✊🏻 Early supporter
Individual License
all gone-   50% OFF
Beli Rp799,000SOLD OUT
Team License
all gone -   50% OFF
Beli Rp2,399,000SOLD OUT
⭐️⭐️⭐️⭐️⭐️ 4.7 (3,400+ downloads)
mobile payment halofigma
logo halodesigners - belajar ui ux design indonesia
Follow @HaloDesigners untuk UX Mentorship, UI tips, UI Kit freebies, dan ngikutin update tutorial ini.