MODUL PELATIHAN UI DESIGN MENGGUNAKAN FIGMA

WEBINAR PELATIHAN UI DESAIN

Disusun dalam rangka memenuhi

Tugas Mata Kuliah Program Pendidikan dan Pelatihan yang diampu oleh:

Dr. Dedi Kuswandi, M.Pd.

Dr. Citra Kurniawan, S.T., M.M.

Disusun oleh:

Kemas Muhamad Aldo Al Halim (200121601282)

Aditya Nurillathif Makarim (200121601271)

Fadiza Nova Ebzy (200121401292)

Fazriano Radiyan Heruzy (200121601287)

Maulidia Wiyan Sumita (200121601276)

UNIVERSITAS NEGERI MALANG

FAKULTAS ILMU PENDIDIKAN

DEPARTEMEN TEKNOLOGI PENDIDIKAN

2022

UI Design

Puji syukur kami panjatkan atas kehadirat Tuhan Yang Maha Kuasa yang telah melimpahkan berkah dan rahmat-Nya, sehingga kami bisa menyelesaikan Proposal Laporan Perencanaan Program Pendidikan dan Pelatihan “Webinar Pelatihan UI Desain”. Proposal ini dibuat sebagai bentuk rancangan program pelatihan untuk membantu menentukan tampilan sebuah web atau aplikasi. oleh karena itu kami ucapkan terima kasih kepada :

1. Bapak Dr. Dedi Kuswandi, M.Pd Selaku Dosen pengampu Mata Kuliah Program Pendidikan dan Pelatihan.

2. Bapak Dr. Citra Kurniawan, S.T.,M.M. Selaku Dosen pengampu Mata Kuliah Program Pendidikan dan Pelatihan.

3. Rekan-rekan tim yang telah membantu terselesaikannya Proposal Laporan Perencanaan Program Pendidikan dan Pelatihan “Workshop UI Design”.

Kami menyadari bahwa di dalam pembuatan modul masih banyak kekurangan, untuk itu penyusun sangat membuka saran dan kritik yang sifatnya membangun. Harapan kami tidak lain adalah bahwa modul ini dapat memberikan manfaat bagi kita semua.

Malang, 18 Maret 2022

Ketua Kelompok

Kemas Muhamad Aldo Al Halim

NIM. 200121601282

UI Design

UI Design

PETUNJUK PENGGUNAAN MODUL

Dalam modul ini semua materi sudah dijelaskan secara rinci dan merupakan sumber belajar. Berikut adalah langkah-langkah untuk mempelajari modul :

1. Bacalah dan pahami materi yang ada pada setiap kegiatan belajar. Bila ada materi yang belum jelas, siswa dapat bertanya pada guru.

2. Kerjakan setiap tugas diskusi terhadap materi-materi yang dibahas dalam setiap kegiatan belajar.

3. Jika belum menguasai level materi yang diharapkan, ulangi lagi pada kegiatan belajar sebelumnya atau bertanyalah kepada guru.

Dalam setiap kegiatan belajar guru berperan untuk:

1. Membantu siswa dalam merencanakan proses belajar

2. Membimbing siswa dalam memahami konsep, analisa, dan menjawab pertanyaan siswa mengenai proses belajar.

3. Mengorganisasikan kegiatan belajar kelompok.

A. Petunjuk Bagi Peserta Didik

B. Petunjuk Bagi Guru

UI Design

PENDAHULUAN

A. Latar Belakang

Rancangan antarmuka pengguna atau yang biasa disebut User Interface (UI) merupakan komponen yang paling utama karena bertugas menghubungkan pengguna dengan informasi yang dibutuhkan dari sistem itu sendiri. Pada program pendidikan dan pelatihanUI Design, pelatihandilaksanakandenganmenggunakanprogramFigma. Karena pelatihan desain user interface ini akan menggunakan Figma sebagai software desainnya, maka peserta pelatihan akan diajarkan mengenai software Figma secara menyeluruh. Modul ini akan menyediakan media pembelajaran tertulis mengenai segala hal yang akan diajarkan dalam pelatihan sekaligus memberi pengetahuan dasar secara menyeluruh.

B. Deskripsi Singkat

Figma adalah aplikasi/software berbasis web yang digunakan sebagai alat prototyping dalam sebuah proyek digital, seperti mendesain UI dan UX dalam sebuah aplikasi, web, serta berbagai komponen lain yang dapat digabungkan ke dalam proyek lain. Program Figma menggunakanbasis web atau cloud, sehinggatidak membebankanpenggunanyadan memudahkandalam berkolaborasidalamproyek sertabekerja dalamtimsekaligus di mana saja dan kapan saja.

C. Tujuan Pembelajaran

Tujuan membuat modul ini adalah untuk menyediakan media pembelajaran tertulis untuk pelatihan Desain UI yang bertujuan untuk mengikuti perkembangan tren teknologi dan desain yang terus berubah. Selain itu, UI Desain juga mengasah kreativitas dan kemampuan analisis untuk menyelesaikan masalah.

D. Sasaran Pengguna

Modul ini dapat diakses oleh khalayak umum, tetapi diutamakan untuk mahasiswa Teknologi Pendidikan dan pengembang website pembelajaran atau aplikasi pembelajaran, khususnya yang mengikuti pelatihan UI Design.

MODUL 1

(Perkenalan Desain User Interface)

A. Deskripsi Singkat

User interface (biasa disingkat UI) merupakan media yang menjembatani kemampuan-kemampuan fungsionalitas sistem kepada pengguna. Selain itu, desain antarmuka merupakan kendaraan yang akan membawa pengguna pada fungsi sistem yang ingin dilakukan olehnya. Hal-hal tersebut yang akan memberikan dampak langsung pada pengembang sistem.

B. Tujuan Pembelajaran

1. Peserta pelatihan mampu menjelaskan definisi UI

2. Peserta pelatihan mampu menjelaskan tahap-tahap UI

3. Peserta pelatihan mampu menjelaskan pentingnya sebuah UI

4. Peserta pelatihan mampu menjelaskan perbedaan UI dan UX

C. Materi

1. Pengertian User Interface

User interface (biasa disingkat UI) merupakan media yang menjembatani kemampuan-kemampuan fungsionalitas sistem kepada pengguna. Selain itu, desain antarmuka merupakan kendaraan yang akan membawa pengguna pada fungsi sistem yang ingin dilakukan. Hal-hal tersebut yang akan memberikan dampak langsung pada pengembang sistem, apalagi jika terkait dengan customer dan keuntungan organisasi.

Rancangan antarmuka pengguna atau yang biasa disebut User Interface (UI) merupakan komponen yang paling utama karena bertugas menghubungkan pengguna dengan informasi yang dibutuhkan dari sistem itu sendiri. Masing-masing sistem yang dikembangkan oleh developer tentunya mempunyai kekhususan tersendiri dalam hal desain antarmuka yang juga disesuaikan dengan kebutuhan pengguna dan mengorganisasikan unsur-unsur rupa untuk mewujudkan nilai Estetika. Estetika adalah bagian integral dari pengalaman pengguna antarmuka, serta bertugas untuk memandu pengguna menuju interaksi utama di UI dan memungkinkan mereka untuk mencapai tujuan mereka(Wood, 2014).

Dunia desain antarmuka aplikasi tentu tidak lepas dari masalah User Interface (UI) dan User Experience (UX) karena kedua komponen tersebut merupakan kunci dari keberhasilan suatu aplikasi. UI dan UX merupakan hal yang berbeda namun memiliki keterkaitan satu sama lain dan memiliki kepentingan dalam menciptakan pengalaman pengguna “User Experience” bukan menjadi sesuatu yang memiliki

UI Design

fungsi tertentu, dan menjadi solusi dalam memecahkan masalah user, serta menjadi pengalaman yang menyenangkan untuk user. Untuk mengetahui apakah aplikasi sudah memenuhi kebutuhan pengguna atau belum maka dibutuhkan suatu testing terhadap aplikasi tersebut.

2. UI dan UX

Muhyidin, dkk (2020) mengartikan UI dan UX atau User Interface dan User experience sebagai sebuah tampilan visual dalam sebuah aplikasi atau alat pemasaran digitaldalam bentuk website yang dapat meningkatkan brand yang dimiliki oleh bisnis atau perusahaan.

UI atau User Interface adalah ilmu tentang tata letak grafis suatu web atau aplikasi. Cakupan UI adalah tombol yang akan diklik oleh pengguna, teks, gambar, text entry fields, dan semua item yang berinteraksi dengan pengguna. Termasuk layout, animasi, transisi, dan semua interaksi kecil. UI mendesain semua elemen visual, bagaimana pengguna berinteraksi dengan halaman web dan apa yang ditampilkan di halaman web. Elemen visual yang ditangani oleh seorang desainer UI adalah skema warna, menentukan bentuk tombol, serta menentukan jenis font yang digunakan untuk teks. Desainer UI harus bisa membuat tampilan bagus yang akan meningkatkan kesetiaan pengguna.

DefinisiUXatau user experience menurut BorrysHasianadabermacam-macam. Berdasarkan apa yang dikerjakan, desainer UX adalah orang yang membuat produk yang bermanfaat dan memvisualisasi user flow menjadi desain produk yang teruji dan indah. Desainer UX akan bekerja sama dengan tim-tim lain untuk mencari titik temu antara kebutuhan pengguna, tujuan bisnis dan kemajuan teknologi. Titik temu tersebut kemudian dijadikan sebuah produk yang bermakna, berguna, dan menyenangkan. Seperti namanya, desain yang dibuat oleh desainer UX akan menentukan mudah atau sulitnya user experience atau interaksi dengan web. Membuat wireframe atau mendesain mockup adalah salah satu kemampuan dasar yang harus dimiliki oleh seorang desainer UX.

3. Tahap-tahap UI Desain

a. Tahap Pemahaman

Memahamikonteks dalam mengoperasikansesuatu untuk memahami bisnis dan memahami target pasar. DiTahap ini, kita mendapatkan informasi seperti apa masalah yang mereka coba selesaikan, Selain itu bahwa kita ingin segera mengetahui solusinya, tetapi ingin memahami tujuan dasar perusahaan, memahami bagaimana proyek ini akan selaras dengan merek mereka dan apa implikasi dari proyek khusus ini.

b. Tahap Penelitian

Dalam tahap ini, kita memahami masalah apa yang dihadapi pengguna atau mungkin fitur baru / layanan baru yang mereka cari dari perusahaan tertentu.

UI Design

Beberapa cara pelaksanaannya yaitu, mengirim email (baik) bisa menjadi cara yang baik untuk mendapatkan skala terperinci dengan cepat dan efisien, atau wawancara dengan pengguna (lebih baik), akanmendapat data yang berharga atau sangat diperlukan.

c. Tahap Analisis

Di sinilah kita akan menggunakan aset seperti User Persona atau User Flow Sehingga kita bisa mengelompokkan semua yang telah dipelajari sejauh ini dengan cara yang mudah dan satu-satunya sumber kebenaran, yang juga dapat dibagikan dengan anggota kunci lainnya yang tidak terlibat dalam tahap sebelumnya agar kita dapat sejalan dengan mereka dengan cara yang sangat cepat dan efisien.

d. Tahap Desain

Kita akan membuat gambar rangka, ide awal huruf besar semua, dan kemudian akan beralih ke desain UI. Selanjutnya kita menghidupkan gambar rangka itu dengantipografiwarna, tata letak, dan semua aset dan elemen yang kita butuhkan untuk benar-benar menghidupkan produk dengan cara yang efisien.

e. Tahap Peluncuran

Meluncurkan produk ke pasar lalu melihat apakah yang produk yang dibuat benar-benar beresonansi dan memecahkan masalah itu dengan pengguna.

f. Tahap Analisis Akhir

Memastikan proyek atau fitur baru yang dibuat serta diluncurkan benarbenar memecahkan masalah dan mengatasi masalah yang dihadapi pengguna. Melakukanpembaruantambahansertamembuat peningkatanproduk ataulayanan secara bertahap untuk membawanya ke tingkat berikutnya secara terus menerus.

4. Wireframe

Wireframe (Desain Kerangka) menjadi aset yang hebat yang dapat kita manfaatkan dalamdesainUI/UX. Hal ini memungkinkan kita untuk membuat struktur UI/UX yang akan kita jalankan nantinya, dan akan mencapai tujuan permasalahan user. Wireframe hadir dalam berbagai macam bentuk, mulai dari menggunakan pena dankertas, sampai bentuk digital yang akhir-akhir ini sedang berkembang. Ada 2 jenis Wireframe, yaitu wireframe dengan ketelitian rendah, di mna kualitas gambar lebih kasar, tidak mendetail dan fokus terhadap substansi awal serta struktur layar, dan wireframe dengan ketelitian tinggi, yang memiliki gambaran yang lebih jelas tentang seperti apa produk akhir nantinya, dan segala macam bentuk berbeda yang akan memungkinkan kita untuk memiliki gambaran produk akhir yang lebih jelas dan lebih rinci.

UI Design

kapan harus menggunakan salahsatunya? Tentunya ini tergantung pada kebutuhan, misalnya wireframe dengan ketelitian rendah ngebantu kita dalam membuat sketsa ide dan jenis kemana arah dari projek ini dijalankan seperti membuat situs web, kemudian wireframe dengan ketelitian tinggi digunakan setelah alur terbentuk, benar-benar akan menunjukkan semua detail yang akan dimiliki layar. Jadi pada dasarnya ketika kita memiliki kesetiaan yang tinggi untuk desainer UI wireframe akan menjadi tahap terakhir. Dan itu akan membuat keseluruhan gambar rangka terlihat bagus, profesional, dan sesuai dengan merek.

Menguji solusi UI/UX adalah bagian penting dari UI/UX. Validasi ini untuk mengetahui apa yang benar-benar digunakan dan hal apa yang diperlukan atau tidak dibutuhkan untuk UI/UX tersebut. Pengujian kegunaan desain dengan pengujian web, dengan melihat user menggunakan hal tersebut mudah atau tidak. Jika user mudah menggunakannya maka ini menjadi lampu hijau untuk segera dipublikasikan. Namun apabila yang terjadi, user mengalami kendala, maka kita sebagai desainer bisa memperbaiki dengan cara mevalidasi prototyope dan melakukan pengujian kegunaan proyek.

D. Rangkuman

Rancangan antarmuka pengguna atau yang biasa disebut User Interface (UI) merupakan komponen yang paling utama karena bertugas menghubungkan pengguna dengan informasi yang dibutuhkan dari sistem itu sendiri. Dunia desain antarmuka aplikasi tentutidak lepas dari masalah User Interface (UI) dan User Experience (UX) karena kedua komponen tersebut merupakan kunci dari keberhasilan suatu aplikasi. Adapun tahapan dalam mendesain UI yaitu :

a. Tahap Pemahaman

b. Tahap Penelitian

c. Tahap Analisis

d. Tahap Desain

e. Tahap Peluncuran

f. Tahap Analisis Akhir

Berikutnya, wireframe adalah cara kita menerjemahkan desain UI ke realisasi UX. Wireframe memungkinkan kita untuk membuat struktur UI/UX yang akan kita jalankan nantinya, dan akan mencapai tujuan permasalahan user. Wireframe hadir dalam berbagai macam bentuk, mulai dari menggunakan pena dan kertas, sampai bentuk digital yang akhir-akhir ini sedang berkembang. Ada 2 jenis Wireframe, yaitu wireframe dengan ketelitian rendah dan wireframe dengan ketelitian tinggi.

E. Evaluasi

1. Jelaskan apa itu User Interface (UI) menurut pemahamanmu !

UI Design

2. Jelaskan hubungan UI dengan UX (User Experience) !

3. Jelaskan perbedaan UI dengan UX !

4. Sebutkan tahapan-tahapan dalam mendesain UI !

5. Jelaskan peran wireframe dalam UI/UX !

F. Umpan Balik dan Tindak Lanjut

Modul ini dikembangkan sebagai materi pembelajaran untuk membantu peserta didik pelatihanmendesainUI. Olehkarena itu, bandingkanlah hasil jawaban Andadengan materi dan penjelasan pemateri. Hitunglah jumlah jawaban Anda yang benar. Kemudian gunakanlahrumusdibawahiniuntuk mengetahuitingkat penguasaanAndaterhadap materi Perkenalan Desain User Interface

Rumus :

Tingkat penguasaan = Jumlah benar x 2

Arti tingkat penguasaann yang Anda capai

9 - 10 = baik sekali

8 - 7 = baik

6 - 5 = sedang

< 5 = kurang

UI Design

MODUL 2

(Menggunakan FIGMA untuk Mendesain UI)

A. Deskripsi Singkat

Figma merupakan aplikasi desain UI dan UX berbasis browser, dengan desain yang sangat baik, prototyping, dan alat pembuatan kode. Saat ini (bisa dibilang) alat desain antarmuka terkemuka di industri, dengan fitur-fitur canggih yang mendukung tim yang bekerjapada setiap faseprosesdesain. Figma menggunakan basis web atau cloud, sehingga tidak membebankan penggunanya dan memudahkan dalam berkolaborasi dalam proyek serta bekerja dalam tim sekaligus di mana saja dan kapan saja.

B. Tujuan Pembelajaran

1. Peserta pelatihan mampu menggunakan fitur-fitur yang ada pada software Figma sesuai dengan kebutuhannya

2. Peserta pelatihan dapat mendesain User Interface menggunakan software Figma

3. Peserta pelatihan mampu membuat desain User Interface sederhana yang kemudian bisa dikembangkan untuk pembelajaran

C. Materi

1. Pengertian Figma adalah aplikasi/software berbasis web yang digunakan sebagai alat prototyping dalam sebuah proyek digital, seperti mendesain UI dan UX dalam sebuah aplikasi, web, serta berbagai komponen lain yang dapat digabungkan ke dalam proyek lain. Software ini bisa dijalankan di browser (web based) atau aplikasi desktop di OS Windows dan MAC OS. Software ini mirip dengan Sketch atau Adobe XD dalam hal fungsionalitas dan fiturnya, namun memiliki perbedaan besar yang membuat Figma lebih baik yaitu fitur untuk kolaborasi tim. Figma memberi Anda semua alat yang

Anda butuhkan untuk tahap desain proyek, termasuk alat vektor yang mampu ilustrasi sepenuhnya, serta kemampuan prototyping, dan pembuatan kode untuk hand-off.

Umumnya Figma banyak digunakan oleh seseorang yang bekerja dibidang

UI/UX, web design dan bidang lainnya yang sejenis. Selain mempunyai kelengkapan fitur layaknya Adobe XD, Figma memiliki keunggulan yaitu untuk pekerjaan yang sama dapat dikerjakan oleh lebih dari satu orang secara bersama-sama walaupun ditempat yang berbeda. Figma menggunakan basis web atau cloud, sehingga tidak membebankan penggunanya dan memudahkan dalam berkolaborasi dalam proyek serta bekerja dalam tim sekaligus di mana saja dan kapan saja.

UI Design

2. Kelebihan Figma sebagai Software Mendesain UI

a. Figma memungkinkan anda untuk berkolaborasi bersama tim atau pihak lain dalam proyek yang sama.

b. Figma memungkinkan Anda untuk memindahkan banyak gambar sekaligus menempatkannya tepat di tempat yang Anda inginkandengan mudah.

c. Ketika Anda memindahkan objek di sekitar kanvas dalam Figma Anda akan melihat tinggi dan lebarnya tercermin pada penggaris.

d. Salin kode SVG langsung dari objek dalam Figma, dan sebaliknya, Anda dapat menyalin kode SVG dari editor kode dan menempelkannya sebagai grafik ke kanvas Figma.

e. Figma memungkinkan Anda membangun perpustakaan komponen yang dapat digunakan kembali yang dapat diakses oleh seluruh tim.

f. Untuk membuat prototipe, Anda dapat membuat koneksi dan hotspot pada desain Anda sehingga Anda dapat mensimulasikan bagaimana pengguna akan mengalir melalui antarmuka itu. Untuk fase pengkodean Figma dapat menghasilkan kode SVG, CSS, dan kode iOS dan Android.

3. Unsur dalam Desain Dalam menciptakan bentuk, diperlukan unsur-unsur rupa, pemaduan dan penyusunan agar diperoleh bentuk yang menarik, memuaskan atau membangkitkan pengalaman visual tertentu agar tercapainya nilai estetis. Unsur-unsur rupa tersebut antara lain :

a. Titik / Point : Titik adalah salah satu unsur visual yang wujudnya relatif kecil, dimana dimensi memanjang dan melebarnya di anggap tidak berarti. Titik cenderung di tampilkan dalam bentuk kelompok, dengan variasi jumlah, susanan, dan kepadatan tertentu.

b. Garis / Line : Garis dianggap sebagai unsur visual yang banyak berpengaruh terhadap pembentukan suatu objek sehingga garis, selain di kenal sebagai goresan atau coretan, juga menjadi batas limit suatu bidang atau warna. Garis dapat di tampilkan dalam bentuk lurus, lengkung, gelombang, zigzag dan lainnya.

c. Bidang / Field : Bidang merupakan unsur visual yang berdimensi panjang dan lebar. Di tinjau dari bentuknya, bidang bisa di kelompokkan menjadi dua, yaitu bidang geometri/beraturan dan bidang non geometri/tidak beraturan. Bidang geometri adalah bidang yang relatif mudah di ukur keluasannya, sedangkan bidang non geometri merupakan bidang yang relatif sukar di ukur keluasannya.

d. Ruang / Space : Ruang dapat di hadirkan dengan adanya bidang. Pembagian bidang atau jarakantarobjekberunsurtitik, garis, bidangdanwarna. Ruang lebih mengarah pada perwujudan tiga dimensi sehingga ruang dapat dibagi dua, yaitu ruang nyata dan semu. Keberadaan ruang sebagai salah satu unsur visual sebenarnya tidak dapat di raba tetapi dapat di mengerti.

UI Design

e. Ukuran / Size : Ukuran adalah unsur lain dalam desain grafis yang mendefinisikan besar kecilnya suatu objek. Unsur ini digunakan untuk memperlihatkan objek manakah yang kita mau tonjolkan karena dengan menggunakan unsur ini seorang desainer grafis akan dapat menciptakan kontras dan penekanan (emphasis) pada objek desain sehingga orang akan tahu skala prioritas objek yang akan dilihat terlebih dahulu dibandingkan yang lainnya, misalnya saja untuk ukuran suatu judul akan lebih besar dari skala objek yang lainnya.

f. Warna / Color : Warna sebagai unsur visual yang berkaitan dengan bahan yang mendukung keberadaannya ditentukan oleh jenis pigmennya. Kesan yang di terima oleh mata lebih ditentukan oleh cahaya. Permasalahn mendasar dari warna di antaranya adalah Hue (spektrum warna), Saturation (nilai kepekatan) danLightness (nilaicahaya darigelap ke terang). Ketiga unsur tersebut memiliki niai 0 hingga 100, hal yang paling menentukan adalah lightness.

g. Tekstur/ Texture : Tekstur adalah nilai raba dari suatu permukaan. Secara fisik tekstur di bagi menjadi tekstur kasar dan halus, dengan kesan pantul mengkilat dankusam. Ditinjaudariefektampilannya, teksturdigolongkan menjaditekstur nyatadantekstursemu. Disebut tekstur nyatabilaadakesamaanantarahasilraba dan pengelihatan. Sementara itu pada tekstur semu terdapat perbedaan antar hasil pengelihatan dan peraba.

h. Huruf / Typography : Dalam dunia desain grafis, tipografi di definisikan sebagai suatu proses seni untuk menyusun bahan publikasi menggunakan huruf cetak. Olehkarena itu, menyusun meliputi merancang bentuk hurufcetak hingga merangkainya dalam sebuah komposisi yang tepat untuk memperoleh suatu efek tampilan yang dikehendaki.

UI Design

4. Menggunakan Figma untuk Mendesain UI

Dalam tutorial mendesain UI dengan Figma, kita akan membuat desain aplikasi sederhana seperti gambar berikut.

UI Design

Untuk memulai, Kamu cukup membuka Figma.com dan meregestrasi akun

Berikut adalah tampilan kanvas kosong dari Figma yang akan kita gunakan untuk mendesain UI kita.

UI Design

Kita mulai dengan membuat Frame terlebih dahulu. Klik icon frame di pojok kiri atas

Lalu pilih iPhone 8 (375 x 667) untuk frame nya

UI Design

Setelah itu, masukkan tulisan dengan memencet icon Teks di sebelah kiri atas. Lalu klik di sembarang tempat pada frame nya.

Buat tulisan “Discover” sebagai title. Untuk informasi nama font, ukuran, dan warna ada di sebelah kanan.

Setelah itu tempatkan tulisan “based on your streaming activity” sebagai description.

UI Design

Setelah itu kita buat kotak dengan menekan icon kotak diatas

Lalu tempatkan di frame

UI Design

Setelah itu kita ubah sudut kotak menjadi melengkung, dengan mengubah borderradius nya menjadi 8

tampilan nya menjadi seperti ini

Setelah itu kita masukan gambar dengan cara :

1. Klik kanan pada gambar

2. Lalu pilih copy image

3. Setelah itu paste pada frame dengan menekan command+V (pada Mac) atau ctrl + V (pada windows)

Sehingga

UI Design

Agar gambar bisa masuk ke dalam kotak, kita masking kotakan nya dengan cara:

1. Klik kanan kotakan nya

2. Lalu pilih “Use as Mask”

Sehingga tampilan nya menjadi seperti ini

Setelah itu posisikan gambar sesuai dengan preferensi

Setelah itu kita tempatkan teks “Health is the best Investment” sebagai judul di card tersebut.

UI Design

Setelah itu kita masukan lingkaran dengan menekan icon pada pojok kiri atas seperti berikut

UI Design

Lalu tempatkan di atas card. Ingat, saat menggambar lingkaran nya, selalu tekan tombol Shift agar lingkaran nya bulat sempurna. Untuk informasi lebar dan tinggi lingkaran, warna lingkaran dan lain-lain ada di sebelah kanan.

Setelah itu kita masukan segitiga, dengan menekan tombol seperti berikut

UI Design

Lalu tempatkan di atas lingkaran

Agar segitiga bisa menjadi tombol play, lakukan langkah berikut:

● Perkecil segitiga nya

● Beri warna putih dengan mengubah Fill nya

● Putar segitiga 150 derajat ke arah kanan

● Ubah sudut segitiga agar tumpul dengan mengganti corner radius nya

Semua settingan bisa kamu lihat di sebelah kanan

UI Design

Setelah itu kita buat lingkaran untuk tempat avatar

Copy gambar yang akan digunakan sebagai avatar, kemudian Paste

UI Design

Gunakan teknik “Use as mask” untuk memasukkan gambar avatar ke dalam lingkaran

Berikutnya kita akan merapikan Layer yang sudah ada di dalam platform dengan cara melihat Layers kita

UI Design

Untuk avatar, jadikan satu folder, agar layer diatas nya tidak ikut masuk ke dalam lingkaran. Select Lingkaran dan Foto nya seperti dibawah ini

Klik kanan lalu pilih Group Selection

UI Design

Sehingga akan tampak seperti dibawah ini

UI Design

Mari kita lanjutkan desainnya. Kini tambahkan teks “by Samantha” di samping avatar.

Setelah itu tambahkan garis, sebagai pemisah Judul Card dengan Avatar. Cara nya klik menu seperti dibawah ini

UI Design

Setelah itu gambar garis di frame. Pencet shift agar garis nya lurus. Pasang setting Tebal garis 0.5 agar tampak tipis.

Tambahkan teks “Popular” di bawah card, kemudian tambahkan kotak di bawahnya

UI Design

Setelah itu tambahkan

s “How music can boost my mood” di samping card.

tek

Setelah itu tambahkan teks “Angela Smith” di bawah nya.

UI Design

Setelah itu cari foto untuk mengisi kotaknya

Ulangi langkah diatas untuk membuat konten di bawahnya, sehingga tampilan menjadi seperti ini.

UI Design

Kemudian tambahkan garis sebagai pemisah.

Selanjutnya kita akan mendesain menu di sebelah kanan atas dengan membuat 3 garis (Line)

UI Design

Kemudian, gambar lingkaran merah untuk tanda notifikasi. Sehingga hasilnya akan menjadi seperti ini.

Berikut adalah contoh cara membuat desain UI sederhana menggunakan Figma

UI Design

D. Rangkuman

Figma adalah aplikasi/software berbasis web yang digunakan sebagai alat prototyping dalam sebuah proyek digital, seperti mendesain UI dan UX dalam sebuah aplikasi, web, serta berbagaikomponen lain yang dapat digabungkan ke dalamproyek lain. Figma memiliki keunggulan yaitu untuk pekerjaan yang sama dapat dikerjakan oleh lebih dari satu orang secara bersama-sama walaupun ditempat yang berbeda. Adapun unsurunsur dalam desain yaitu titik, garis, bidang, ruang, ukuran, warna, tekstur, dan huruf.

E. Evaluasi

1. Jelaskan software Figma !

2. Jelaskan keunggulan dari software Figma !

3. Sebutkan unsur-unsur dalam desain !

4. Jelaskan cara menambahkan bentuk dan gambar pada software Figma !

5. Jelaskan cara membuat play button sederhana pada software Figma !

F. Umpan Balik dan Tindak Lanjut

Modul ini dikembangkan sebagai materi pembelajaran untuk membantu peserta didik pelatihanmendesainUI. Olehkarena itu, bandingkanlah hasil jawaban Andadengan materi dan penjelasan pemateri. Hitunglah jumlah jawaban Anda yang benar. Kemudian gunakanlahrumusdibawahiniuntuk mengetahuitingkat penguasaanAndaterhadap materi Menggunakan FIGMA untuk Mendesain UI.

Rumus :

Tingkat penguasaan = Jumlah benar x 2

Arti tingkat penguasaann yang Anda capai

9 - 10 = baik sekali

8 - 7 = baik

6 - 5 = sedang

< 5 = kurang

UI Design

DAFTAR RUJUKAN

Muhyidin, M. A., Sulhan, M. A., & Sevtiana, A. (2020). Perancangan Ui/Ux Aplikasi My Cic Layanan Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma. Jurnal Digit, 10(2), 208-219.

Wood, D. (2014). Basics Interactive Design: Interface Design: An introduction to visual communication in UI design. Bloomsbury Publishing.