Sebelum aplikasi desain berbasis browser populer, desain sebuah aplikasi biasanya berpindah tangan sebagai berkas. Desainer menyimpan beranda.psd, mengirimnya lewat email, lalu menerima komentar dalam bentuk tangkapan layar yang dicoret. Beberapa hari kemudian muncul beranda-final.psd, disusul beranda-final-revisi-2.psd, dan tidak ada yang yakin versi mana yang terbaru. Figma adalah jawaban atas kekacauan itu: desain tidak lagi dikirim, tetapi dibagikan sebagai satu tautan yang dibuka semua orang secara bersamaan.
Di artikel ini kita akan membahas apa itu Figma dan bagaimana banyak orang bisa mengedit satu desain sekaligus. Setelah itu kita lanjut ke fungsi, fitur inti, keluarga produk per 2026, harga, dan kelemahannya, hingga langkah membuat prototipe pertama Anda.
Figma Adalah Aplikasi Desain Antarmuka yang Berjalan di Browser
Figma adalah aplikasi desain berbasis cloud (komputasi awan) untuk merancang antarmuka website dan aplikasi, yang bisa dibuka langsung dari browser tanpa instalasi. Objek yang Anda gambar di dalamnya berbasis vektor, yaitu bentuk yang disimpan sebagai titik dan garis matematis sehingga tetap tajam saat diperbesar. Karena itu, Figma cocok untuk ikon, tombol, dan tata letak layar, tetapi bukan alat untuk menyunting foto.
Pekerjaan utama Figma adalah desain user interface (UI), yaitu semua yang dilihat dan disentuh pengguna di layar: menu, formulir, kartu produk, hingga urutan halaman. Hasilnya berupa gambar layar yang bisa diklik seperti aplikasi sungguhan, lalu diteruskan ke developer untuk dibangun dengan kode.
Kalau Anda menemukan soal "Figma adalah perangkat lunak yang berbasis apa?", jawabannya ada dua lapis. Dari sisi cara pakai, Figma berbasis browser dan cloud: berkasnya tersimpan di server Figma, bukan di hard disk Anda. Dari sisi jenis grafis, Figma berbasis vektor.
Figma juga tersedia sebagai aplikasi desktop untuk macOS dan Windows. Aplikasi itu pada dasarnya membungkus versi browser yang sama, sehingga berkasnya tetap tersimpan di server.
Cara Kerja Figma: Satu Desain Diedit Banyak Orang Sekaligus
Kunci memahami Figma ada di satu fakta sederhana: berkas desain tersimpan di server, bukan di laptop siapa pun. Saat Anda membuka berkas, browser mengunduh salinannya, lalu tetap tersambung ke server lewat WebSocket, yaitu jalur komunikasi dua arah yang terus terbuka. Setiap perubahan kecil, misalnya menggeser tombol 4 piksel, dikirim ke server dan diteruskan ke semua orang yang sedang membuka berkas yang sama.
Bayangkan papan tulis di ruang rapat yang diawasi seorang notulen. Siapa pun boleh menulis, tetapi notulen yang memutuskan urutan coretan dan mencatat versi resminya. Di Figma, peran notulen dipegang server. Menurut tulisan teknis salah satu pendiri Figma, Evan Wallace, setiap dokumen yang sedang disunting bersama dilayani satu proses server tersendiri.
Bagaimana kalau dua orang mengubah hal yang sama? Figma menyimpan setiap properti objek secara terpisah, misalnya warna, posisi, dan ukuran. Kalau Anda mengubah warna tombol dan rekan Anda mengubah posisinya, keduanya tidak bentrok. Kalau keduanya mengubah warna yang sama, nilai yang diterima server paling akhir yang dipakai.
Lalu apa yang membuat desain berat tetap lancar di browser? Mesin gambar Figma ditulis dalam bahasa C++, lalu dikompilasi ke WebAssembly agar berjalan hampir secepat aplikasi biasa di browser. Gambarnya dirender oleh kartu grafis lewat WebGL, dan sejak 2025 juga lewat penerusnya, WebGPU.
Sejarah Singkat: Dari Proyek Mahasiswa sampai Bursa Saham
Figma didirikan pada 2012 oleh Dylan Field dan Evan Wallace, dua mahasiswa Brown University. Field kini menjabat CEO. Berikut tonggak yang paling berpengaruh bagi penggunanya:
| Tahun | Peristiwa |
|---|---|
| 2015 | Pratinjau terbatas lewat undangan dibuka (Desember) |
| 2016 | Figma 1.0 dirilis untuk publik (September) |
| 2019 | Figma Community diluncurkan |
| 2021 | FigJam diluncurkan |
| 2022 | Adobe berencana membeli Figma senilai US$20 miliar |
| 2023 | Dev Mode rilis; akuisisi Adobe batal |
| 2025 | Make, Sites, Buzz, Draw; IPO di NYSE; Weavy dibeli |
| 2026 | Figma Motion dan alat Weave di kanvas |
Akuisisi Adobe batal pada Desember 2023 karena hambatan regulator Eropa dan Inggris, dan Adobe membayar denda pembatalan US$1 miliar. Peristiwa ini penting bagi pengguna karena Figma tetap berdiri sebagai perusahaan independen. Pada Juli 2025, Figma melantai di Bursa Efek New York (NYSE) dengan kode saham FIG. Laporan keuangannya mencatat pendapatan tahun 2025 sebesar US$1,056 miliar, naik sekitar 41% dari tahun sebelumnya. Bagi Anda yang akan menginvestasikan waktu belajar, angka ini menandakan alatnya tidak akan hilang dalam waktu dekat.
Logo Figma sendiri mudah dikenali: lima bentuk sederhana berwarna merah, oranye, ungu, biru, dan hijau, disusun dalam dua kolom hingga menyerupai huruf F. Kalau Anda membutuhkan logo ini untuk presentasi atau materi ajar, ambil berkas resminya dari panduan merek (brand book) Figma agar warna dan proporsinya tidak berubah.
Figma untuk Apa? Fungsi Figma dalam Proyek Website dan Aplikasi
Fungsi Figma paling mudah dipahami dari siapa yang membukanya. Satu berkas yang sama dipakai oleh orang dengan pekerjaan berbeda:
- Desainer UI dan UX (user experience, pengalaman pengguna): menggambar layar, menyusun komponen, dan membuat prototipe untuk diuji ke calon pengguna sebelum kode ditulis.
- Developer: membaca ukuran, warna, jarak, dan potongan kode CSS langsung dari desain, tanpa menebak dari gambar JPG.
- Pemilik produk dan klien: memberi komentar tepat di elemen yang dimaksud. Mereka cukup punya akses lihat, yang tidak dikenai biaya.
- Tim pemasaran: membuat banner, materi media sosial, dan presentasi yang memakai warna serta huruf resmi perusahaan.
- Pengajar dan pelajar: mengerjakan tugas desain bersama dan menilai prosesnya lewat riwayat versi.
Jadi, apa saja yang bisa dibuat di Figma? Tampilan aplikasi Android dan iOS, desain website dan landing page (halaman promosi tunggal), serta dasbor admin. Figma juga dipakai untuk ikon, logo sederhana, wireframe, diagram alur, presentasi, hingga website yang langsung tayang lewat Figma Sites. Yang bukan bidangnya adalah penyuntingan foto, ilustrasi cat digital, dan tata letak buku cetak.
Fitur Inti Figma yang Perlu Dikenal Pemula
Figma punya ratusan menu, tetapi enam fitur berikut sudah cukup untuk menyelesaikan proyek pertama Anda.
Frame dan Layer
Frame adalah wadah berukuran layar tertentu, misalnya 390x844 piksel untuk ponsel atau 1440x1024 untuk desktop. Semua elemen di dalamnya tersusun sebagai layer (lapisan) yang terlihat di panel kiri. Frame bisa berisi frame lain, persis seperti kotak di dalam kotak pada halaman web.
Auto Layout
Auto layout adalah aturan yang membuat isi frame menyusun dirinya sendiri: berjajar ke samping atau ke bawah, dengan jarak dan padding (ruang dalam) yang tetap. Contohnya tombol "Daftar Sekarang". Kalau tulisannya diganti menjadi "Daftar", tombol otomatis menyempit tanpa Anda geser satu per satu. Bagi developer, konsep ini setara dengan flexbox di CSS, sehingga desainnya lebih mudah diterjemahkan ke kode.
Komponen dan Variabel
Komponen adalah elemen induk yang bisa dipakai ulang. Ubah warna tombol induk sekali, dan seratus salinannya di semua layar ikut berubah. Variabel menyimpan nilai seperti warna utama atau jarak standar, termasuk versi mode gelapnya. Kumpulan komponen dan variabel yang disepakati satu tim disebut design system.
Prototype
Prototype di Figma adalah desain statis yang diberi interaksi, sehingga bisa diklik seperti aplikasi sungguhan. Anda menarik garis dari tombol ke layar tujuan, lalu memilih pemicu seperti "On click" dan animasi perpindahannya. Prototipe biasanya menjadi tahap terakhir setelah wireframe (sketsa kasar tanpa warna) dan mockup (tampilan statis lengkap). Urutan tahapan ini dijelaskan lebih rinci di artikel layout.
Dev Mode
Dev Mode adalah tampilan khusus developer. Saat sebuah elemen diklik, panel kanan menampilkan ukuran, jarak, dan potongan kode CSS, SwiftUI, atau Jetpack Compose. Developer juga bisa melihat bagian mana yang sudah ditandai "siap dibangun" oleh desainer. Fitur ini menjembatani sisi frontend dan desain.
Plugin dan Community
Plugin Figma adalah program tambahan buatan komunitas yang menambah kemampuan di dalam editor, misalnya pemeriksa kontras warna, pembuat data contoh, atau pustaka ikon. Konsepnya sama dengan plugin di aplikasi lain. Di halaman Figma Community Anda juga bisa menyalin UI kit, template, dan berkas contoh gratis. Template yang banyak dipakai pemula antara lain portofolio, dasbor admin, landing page, dan presentasi.
Keluarga Produk Figma 2026, Dipetakan per Tahap Kerja
Figma kini bukan satu aplikasi, melainkan belasan produk dalam satu akun. Cara termudah memahaminya adalah memetakan tiap produk ke tahap kerja sebuah proyek digital:
| Tahap | Produk | Kegunaan |
|---|---|---|
| Ide | FigJam | Papan tulis, flowchart (diagram alur), riset |
| Desain | Figma Design, Draw | Layar aplikasi, ilustrasi vektor |
| Uji | Prototype, Slides | Prototipe, presentasi |
| Ke kode | Dev Mode, Code Connect, MCP Server | Spesifikasi untuk developer dan AI |
| Bangun AI | Make, Sites | Teks jadi aplikasi, terbitkan website |
| Media | Buzz, Weave, Motion | Materi promosi, gambar dan video AI, animasi |
Beberapa produk masih berstatus beta per Oktober 2026, termasuk Figma Sites dan Figma Buzz. Figma Motion diumumkan pada Config 2026 sebagai beta terbuka.
Dua produk yang paling sering membuat bingung adalah Figma MCP Server dan Figma Weave. MCP Server memakai Model Context Protocol, standar yang menghubungkan asisten AI dengan sumber data. Lewat MCP, asisten pemrograman seperti Claude Code, Cursor, atau VS Code bisa membaca struktur desain secara langsung. Hasilnya, kode yang dibuat AI lebih mendekati desain aslinya ketimbang kalau AI hanya melihat tangkapan layar.
Figma Weave berasal dari Weavy, perusahaan asal Tel Aviv yang dibeli Figma pada Oktober 2025. Weave adalah kanvas berbasis node (kotak yang saling disambung) untuk merangkai beberapa model AI pembuat gambar, video, dan audio. Perlu diperhatikan, Weave masih memakai akun, tagihan, dan kredit AI terpisah dari Figma.
Kelebihan Figma
Hampir semua kelebihan Figma berasal dari keputusan menyimpan berkas di server:
- Tanpa instalasi: cukup browser modern. Desain bisa dibuka di laptop kantor, komputer warnet, atau Chromebook sekolah.
- Kolaborasi waktu nyata: kursor setiap orang terlihat di kanvas, dan perubahan muncul dalam hitungan detik.
- Satu sumber kebenaran: tidak ada lagi
final-revisi-2. Semua orang selalu membuka versi terbaru. - Riwayat versi otomatis: Anda bisa kembali ke kondisi kemarin tanpa menyimpan salinan manual.
- Lintas sistem operasi: pengguna Windows dan macOS bekerja di berkas yang sama tanpa masalah format.
- Ekosistem besar: ribuan plugin dan template gratis di Community mempercepat proyek pertama Anda.
Kelemahan Figma dan Hal yang Perlu Anda Pertimbangkan
Keputusan yang sama juga membawa konsekuensi. Ini yang perlu Anda ketahui sebelum memakai Figma untuk pekerjaan serius:
- Bergantung pada internet: tidak ada mode offline penuh. Berkas yang sudah terbuka bisa disunting saat koneksi putus, tetapi perubahan hanya tersimpan di browser sampai koneksi pulih. Berkas lain tidak bisa dibuka.
- Batas memori per tab: Figma menyebut batas aktif sekitar 2 GB memori untuk setiap tab, termasuk di aplikasi desktop. Berkas dengan ratusan layar dan gambar resolusi tinggi akan memunculkan peringatan saat pemakaian mencapai 60%, 75%, dan 100%.
- Paket gratis sangat terbatas untuk tim: paket Starter hanya memberi satu folder dengan 3 berkas di ruang tim. Proyek keempat harus menunggu berkas lama dihapus atau dipindah ke draft pribadi.
- Harga dalam dolar dan per orang: tagihan dibuat dalam dolar AS dengan model langganan SaaS per kursi. Biaya tim lima desainer langsung berlipat lima.
- Antarmuka belum berbahasa Indonesia: per Oktober 2026, menu Figma tersedia dalam bahasa Inggris, Jepang, Korea, Prancis, Jerman, Spanyol, dan Portugis Brasil.
- Belum ada editor penuh di HP dan Linux: aplikasi Android dan iOS ditujukan untuk melihat desain, mengomentari, dan mencoba prototipe. Figma juga tidak menyediakan aplikasi desktop resmi untuk Linux, sehingga pengguna Linux bekerja lewat browser.
- Data di tangan satu vendor: berkas tersimpan di server Figma. Untuk arsip, biasakan mengunduh salinan
.figlewat menu File secara berkala.
Harga Figma: Paket Gratis, Berbayar, dan Edukasi
Figma memakai model freemium: paket dasar gratis, sedangkan fitur tim dikenai biaya per kursi. Ada tiga jenis kursi berbayar. Kursi Full membuka semua produk, kursi Dev untuk developer yang memakai Dev Mode, dan kursi Collab untuk anggota yang hanya butuh FigJam serta Slides. Berikut harga per kursi per bulan yang tercantum di halaman resmi Figma per Oktober 2026:
| Paket | Full | Dev | Collab |
|---|---|---|---|
| Starter | Gratis | – | – |
| Professional | US$16 | US$12 | US$3 |
| Organization | US$55 | US$25 | US$5 |
| Enterprise | US$90 | US$35 | US$5 |
Perbedaan utama tiap paket:
- Starter: 3 berkas di ruang tim dan riwayat versi 30 hari.
- Professional: berkas dan folder tanpa batas, riwayat versi penuh. Harga kursi Full US$16 dengan tagihan tahunan, atau US$20 kalau dibayar bulanan.
- Organization: ditagih tahunan, dengan kontrol admin terpusat untuk banyak tim.
- Enterprise: ditagih tahunan dan dibeli lewat tim penjualan Figma.
Paket Starter juga mendapat kredit AI 150 per hari dengan batas 500 per bulan. Kursi Full di paket Professional mendapat 3.000 kredit per bulan. Siapa pun yang hanya melihat dan berkomentar tidak membutuhkan kursi berbayar.
Untuk pelajar dan pengajar, Figma menyediakan paket edukasi bernama Figma for Education yang 100% gratis, diajukan lewat halaman figma.com/education. Syaratnya, Anda berusia minimal 13 tahun dan terdaftar di kelas terstruktur, seperti SMA, kampus, SMK, kursus online, atau bootcamp (kursus intensif). Setelah status diverifikasi, Anda mendapat akses setara paket Professional, termasuk Figma Make.
Jadi, apakah Figma berbayar? Untuk belajar dan proyek pribadi, tidak. Kami menyarankan begini:
- Belajar mandiri atau portofolio: paket Starter sudah cukup, karena draft pribadi tidak dibatasi jumlahnya.
- Pelajar dan mahasiswa: ajukan paket edukasi sebelum mempertimbangkan opsi lain.
- Freelancer dengan lebih dari 3 klien aktif: satu kursi Professional US$16 per bulan, klien cukup diberi akses lihat gratis.
- Tim produk 3–10 orang: Professional dengan campuran kursi. Contohnya 2 kursi Full, 2 kursi Dev, dan 3 kursi Collab, totalnya US$65 per bulan dengan tagihan tahunan.
Figma vs Canva, Adobe XD, dan Sketch
Apakah Figma sama dengan Canva? Tidak, meski keduanya berjalan di browser dan sama-sama bisa dipakai beramai-ramai. Perbedaannya ada pada hasil akhir yang dituju:
| Aplikasi | Paling cocok untuk | Catatan |
|---|---|---|
| Figma | Layar website dan aplikasi | Prototipe dan Dev Mode lengkap |
| Canva | Poster, media sosial, presentasi | Mulai dari ribuan template |
| Adobe XD | Layar aplikasi | Hanya pemeliharaan, tanpa fitur baru |
| Sketch | Layar aplikasi | Hanya untuk macOS |
Untuk materi pemasaran yang perlu selesai dalam 15 menit, Canva lebih praktis. Kalau Anda merancang layar yang nantinya dibangun developer, Figma pilihan yang lebih tepat. Adobe XD sudah tidak dikembangkan lagi, sehingga kurang layak dipelajari dari nol. Sketch tetap matang, tetapi hanya bisa dipakai di Mac.
Cara Menggunakan Figma untuk Pertama Kali
Langkah berikut membawa Anda dari akun kosong ke prototipe dua layar yang bisa diklik. Anda cukup memakai paket Starter dan browser Chrome, Edge, Firefox, atau Safari versi terbaru.
Langkah #1: Buat Akun dan Login
Buka figma.com, klik tombol pendaftaran gratis, lalu daftar memakai email atau akun Google. Figma akan menanyakan peran dan tujuan Anda. Jawabannya hanya memengaruhi rekomendasi template, jadi pilih yang paling mendekati. Setelah itu Anda masuk ke file browser, halaman yang berisi semua berkas Anda.
Langkah #2: Buat Berkas Desain dan Frame Pertama
Di file browser, buka Drafts, klik Create new, lalu pilih Design. Cara tercepat lainnya adalah mengetik figma.new di address bar browser. Di kanvas kosong, tekan tombol F untuk memilih alat Frame. Panel kanan akan menampilkan ukuran layar siap pakai: pilih salah satu ukuran di kelompok Phone, lalu ganti nama frame menjadi Beranda lewat panel kiri.
Langkah #3: Susun Tombol dengan Auto Layout
Tekan T, klik di dalam frame, lalu ketik Pesan Sekarang. Dengan teks masih terpilih, tekan Shift + A. Figma membungkus teks dengan frame auto layout yang otomatis memiliki padding. Beri warna latar di bagian Fill, misalnya kode warna hex #EF8A3E, dan atur sudut membulat di Corner radius sebesar 12. Coba ganti teksnya menjadi Pesan, dan tombolnya akan menyusut sendiri.
Langkah #4: Sambungkan Dua Layar Menjadi Prototype
Gandakan frame Beranda dengan Ctrl + D (atau Cmd + D di Mac) dan ganti namanya menjadi Konfirmasi. Isi frame kedua dengan teks Pesanan diterima. Pilih tombol di frame Beranda, buka tab Prototype di panel kanan, lalu tarik titik bulat di tepi tombol ke frame Konfirmasi. Biarkan pemicunya On click dengan aksi Navigate to. Klik ikon putar (▶) di kanan atas untuk mencoba prototipe Anda.
Langkah #5: Bagikan Tautan dan Undang Rekan
Klik Share di kanan atas. Untuk klien atau dosen, salin tautan dengan izin can view agar mereka bisa melihat dan berkomentar tanpa biaya. Untuk rekan yang ikut menyunting, pindahkan dulu berkas dari draft ke proyek tim, lalu undang dengan izin can edit. Ingat batas 3 berkas di ruang tim pada paket Starter.
Setelah lima langkah ini, lanjutkan belajar lewat Figma Learn, pusat bantuan resmi Figma yang memuat panduan dan kursus dari tingkat dasar. Materinya berbahasa Inggris, tetapi dilengkapi tangkapan layar dan video sehingga tetap mudah diikuti.
Pertanyaan Seputar Figma
Apakah Figma bisa dipakai di HP?
Bisa, tetapi terbatas. Aplikasi Figma untuk Android dan iOS ditujukan untuk melihat desain, memberi komentar, dan mencoba prototipe di layar ponsel sungguhan. Untuk menggambar dan menyusun layar, Anda tetap membutuhkan laptop atau komputer.
Apakah Figma bisa dipakai offline?
Tidak sepenuhnya. Kalau koneksi putus saat berkas sedang terbuka, Anda masih bisa melanjutkan suntingan di berkas tersebut. Perubahan disimpan sementara di browser dan dikirim ke server setelah koneksi kembali. Membuka berkas baru tetap membutuhkan internet. Kalau Figma sama sekali tidak bisa dibuka, periksa status.figma.com untuk memastikan gangguannya bukan dari sisi Figma.
Apakah Figma perlu di-download?
Tidak wajib, karena Figma berjalan penuh di browser. Aplikasi desktop tersedia di halaman unduhan resmi untuk macOS, Windows, dan Windows Arm, tetapi tidak untuk Linux. Satu hal yang membedakan adalah font. Di browser, Anda perlu memasang Figma Font Installer agar font yang terpasang di komputer bisa dipakai, sedangkan aplikasi desktop sudah menyertakannya.
Berapa spesifikasi laptop minimal untuk Figma?
Figma tidak menerbitkan spesifikasi minimal resmi, tetapi membatasi pemakaian memori sekitar 2 GB per tab. Ditambah kebutuhan sistem operasi dan browser, RAM 8 GB adalah titik nyaman untuk belajar. Proyek tim dengan puluhan layar dan banyak gambar lebih lega di RAM 16 GB. Aplikasi desktopnya membutuhkan sistem 64-bit.
Apakah desain Figma bisa langsung menjadi website?
Bisa lewat Figma Sites, yang menerbitkan desain sebagai website responsif. Fitur ini masih berstatus beta per Oktober 2026. Untuk website bisnis yang membutuhkan formulir, toko online, atau database, desain Figma biasanya tetap dibangun ulang oleh developer dengan HTML dan CSS.
Kesimpulan
Figma adalah aplikasi desain antarmuka berbasis browser yang menyimpan berkas di server. Karena itu, satu desain bisa disunting, dikomentari, dan diteruskan ke developer oleh banyak orang sekaligus. Kekuatannya ada pada kolaborasi, komponen, prototipe, dan Dev Mode. Konsekuensinya, Figma bergantung pada internet, memakai harga dolar per kursi, dan antarmukanya belum berbahasa Indonesia.
Figma tepat dipakai kalau Anda merancang layar website atau aplikasi yang akan dibangun developer. Untuk poster dan konten media sosial sekali jadi, Canva lebih praktis. Pelajar sebaiknya memulai dengan paket edukasi gratis, sedangkan pemula lain cukup dengan paket Starter.
Semoga artikel ini membantu.
