Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Figma
Webdesign

Kiat-kiat untuk Pengelolaan dan Pengujian di Figma

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Figma Tips and Tricks.
Figma Layout Tips
Figma General and Miscellaneous Tips

Indonesian (Bahasa Indonesia) translation by Haikal Kamil (you can also view the original English article)

Kolaborasi yang lancar dengan para developer adalah bagian terbesar dari apa yang ditawarkan oleh para desainer Figma, jadi dalam kumpulan tips dan trik ini kita akan membahas pengelolaan dan pengujian!

Tonton Tipsnya

1. Output Via Tab Code

Ketika desain Anda telah mencapai titik di mana mereka harus diserahkan dan dibuat codenya, lihat di tab Code di sebelah kiri layar. Anda akan menemukan semua jenis code yang dapat dibuat secara otomatis untuk Anda. Dengan memilih item makanya Anda akan dapat melihat code CSS, iOS, dan code Androidnya.

Output Via the Code Tab

2. Generate Code Siap Untuk Pasting

Figma memungkinkan Anda men-generate codedan meletakkannya langsung ke clipboard Anda sehingga siap untuk mem-paste-nya ke code editor. Untuk melakukannya, pilih sebuah objek kemudian menuju ke Menu > File > Copy as kemudian Copy as CSS, Copy as Text, atau Copy as SVG.

Generate Code Ready For Pasting

3. Uji di Mobile dengan Mirror App Figma

Figma menyediakan mirror app (tersedia di Android dan iOS) yang akan membantu menguji desain Anda di mobile. Setelah diunduh, masuk ke aplikasi menggunakan akun yang sama yang Anda gunakan di komputer Anda. Pilih frame dari desain Anda di komputer dan Anda akan melihatnya "dicerminkan" di perangkat mobile Anda.

Test on Mobile With Figmas Mirror App

4. Gunakan Mirror App Figma di Browser

Anda juga dapat menggunakan Mirror App Figma di browser dengan mengunjungi www.figma.com/mirror (tidak lagi figma.com/mirror-app sebagaimana disebutkan dalam video). Sama seperti dengan aplikasi seluler yang sebenarnya, pilih frame dalam desain Figma Anda dan lihatlah itu ditampilkan di emulator browser seluler di tab browser yang lain.

Use Figmas Mirror App in the Browser

5. Aktifkan "Pixel Preview" untuk Memeriksa Raster Output

Anda dapat memeriksa grafik vektor Anda untuk melihat bagaimana mereka akan terlihat setelah diekspor sebagai raster graphic. Untuk melakukannya, pastikan tidak ada bagian dalam desain Anda yang dipilih (yang akan memberi Anda akses ke pengaturan universal untuk dokumen), lalu periksa Pixel Preview di panel Design.

Secara default, preview yang dihasilkan akan memberi Anda versi 1x, tetapi Anda juga dapat memilih 2x untuk memberi Anda preview tentang bagaimana pixel akan ditampilkan pada perangkat dengan DPI tinggi.

Turn on Pixel Preview to Check Raster Output

Sumber-sumber untuk Belajar Figma

Itulah tips untuk pengelolaan dan menguji - lebih lanjut untuk pembelajaran Figma Anda dengan rangkaian program kami:

Kit UI yang digunakan dalam tutorial ini sepenuhnya kompatibel dengan Figma dan tersedia dari Envato Elements:

Finance Mobile App Template UI Kit
Finance Mobile App Template UI Kit
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.