Creating Style Guide with Figma

Published in

Mustofin

3 min readJul 6, 2020

Artikel ini merupakan dokumentasi dari workshop Divisi Design DOT Indonesia 6 Juli 2020 dengan pemateri mas Satria Ridho

Poin Pembahasan

I.   Tujuan Style Guide
II.  Pembuatan Style Guide
     A. Color Collection
     B. Typography
     C. Assets
III. Implementasi

I. Tujuan Style Guide

Memudahkan dalam kolaborasi dalam tim
Memudahkan dalam proses maintenance design

II. Pembuatan Style Guide

Preparation

Buat file figma baru dan pisahkan page style guide dengan page design implementasi (user interface).

A. Color Collection

1.Tentukan warna primary & secondary, dengan cara:
a. Memakai teori warna (contoh: Warm & Cool Colors)
b. Menggunakan feel warna
c. Mengikuti brand color (jika style guide dibuat dari brand yang sudah ada)

2. Tentukan Turunan Warna
Dari 2 warna yang telah ditentukan, ditambah dengan warna gray, buat warna turunan sehingga masing-masing warna memiliki 3 hingga 5 jenis warna.
Koleksi warna ini akan sangat berguna dalam kombinasi tipografi. Untuk mempermudah bisa menggunakan tools:
a. hihayk.github.io
https://hihayk.github.io/scale/#0/4/50/88/-51/16/78/14/342EAD/52/46/173/black
b. plugin di figma Color Scheme
https://www.figma.com/community/plugin/815841134222084922/Color-Scheme

NB:
- Jangan menggunakan opacity (transparansi) sebagai kombinasi warna, karena akan berpengaruh saat diimplementasi dalam source code.
- Cek color contrast untuk readibility (mudah terbaca). Bisa menggunakan tools: https://webaim.org/resources/contrastchecker/

3. Buat Style Color dari warna yang sudah siap
Buat penamaan yang mudah dipahami dan disepakati oleh tim.
contoh: Primary Color — 100 , Primary Color — 80

B. Typography

Tentukan Font yg dipakai
contoh: inter, poppin, roboto
Tentukan pembagian Scaling (perkalian 4)
tools: https://type-scale.com
Tentukan kerning / letter spacing (jarak horizontal)
contoh: 0.8 px
Tentukan Line Hight (jarak vertical)
contoh: 172% atau 180% (rekomendasi agar kelihatan clean)
Buat Style Tipografi
contoh naming: Heading 1, Heading 2, Paragraph — Regular

C. Assets

Assets ini berisi semua komponen pendukung dalam sebuah desain, meliputi: icon, elemen, ilustrasi, foto, logo, dsb.

1. Download atau buat Asset
Sebagai referensi, berikut beberapa sumber asset:

a. Icon:
   https://boxicons.com
   https://www.iconfinder.com
   https://material.io/resources/icons/?style=baselineb. Ilustrasi: 
   https://www.freepik.com
   https://undraw.co
   https://www.humaaans.com   plugin figma
   https://www.figma.com/community/plugin/all?q=illustration&sort=installsc. Foto:
   https://unsplash.comd. Warna
   https://color.adobe.com/create
   https://colorhunt.co
   https://vanschneider.com/colors

2. Tempatkan pada koleksi Asset, ada 2 cara koleksi aset:
a. Artboard (frame)
b. Terpisah dari artboard, di buat per-item

3. Rename (Penamaan)
a. Artboard (frame)
— Rename Artboard sebagai grup kategori
— Komponen di dalam langsung namanya
contoh: frame = Asset / Icon
Komponen = Calendar

b. Terpisah dari artboard
Rename tiap komponen disertai kategori di awalnya
contoh: Komponen = Asset / Icon / Calendar

4. Create Component
Klik kanan pada asset -> create component

5. Cek hasil komponen di tab Assets (sebelahnya layers)