Blog

UI/UX Design

Mengenal Ukuran Website di Figma Beserta Cara Desainnya!

Siti Khadijah Azzukhruf Firdausi

•

09 February 2024

•

4787

Dalam proses desain web, menciptakan tampilan yang responsif dan dapat diakses di berbagai perangkat adalah hal menantang. Oleh sebab itu, memahami standar ukuran website di Figma adalah hal yang penting.

Pasalnya, ukuran layar desktop hingga mobile cukup beragam. Masing-masing perangkat tersebut membutuhkan pendekatan desain yang fleksibel dan inovatif. Untuk mempelajarinya, simak artikel ini sampai habis ya!

Apa itu Figma?

Figma adalah sebuah platform desain grafis berbasis cloud. Platform ini dirancang khusus untuk memfasilitasi penciptaan UI dan UX yang interaktif.

Figma juga merupakan alat desain vektor yang sangat dinamis. Hal ini memungkinkan para desainer untuk berkolaborasi secara real-time. Oleh sebab itu, Figma adalah platform yang cukup populer di kalangan designer dan developer produk digital.

Fitur-Fitur Dalam Figma

Figma menawarkan beragam fitur menarik yang mendukung proses desain UI dan UX. Berikut adalah beberapa fitur utama dalam Figma:

1. Desain Kolaboratif Real-Time

Fitur ini memungkinkan tim untuk bekerja bersama pada desain yang sama secara real-time.

Artinya, perubahan yang dibuat oleh satu pengguna bisa dilihat seketika oleh pengguna lain dalam tim. Hal ini memfasilitasi kolaborasi dan komunikasi efektif antar anggota tim.

2. Prototyping

Prototyping website dengan Figma memungkinkan desainer untuk menambahkan transisi dan interaksi pada desain tanpa perlu kode. Hal ini memudahkan stakeholder untuk memahami dan memberikan feedback tentang pengalaman pengguna.

3. Auto Layout

Auto layout adalah fitur yang memungkinkan desainer untuk mengatur komponen desain mereka dengan cara fleksibel dan responsif. Dengan auto layout, elemen desain dapat secara otomatis menyesuaikan ukuran dan posisinya berdasarkan isi.

Hal tersebut membuat proses pembuatan UI yang konsisten dan adaptif menjadi lebih mudah.

Baca Juga: Belajar UI/UX: Rekomendasi 5 Tools Terbaik Bagi Pemula

4. Variants

Berikutnya adalah variants. Ini memungkinkan desainer untuk mengelompokkan versi berbeda dari komponen yang sama dalam satu set.

Hal ini bermanfaat untuk mengelola berbagai keadaan dari elemen UI seperti tombol, input fields, dan lainnya. Pada akhirnya, ini akan memudahkan pengelolaan dan pembaruan desain.

5. Plugins dan Integrasi

Selanjutnya adalah plugins dan integrasi. Fitur ini mendukung ekosistem plugins yang luas. Hal ini memungkinkan pengguna untuk menambahkan fungsionalitas ekstra ke alat.

Dari alat pengimporan aset hingga generator kode, plugins bermanfaat untuk tingkatkan produktivitas dan memperluas kemampuan desain.

6. Version Control

Setelah itu, version control yang berfungsi untuk menyimpan history dari file desain. Hal ini memungkinkan pengguna untuk mengakses revisi sebelumnya dengan mudah.

Mereka jadi bisa membandingkannya dengan versi terkini. Fitur ini berguna dalam melacak perubahan dan memutuskan versi mana yang paling efektif.

7. Kompatibilitas Lintas Platform

Sebagai aplikasi web, Figma dapat diakses dari hampir semua perangkat dengan koneksi internet dan browser web. Hal ini mencakup Windows, Mac, Linux, dan bahkan perangkat mobile melalui aplikasi Figma Mirror.

8. Comments dan Feedback

Figma juga menyediakan fitur bagi stakeholder untuk memberikan komentar langsung pada desain. Ini memudahkan proses pengumpulan dan penerapan feedback tanpa harus meninggalkan alat.

9. Asset Sharing dan Libraries

Terakhir adalah asset sharing dan libraries. Dengan fitur ini, tim dapat membuat libraries dari komponen dan style yang dapat digunakan kembali. Ini bisa digunakan untuk memastikan konsistensi desain di seluruh dan antar proyek.

Baca Juga: Mock-up Design Sebagai Pelengkap Proses Desain UI/UX

Ukuran Website di Figma

Pemahaman dan penerapan ukuran website di Figma yang tepat adalah hal krusial. Tujuannya adalah untuk memastikan desain yang responsif dan dapat diakses di berbagai perangkat. Berikut adalah penjelasannya:

1. Standar Ukuran Website di Figma

Standar ukuran website di Figma bisa beragam tergantung perangkat. Berikut adalah standar ukuran layar website di berbagai perangkat:

Desktop: Standar ukuran website desktop untuk desain melalui Figma adalah 1440px untuk lebarnya. Ukuran website di Figma untuk desktop ini tergolong cukup luas untuk mendesain dengan detail tanpa mengabaikan pengguna dengan resolusi layar lebih kecil.

Tablet: Standar ukuran website di Figma untuk tablet berkisar di 768px dan 1024px. Namun, ukuran 768px seringkali dianggap standar untuk desain tablet.

Mobile: Standar ukuran website di Figma untuk mobile berkisar di 375px dan 414px. Ukuran tersebut sudah mewakili iPhone dan perangkat mobile populer lainnya.

2. Cara Mengukur Website di Figma

Setelah memahami standar ukuran halaman web di Figma, berikutnya mari pelajari cara mengukurnya. Ukuran website di Figma bisa dilihat dan diatur dengan cara berikut:

Buat Frame untuk Setiap Perangkat: Gunakan alat Frame (F) untuk membuat frame yang mewakili ukuran layar berbeda. Misalnya, desktop, tablet, dan mobile.

Terapkan Layout Grid: Gunakan Layout Grids untuk menambahkan grid ke frame yang sudah dibuat. Ini membantu dalam mengatur dan mengukur elemen secara konsisten di seluruh desain.

Gunakan Constraints dan Auto Layout: Atur Constraints untuk elemen dalam frame agar responsif terhadap perubahan ukuran layar. Gunakan Auto Layout untuk elemen yang memerlukan penyesuaian ukuran dan jarak otomatis berdasarkan konten.

Preview dan Tes Responsivitas: Uji desain menggunakan fitur Preview, Tujuannya adalah untuk melihat bagaimana mereka tampil di berbagai ukuran layar dan sesuaikan dengan kebutuhan.

Ukur dan Sesuaikan Elemen: Pastikan semua elemen terukur dengan benar dan sesuai dengan prinsip desain responsif. Elemen yang diukur bisa mencakup teks, gambar, button, dan lain-lain.

Fungsi Figma Untuk Web Design

Sebagai alat desain UI/UX berbasis cloud, Figma menyediakan berbagai fitur yang menjadikannya berguna dalam web design. Berikut adalah beberapa fungsinya dalam web design:

1. Desain Interaktif dan Prototyping

Dengan Figma, desainer bisa dengan mudah membuat desain yang menarik dan prototipe interaktif tanpa perlu beralih antar alat. Lalu, desainer juga bisa menambahkan transisi, animasi, dan interaksi pada desain web menggunakan prototyping yang terintegrasi.

Hal tersebut memungkinkan stakeholder untuk merasakan dan berinteraksi dengan desain seolah-olah itu adalah website sesungguhnya.

Fitur ini bermanfaat untuk menguji alur pengguna, memahami pengalaman pengunjung, dan mengumpulkan feedback sebelum pengembangan sesungguhnya dimulai.

2. Kolaborasi Tim Real-Time

Figma juga memfasilitasi kolaborasi real-time antara anggota tim. Dengan fitur tersebut, tim bisa bekerja bersama pada file yang sama secara simultan. Mulai dari pengerjaan desain, memberikan komentar, dan berbagi feedback langsung di dalam platform.

Fitur kolaborasi ini mempercepat proses iterasi desain. Ini juga memastikan semua anggota tim berada di halaman yang sama. Selain itu, fitur ini juga bisa meminimalisasi kesalahpahaman atau revisi berulang.

Baca Juga: 6 Tahapan Desain dalam Menciptakan UI yang Ramah Pengguna

3. Meningkatkan Responsivitas dan Adaptabilitas Desain

Terakhir adalah untuk meningkatkan responsivitas dan adaptabilitas desain. Hal ini bisa dicapai dengan fitur auto layout yang bisa menyesuaikan desain ke berbagai layar dan perangkat.

Dengan fitur ini, desainer dapat membuat versi desain yang berbeda untuk dekstop, tablet, dan mobile dalam file sama. Hal ini memastikan desain web mereka terlihat dan berfungsi dengan baik di semua perangkat.

Selain itu, Figma juga mendukung penggunaan variabel dan constraints. Kedua hal tersebut membantu dalam otomatisasi dan penyederhanaan proses adaptasi desain untuk berbagai ukuran layar.

Secara keseluruhan, ini mempercepat proses desain dan memastikan konsistensi antar platform.

Cara Desain Website di Figma

Berikut adalah langkah langkah untuk membuat web desain dengan Figma:

Buat File Baru: Buka Figma dan klik ‘New File’ untuk memulai desain baru.

Tetapkan Frame Untuk Desain: Gunakan alat Frame (F) untuk membuat area kerja desain. Pilih ukuran frame berdasarkan perangkat yang mau didesain. Misalnya, ukuran website di Figma untuk perangkat desktop berkisar di 1440x1024px.

Terapkan Layout Grid: Dengan frame terpilih, gunakan opsi Layout Grid. Tujuannya adalah untuk menambahkan grid. Ini membantu dalam mengatur dan mengukur elemen secara konsisten.

Mulai Desain UI: Mulai tambahkan elemen UI utama seperti header, footer, dan navigasi. Untuk menambahkan dan mengatur elemen itu, gunakan Rectangle (R), Text (T), dan lainnya.

Tambahkan Konten: Isi halaman dengan konten seperti teks, gambar, dan tombol. Lalu, import gambar dengan drag-and-drop. Setelah itu, gunakan alat teks untuk tambahkan judul, paragraf, dan label.

Gunakan Komponen dan Variants: Untuk elemen yang digunakan berulang, seperti tombol atau kartu. Kami bisa buat Components dengan Ctrl/Cmd+Alt+K. Ini memudahkan pengelolaan desain dan konsistensi.

Buat Prototipe: Pindah ke mode Prototype untuk menautkan frame dan elemen, menambahkan interaksi seperti klik atau hover, serta menentukan transisi antar halaman.

Review dan Iterasi: Gunakan fitur Preview untuk menguji prototipe dan buat iterasi desain berdasarkan feedback atau tes pengguna.

Siapkan untuk Pengembang: Gunakan fitur Export untuk mengekstrak elemen desain. Kamu juga bisa bagikan file dengan pengembang melalui Share untuk akses langsung ke aset, spesifikasi, dan kode CSS.

Kolaborasi dan Feedback: Undang tim atau klien untuk memberikan feedback langsung di Figma dengan menggunakan fitur komentar.

Itulah pembahasan lengkap mengenai Figma yang meliputi pengertian, fitur, ukuran, fungsi, dan cara desainnya. Dari penjelasan di atas, dapat dilihat bahwa ukuran website di Figma cukup beragam dan bisa diatur sesuai dengan standar perangkat yang mau di desain.

Selain itu, pembahasan di atas juga menunjukkan peran penting UI/UX designer dalam menggunakan Figma untuk ciptakan desain menarik dan responsif. Oleh sebab itu, UI/UX designer adalah salah satu pekerjaan yang cukup dicari saat ini.

Apakah kamu ingin beralih karir ke bidang ini. Jika iya, MinDi rekomendasikan kamu Bootcamp UIUX/Product Design. Program ini menawarkan pembelajaran lengkap mengenai UI/UX dan dilengkapi oleh silabus beginner-friendly.

Di sini, kamu bisa belajar teori dasar, tools, dan praktinya dengan real-case project. Pokoknya, kamu bakal dibimbing sampai jadi. So, segera gabung dan mulai karir yang lebih baik bareng Dibimbing.id!