Pada artikel ini saya akan memberi tahu Anda cara membuat komponen di Figma yang cocok untuk diekspor ke kode. Di Figma, Anda dapat memilih komponen kami dan menggunakan plugin untuk menghasilkan kode yang sudah selesai.
UPD
Figma adalah aplikasi yang mengkhususkan diri dalam menyediakan seluruh paket layanan dan fungsi untuk mengembangkan antarmuka dengan berbagai kompleksitas. Aplikasi itu sendiri adalah lintas platform dan dapat digunakan baik sebagai aplikasi desktop dan browser. Pada intinya, ini adalah editor grafik vektor yang mendukung basis plugin yang besar. Sejak awal, mendukung pembuatan gaya dan kode CSS untuk perangkat seluler. Nilai tambah yang besar adalah penyimpanan tata letak di cloud, dan kemampuan untuk bekerja secara bersamaan pada satu proyek dengan seluruh tim desainer. Untuk pengembang, ada ekspor sumber daya yang nyaman (misalnya, ikon vektor) ke format PNG / SVG / JPG, serta ekspor halaman ke file PDF.
Plugin di Figma berfungsi untuk memfasilitasi tugas perancang dan pengembang - memperluas fungsionalitas aplikasi Figma dasar dengan ekstensi khusus (plugin).
Mari menggambar tampilan daun dengan ikon dan menghasilkan tata letak.
Beginilah perkiraan struktur item daftar kita - ikon di sebelah kiri, lalu teks.
Ini akan menjadi struktur komponen kami - kumpulan elemen vertikal yang kami buat di atas.
Jadi, kami menemukan strukturnya, memahami kira-kira apa yang perlu kami lakukan, sekarang kami langsung melanjutkan ke desain. Untuk melakukan ini, kita akan mengambil satu elemen dan membuatnya berdasarkan komponen Figma dan menerapkan tata letak Otomatis padanya. Pertama, mari gabungkan teks dan ikon, tambahkan beberapa padding, dan sejajarkan di tengah dan kiri. Ternyata seperti ini ...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
Saya menggambar tata letak seperti pada contoh sebelumnya, membuat desain, mendistribusikan blok, dan menggunakan tata letak Otomatis, saya menyelaraskan semua yang saya butuhkan. Saya membuat kode, mengoreksi beberapa nuansa dengan gambar dan ikon, dan sebagai hasilnya saya menerima kartu produk jadi. Pelajari lebih lanjut tentang Flexbox di sini .
Markup yang saya buat tersedia di sini . Anda dapat menonton dan mencoba sendiri.
Saya harap artikel saya bermanfaat bagi Anda, dan akan menjadi lebih mudah untuk mengatur huruf. Tetapi jika tidak, maka saya meminta Anda untuk tidak menguranginya artikel, tetapi membantu saya memperbaikinya menjadi bentuk yang mudah dicerna dengan meninggalkan komentar Anda.