Buat dasbor responsif dengan Figma

Sep 14, 2025

Bagaimana caranya

Figma adalah alat grafis untuk desainer UI. Ini memiliki antarmuka sederhana dan memungkinkan Anda untuk berkolaborasi dalam pekerjaan dengan rekan setim Anda. Jika Anda ingin bekerja offline, Anda dapat memilih untuk menggunakan aplikasi desktop. Atau, Figma bekerja pada sistem operasi apa pun (Halo, Windows), jadi Anda tidak perlu menginstal apa pun. Dan memulai itu mudah - Anda dapat mengimpor desain tata letak Anda sebelumnya dari sketsa.

Pilih Pembangun Situs Web: 16 Top Tools

Di Figma, Anda dapat membuat semua yang Anda butuhkan untuk antarmuka Anda, dari ikon vektor ilustrasi ke tata letak khusus. Pengeditan multipemain dapat menghemat banyak waktu untuk tim desain, karena itu berarti semua anggota tim dapat bekerja pada tata letak yang sama pada saat yang sama. Dan ini bahkan bukan semua fitur hebatnya.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana mengatur dengan Figma, kemudian berjalan melalui cara membuat layar aplikasi seluler, langkah demi-langkah. Dalam hal ini, kami akan merancang dasbor untuk aplikasi statistik fiksi. Setelah selesai, Anda akan dapat membuat antarmuka yang berbeda dalam Figma dan mengerjakannya dengan tim Anda secara real time.

01. Mendaftar

Pertama-tama, Anda perlu mendaftar www.figma.com . Putuskan apakah Anda ingin menggunakan alat di browser Anda atau mengunduh aplikasi desktop. Untuk mengunduh versi desktop, buka menu Hamburger di sudut kiri atas dan klik 'Dapatkan Aplikasi Desktop'.

02. Buat artboard dan grid

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Tambahkan grid baseline untuk membantu Anda memposisikan elemen Anda secara harmonis (klik gambar untuk memperbesar)

Memukul SEBUAH untuk membuat artboard. Anda dapat memilih salah satu preset atau membuat ukuran khusus Anda sendiri. Untuk proyek ini, kita akan menggunakan telepon & gt; iPhone 7 (375x667px). Untuk membuat kotak, pertama pilih artboard. Kemudian di bilah sisi kanan menemukan 'layout grid' dan tekan '+'. Mengatur kolom hitung: 6, selokan: 16, margin: 8 dan jenis: peregangan.

03. Gambar persegi panjang untuk latar belakang

Mari kita mulai dengan latar belakang. tekan R. Untuk memunculkan alat persegi panjang dan menggambar persegi panjang # 5F98FA tanpa batas. Atur dimensi ke 375x363 menggunakan panel properti di sisi kanan.

04. Tambahkan bilah status

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — Atur gradien untuk bilah status menggunakan panel properti di sebelah kanan di layar. Di sini Anda dapat menyesuaikan opsi warna untuk membuat gradien linier (klik gambar untuk memperbesar)

Selanjutnya kita ingin menempatkan bilah status di bagian atas layar. tekan R. Untuk mengatur lebar: 375, tinggi: 64, posisi (x: 0; y: 0). Untuk bilah navigasi kami, mari kita atur isi gradien menggunakan panel Inspektur Properti di sebelah kanan. Temukan opsi 'Fill', tekan pada pratinjau warna dan pilih 'Linear' dari menu drop-down. Warna di bagian atas harus # 77a6f7, dan di bagian bawah # 5A93F5 (opacity 100 persen untuk keduanya).

05. Impor bilah status iOS

Sayangnya, Figma tidak termasuk elemen iOS UI secara default. Namun, ada file yang disebut 'sampel file', yang merupakan desain aplikasi iOS, jadi kami dapat meminjam bilah status dari itu. Salin opsi bilah status cahaya, rekatkan ke dalam file saat ini dan letakkan di (x: 0; y: 0). Menggunakan alat teks ( T. ), Klik pada artboard Anda untuk menambahkan header ke bilah navigasi. Saya sudah pergi untuk Avenir Heavy, 15px, #ffffff. Sejajarkan judul oleh Horizontal Center, Y: 33.

06. Buat ikon kembali

Di sebelah kiri bilah navigasi harus menjadi ikon 'kembali'. Saya akan membuat ini dari awal. Buat Rectangle 14x14px, tambahkan rotasi 45 derajat, X: 14; Y: 43. Gandakan persegi panjang ini dan letakkan di X: 18; Y: 43. Pilih kedua persahan dan di bawah menu atas pergi ke Grup Boolean & GT; Kurangi pemilihan. Setelah itu, kembali ke Grup Boolean & GT; Pilihan ratakan, atau tekan Cmd + E. .

07. Selesaikan ikon panah

Ikon panah kami hampir selesai. Sekarang kita hanya perlu mengatur nilai lebar dan tinggi ke nilai numerik - dalam bentuk kasus saya: 12px; Tinggi: 20px. Langkah terakhir adalah mengatur warna isian ke #ffffff.

08. Buat grafik

Sekarang kita akan membuat grafik. Pertama, kami akan memasukkan beberapa pedoman. Pilih Alat Rectangle ( R. ) dan set x: 24 y: 147; Lebar: 1; Tinggi: 166; Isi warna # B3DCFF dan Opacity 20%.

Gandakan persegi panjang ini empat kali dengan margin 80px. Di bagian bawah setiap pedoman, kita perlu menambahkan label tanggal menggunakan lapisan teks ('2 Feb', '9 Feb', '16 Feb', '23 Feb', 'Mar 1'). Saya telah menggunakan media Avenir, pada 11px, # c1d8ff.

09. Buat garis data

Menggunakan alat pena ( P ) Kita perlu membuat vektor untuk mewakili garis data. Klik dan seret untuk membuat titik bézier. Bentuk ini harus memiliki stroke 4px dan tidak mengisi, #ffffff.

Mari kita tambahkan drop shadow untuk membantu garis menonjol: Klik tombol '+' pada bagian efek dan pilih 'Drop Shadow'. Gunakan pengaturan berikut untuk membuat bayangan yang lancar dan elegan: Blur: 3px, Y: 7px, # 2951FF, Opacity: 100%.

10. Tambahkan detail ke grafik

Use the Text tool to add values to the places the guidelines intersect with the data line — Gunakan alat teks untuk menambahkan nilai ke tempat pedoman berpotongan dengan garis data

Pada titik-titik di mana pedoman berpotongan dengan garis data kita akan menambahkan lingkaran. Kali ini kita akan menggunakan alat Ellipse ( HAI ), yang akan Anda temukan di menu drop-down yang menyertai alat persegi panjang. Gambar 8x8px lingkaran pada setiap persimpangan dan atur warna isian ke # 5F98FA. Kita perlu menambahkan stroke: Klik tombol '+' di sebelah bagian stroke, set berat: 2px dan align: Center.

11. Sentuhan terakhir

Untuk menyelesaikan bagian grafik, kita hanya perlu menambahkan nilai ke titik persimpangan kita. Dengan alat teks ( T. ) Pilih Avenir Hitam, 11px, # 1F4991.

12. Tiga kotak informatif

Di bawah grafik garis kita akan membuat tiga sel yang menampilkan informasi lebih lanjut. Menggunakan alat teks ( T. ) Mari kita buat tajuk pertama kita: 'Perkiraan nilai saham Anda': x: 16; Y: 391, Avenir Medium, 15px, # 5d7eb6. Di sebelah kanan tempat sel nilai '$ 1,115', Gaya Teks: Avenir Heavy, 22px, # 5F98FA, perataan teks: Kiri, X: 287; Y: 387.

13. Membuat pemisah

Gambarlah persegi panjang yang ketinggian 1 px dan bentang lebar penuh layar (# f5f5f5; x: 0; y: 435) - Ini akan bertindak sebagai pemisah antara sel-sel. Pilih pos, nilai, dan pemisah dan buat grup ( cmd + g. ).

14. Menambahkan judul

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Di bawah grafik akan menjadi tiga sel yang menunjukkan potongan data kunci (klik gambar untuk memperbesar)

Gandakan grup ini sehingga Anda memiliki tiga kelompok dengan jarak vertikal 24px di antara mereka. Ubah tajuk kedua ke 'Total Anggota' dan kelompok ketiga menuju ke 'teman mendaftar' dan memperbarui nilai-nilai yang relevan.

15. Gambar dan selaraskan persegi panjang lain

Sekarang kita akan menambahkan panggilan ke tindakan. Gambar persegi panjang di bawah sel terakhir, lebar: 195; Tinggi: 44, jarak Y-sumbu dari pemisah terakhir 21px.

Menggunakan alat Align, line up Rectangle oleh Horizontal Center. Kemudian atur warna isian ke # 5F98FA dan kebulatan menjadi 22 (Anda akan menemukan bidang ini setelah 'rotasi' di panel properti). Setelah itu tambahkan efek shadow drop (warna: #abdaff; opacity: 100%; y: 5; blur: 11).

16. Masukkan beberapa teks pada tombol

Tambahkan teks ke tombol menggunakan alat teks ( T. ): 'Dapatkan lebih banyak saham!' Atur ini di Avenir Hitam, 15px, #ffffff. Sejajarkan teks dengan bagian tengah tombol. Akhirnya, kelompokkan semua elemen bersama dan beri nama dengan benar.

17. Buat responsif

Sekarang kita akan menyesuaikan tata letak kita sehingga responsif terhadap iPhone yang berbeda (320x568, 375x667 dan 414x736). Untuk melakukan ini kita harus menggunakan kendala, yang akan Anda temukan di bawah menu Properties di sebelah kanan.

18. Mendapatkan Tata Letaknya

Jika Anda memilih 'kiri' atau 'kanan' pada drop-down horizontal, grup akan memberi ke sisi layar yang Anda pilih, dan tidak akan meregang. Jika Anda memilih 'Center', grup atau layer akan meregang sehingga memenuhi lebar layar. Kita perlu membuat status bar float di tempat, jadi kita ingin opsi 'kanan & amp; kiri (atau tahan' cmd 'dan klik bilah kiri dan kanan pada diagram).

19. Tesinya

Mari kita coba ini. Dengan bilah status dipilih, tekan opsi 'Kanan & Amp; Kiri'. Pilih artboard dan, alih-alih iPhone 7, pilih iPhone 7 Plus. Ini bekerja dengan baik bahkan jika Anda memilih ukuran SE iPhone.

20. Periksa setiap lapisan

Mari kita pertimbangkan sisa layer. Untuk latar belakang bilah navigasi, kami ingin menggunakan 'kanan + kiri'. Untuk bilah navigasi judul: 'pusat'. Untuk ikon panah kembali, yang terbaik adalah menggunakan opsi 'kiri' - dengan cara ini panah akan disematkan ke sisi kiri layar.

21. Atur grafik garis

Sekarang mari kita atur grafik garis. Untuk pedoman, tanggal, dan kalangan persimpangan, kami ingin menggunakan 'pusat'. Untuk saluran data dan latar belakang, kami akan menggunakan 'Kanan & Amp; Kiri'. Di bagian data tambahan kami ingin menggunakan 'kiri' untuk setiap judul, 'benar' untuk setiap nilai, dan 'kanan & amp; kiri' untuk garis pemisah. Untuk grup tombol CTA, mari kita atur 'pusat'.

22. Atur kendala vertikal

Langkah terakhir adalah mengatur kendala vertikal. Bilah status, bilah navigasi, garis data dan lingkaran persimpangan dan judul terkait harus diatur ke 'Atas'. Latar belakang grafik, tanggal, dan pedoman harus diatur ke 'pusat'. Setiap kelompok data tambahan harus diatur ke 'pusat' vertikal, dan grup tombol CTA harus diatur ke 'bawah'.

23. Buat bekerja untuk setiap ukuran layar

Mari duplikat artboard dua kali, dan atur satu ke ukuran iPhone 7 plus dan yang lain ke ukuran pada iPhone SE. Pada versi plus, Anda harus mengurangi kesenjangan antara sel terakhir informasi tambahan dan tombol CTA dengan memilih grup sel dan meningkatkan ketinggiannya dari 195 hingga 225. Pada versi SE Anda akan melihat bahwa sel-sel informasi meluap Tombol CTA, jadi kita harus memilih grup sel dan mengurangi tingginya menjadi 150.

24. Semua selesai!

Hei, selamat! Kami telah menyelesaikan seluruh layar aplikasi di Figma. Untuk saat ini cukup periksa semuanya dilakukan, dan Anda dapat duduk dan merasa seperti seorang ahli.

Artikel ini awalnya ditampilkan dalam Net Magazine. masalah 288; Beli di sini.

Artikel terkait:

Konsep Behance Baru terlihat seperti aplikasi pembunuh
Merancang dampak sosial
8 Kiat untuk Wawancara Pekerjaan Tech Ace