Pelajaran 2 dari 7 · 10 mnt
Siapkan studiomu
Tujuan:Siapkan tiga tools-mu, pahami tugas masing-masing, dan kenali seluk-beluk Figma.
STUDIOMU, DARI NOL
uxuiopen.comTiga tools, tiga tugas. Tool chat AI membantumu berpikir, Claude Design membantumu menjelajahi opsi dengan cepat, dan Figma adalah tempat kamu menggarap desain akhir dengan tangan. Jurnalmu yang menyatukan semuanya. Tonton film dua menitnya, lalu siapkan punyamu.
- 1 · Berpikir
ChatGPT
Rencana, riset, ide
- 2 · Menjelajah
Claude Design
Layout, opsi, deck
- 3 · Menyempurnakan
Figma
Garap dengan tangan
- 4 · Mencatat
Jurnal
Apa yang kamu minta dan putuskan
Pakai tool chat AI untuk…
- merencanakan proyek dan memecahnya jadi langkah-langkah
- meriset audiens atau topik
- brainstorming nama, judul, dan ide
- minta masukan atas cara berpikirmu
Pakai Figma untuk…
- menata layar dan poster dengan presisi
- mengatur huruf, warna, dan spacing dengan tangan
- membangun komponen yang bisa dipakai ulang
- membagikan desain dan prototipe ke orang lain
Figma
Kanvasmu. Tempat kamu menyempurnakan, merapikan, dan menyerahkan karya.
Langkah
- 1Buat akun gratis.
- 2Ikut kohort? Kami memverifikasimu untuk paket Education, jadi daftar dengan email yang kamu pakai saat mendaftar.
- 3Buat file desain baru bernama "Studio".
ChatGPT
Partner berpikirmu. Rencana riset, ide, kritik, dan tulisan.
Langkah
- 1Masuk.
- 2Buat project bernama "Design studio" supaya obrolanmu tetap terkumpul.
Claude dan Claude Design
Penjelajahmu. Layout, mockup, dan deck dengan cepat, dan bisa mengikuti design system.
Langkah
- 1Masuk ke Claude.
- 2Buat project bernama "Design studio".
- 3Claude Design butuh paket berbayar dan masih research preview. Opsional di unit ini.
Kenali seluk-beluk Figma
Figma tampak ramai saat pertama kali dibuka, tapi setiap file punya lima area yang sama. Pelajari sekali, dan setiap tutorial jadi masuk akal. Klik-klik jendela Figma yang disederhanakan ini dan temukan kelimanya.
Klik tiap bagian jendela Figma untuk menemukan kelimanya.
0 dari 5 ditemukanSemua yang ada di Figma tersusun dalam pohon sederhana. File berisi page, page berisi frame, dan frame berisi layer. Begitu kamu melihat pohonnya, kamu selalu tahu letak segala sesuatu.
- 📁Unit 1 (file)
- 📄Playground (page)
- #Poster (frame)
- ▢Header (grup)
- TJudul (teks)
- ◯Lingkaran (bentuk)
- 🖼Foto (gambar)
- 📄Jurnal (page)
- File
- Satu proyek. Kamu bisa membagikannya ke orang lain lewat tautan.
- Page
- Tab di dalam file. Pakai page untuk memisahkan pekerjaan: Playground, Journal, Prompt library.
- Frame
- Artboard dengan ukuran tertentu: layar ponsel, poster, slide. Desain tinggal di dalam frame.
- Layer
- Apa pun di dalam frame: teks, bentuk, gambar, grup. Panel Layers mencantumkan semuanya.
Membaca soal sebuah tool tidak mengajarkan banyak. Ini tool desain versi paling sederhana, langsung di halaman ini. Selesaikan enam tugasnya dan kamu sudah melakukan semua yang diminta sepuluh menit pertamamu di Figma.
Layer
- Frame 1
Posisi dan ukuran
Auto layout
Tampilan
Isian
Garis tepi
Satu file kosong, satu frame, dan enam hal untuk dikerjakan. Tekan V untuk memindahkan, F untuk menggambar frame, T untuk teks, dan R untuk persegi panjang — tombol yang sama seperti di Figma.
- 1
Beri nama frame-nya
Pilih frame itu di daftar layer lalu ketik nama yang sebenarnya di bagian atas panel Design, misalnya "Poster". Tidak ada yang bisa bekerja di file yang penuh Frame 1, Frame 2, Frame 3.
- 2
Buat bentuknya seperti poster
- 3
Tambahkan judul
- 4
Besarkan judulnya: 36 atau lebih
- 5
Tambahkan satu bentuk
- 6
Mulai frame berikutnya
Sekarang lakukan sungguhan. Buka Figma di tab lain dan ulangi enam langkah yang sama di sana — tombolnya sama persis dengan yang baru saja kamu pakai.
Sepuluh menit pertamamu di Figma
Buat file
Buat file desain baru dan beri nama "Unit 1". Tambahkan dua page lagi: "Journal" dan "Prompt library".
Gambar frame
Tekan F, lalu seret di kanvas. Di panel kanan, atur frame jadi 1080 × 1350, bentuk postingan media sosial.
Tambahkan teks
Tekan T, klik di dalam frame, dan ketik sebuah judul. Dengan teks terpilih, ubah font dan ukurannya di panel kanan.
Tambahkan bentuk
Tekan R untuk persegi panjang atau O untuk elips, seret, lalu pilih warna fill di panel kanan.
Pindahkan dan duplikat
Tekan V untuk kembali ke tool move. Pilih sesuatu dan tekan Ctrl + D (⌘ + D di Mac) untuk menduplikatnya.
Lihat semuanya
Tekan Shift + 1 untuk zoom sampai semuanya muat di layar. Tekan Shift + 0 untuk kembali ke 100%.
Istilah penting
- Kanvas
- Ruang kerja tanpa batas di Figma. Scroll untuk bergerak; tahan Ctrl atau ⌘ sambil scroll untuk zoom.
- Fill
- Warna (atau gambar) di dalam bentuk, frame, atau teks.
- Auto layout
- Pengaturan Figma yang memberi jarak secara otomatis, seperti tumpukan. Kamu akan sering memakainya mulai Unit 5.
- Komponen
- Bagian yang bisa dipakai ulang, seperti tombol. Ubah komponen utamanya dan setiap salinannya ikut berubah.
Sekarang cek apakah kamu tahu tool mana yang harus dipakai.
Tool mana yang akan kamu pakai pertama?
Menyusun sepuluh pertanyaan untuk wawancara pengguna.
Melihat tiga arah layout untuk landing page.
Merapikan spacing di versi yang kamu pilih.
Mengubah layar-layarmu jadi set komponen.
Minta kritik jujur kenapa sebuah layout terasa ramai.
Siapkan file studiomu
Buat file Figma yang akan kamu pakai sepanjang kursus ini.
- 1Buat file bernama "UX UI Open – Unit 1" dengan tiga page: Playground, Journal, Prompt library.
- 2Di Playground, buat tiga frame: ponsel (390 × 844), poster (1080 × 1350), dan slide (1920 × 1080).
- 3Taruh judul di tiap frame dengan font yang berbeda.
- 4Ganti nama setiap frame supaya namanya menjelaskan isinya.
- 5Beri tahu di diskusi bahwa kamu sudah siap, dan apa yang paling membingungkanmu.
Bacaan berikutnya