Jika Anda adalah pengembang iOS atau Android dan desain proyek Anda dikembangkan di Figma, kemungkinan besar Anda mengalami masalah saat mengekspor sumber daya: warna tidak dapat diturunkan, dan ikon serta gambar tidak nyaman untuk diekspor. Pada artikel ini, saya akan memberi tahu Anda bagaimana Anda dapat membuat hidup Anda lebih mudah dan mengotomatiskan ekspor UI-Kit dari Figma langsung ke Xcode dan Android Studio.
Semakin banyak tim pengembangan seluler yang beralih ke Figma. Sebelumnya, banyak (dan kami juga) menggunakan paket Sketch + Zeplin atau Figma + Zeplin. Dan itu nyaman. Tetapi ketika kami menambahkan dukungan untuk tema gelap pada salah satu proyek, situasinya menjadi lebih buruk. Zeplin tidak mendukung tema gelap, jadi Anda harus mencari solusi yang membuat Anda berpikir: apakah Zeplin diperlukan sekarang? Dalam hal ini, Zeplin hanya membuang-buang waktu perancang untuk memelihara dan menyinkronkan proyek dalam dua alat, serta biaya tambahan bagi perusahaan.
Setelah membuang Zeplin dan pindah ke Figma, kami (pengembang) mulai mengalami kesulitan mengekspor UI-Kit dari Figma.
Figma, tidak seperti Zeplin, tidak berinteraksi dengan Xcode atau Android Studio dengan cara apa pun. Plugin mencegah Figma berintegrasi erat dengannya. Kami menemukan utilitas baris perintah yang mengekspor warna dan gaya teks, tetapi tidak berhasil untuk kami - tidak mendukung mengekspor gambar dan tema gelap. Itulah mengapa saya menulis utilitas saya.
Tapi sedikit lebih detail tentang masalahnya.
Mengapa tidak nyaman bagi pengembang seluler untuk mengekspor aset dari Figma
Masalah # 1: Tidak dapat mengekspor warna
Apa yang kita - pengembang lihat ketika kita membuka UI-Kit di Figma? Dalam kasus paling sederhana, beberapa lingkaran dengan warna berbeda.
Tetapi jika proyeknya besar dan mendukung tema gelap, palet akan berisi lebih banyak warna:
Berencana menambahkan dukungan tema gelap? Lihat seberapa besar ukuran palet
Figma tidak memiliki kemampuan untuk mengekspor warna. Paling banyak yang dapat Anda lakukan adalah memilih warna dan menyalin nilai HEX. Dan jika desainer mengubah sesuatu, maka dalam kasus palet besar, pengembang harus menghabiskan banyak waktu untuk membandingkan palet dalam kode dan Figma.
Nama warna juga tidak selalu berfungsi dengan baik untuk disalin. Beberapa desainer menggunakan karakter "/" dalam nama gaya, tetapi tidak didukung di iOS dan Android. Simbol ini diperlukan untuk mengelompokkan warna ke dalam kelompok.
Contoh. Warna di Figma dinamai background / primer . Untuk pengembang Android, Anda perlu menentukan warna yang disebut background_primary , dan untuk pengembang iOS, backgroundPrimary .
Masalah lain dengan warna adalah tema gelap. Tidak ada alat desainer (Figma, Zeplin, Sketch) yang memungkinkan Anda memiliki palet gelap dan terang secara bersamaan. Ada dua pendekatan di sini: buat file terpisah dengan palet gelap, atau simpan semua warna dalam satu file, tetapi beri nama dengan postfix, misalnya, background_primary_day, background_primary_night.
Yang kami inginkan sebagai developer adalah dapat mengekspor palet warna dari Figma langsung ke proyek Xcode atau Android Studio.
Masalah # 2: Ekspor ikon yang tidak nyaman menggunakan alat standar
Ada juga beberapa kesulitan di sini.
Sekali lagi, desainer menggunakan karakter "/" dalam nama ikon untuk mengelompokkan ikon. Misalnya, jika ikon dengan nama ic / 24 / tab / profile diekspor menggunakan alat Figma standar, kita akan mendapatkan penyarangan seperti itu.
Tidak mungkin untuk bekerja dengan ini. Saya harus mengganti nama file. File tersebut harus diberi nama ic24TabProfile.pdf . Ini untuk pengembang iOS.
Untuk developer Android, biasanya menamai resource dengan gaya snake_case . Dalam kasus ini, file akan diberi nama ic_24_tab_profile.xml. Tapi Figma tidak melakukan itu.
Ikon yang diekspor dari Figma harus ditransfer secara manual ke proyek. Dan tidak cukup bagi pengembang iOS hanya dengan memigrasi mereka. Setiap ikon harus ditandai dengan: Pertahankan Data Vektor, Skala Tunggal, Render sebagai Gambar Template.
Yang kami inginkan sebagai developer adalah dapat mengekspor semua ikon Figma langsung ke project Xcode atau Android Studio.
Masalah # 3: Ekspor ilustrasi yang tidak nyaman menggunakan alat standar
Ikon adalah gambar vektor kecil, seringkali hitam dan putih, dan dapat diwarnai ulang (oleh sistem atau oleh pengembang) dan diubah ukurannya. Jika Anda mengaktifkan aksesibilitas, beberapa ikon akan bertambah dengan teks. Masalah utama mereka adalah nama: karakter "/", yang saya sebutkan di atas, dan fakta bahwa pengembang iOS menggunakan nama camelCase, dan pengembang Android menggunakan snake_case.
Ilustrasi adalah gambar berwarna besar yang berbeda dalam tema gelap dan terang. Dalam tema gelap, warna harus diredam. Jika ilustrasinya terlalu terang, maka berdiri melawan kegelapan, itu akan "mengenai" dengan cahaya terang di mata.
Ilustrasi memiliki masalah yang sama dengan ikon, tetapi ada juga beberapa masalah baru.
Pengembang Android mengekspor ikon dan ilustrasi Figma sebagai file SVG, kemudian, menggunakan alat bawaan Android Studio, mengonversi file SVG menjadi file XML drawable vektor. Jika Anda perlu mengekspor 50 ikon atau ilustrasi, akan membutuhkan waktu lama untuk mengonversi semuanya. Ini bisa otomatis.
Pengembang iOS mengekspor ilustrasi sebagai bitmap dalam tiga skala. Jika aplikasi mendukung tema gelap, maka total akan ada 6 gambar. Ini adalah tampilannya dalam proyek iOS:
Sekarang mari kita bayangkan bahwa kita telah membongkar 50 ilustrasi dari Figma. Ternyata kita memiliki 50 * 6 = 300 gambar PNG yang harus ditransfer secara manual ke proyek melalui drag & drop, dan kemudian semuanya, sekali lagi, harus diganti namanya secara manual. Apakah Anda ingin melakukan ini? - tidak. Ada hal yang lebih penting untuk dilakukan ...
Yang kami inginkan sebagai developer adalah dapat mengekspor semua ilustrasi Figma langsung ke project Xcode atau Android Studio.
Mengapa Zeplin tidak membantu:
- itu tidak mendukung tema gelap;
- tidak mengizinkan Anda untuk memiliki beberapa warna dengan nilai HEX yang sama, tetapi nama yang berbeda: jika Anda memberi nama warna sesuai dengan tempat aplikasinya, mungkin saja dua warna akan memiliki nama yang berbeda, tetapi nilai HEX yang sama. Misalnya, backgroundPrimaryPressed (warna latar utama saat ditekan) dan backgroundSecondary (warna latar belakang) harus memiliki nilai HEX yang sama. Zeplin tidak akan membiarkanmu melakukan itu. Ada solusi - ubah nilai HEX ke nilai serendah mungkin. Contoh # F4F5F8 dan # F4F5F7;
- membutuhkan sumber daya desainer tambahan untuk menyinkronkan tata letak dan kit UI dengan Figma;
- itu membutuhkan uang tambahan. Figma berharga $ 12 per desainer per bulan untuk sebuah organisasi. Jika Anda membeli Zeplin, itu berarti $ 10,75 lagi per desainer per bulan;
Bagaimana kami mengotomatiskan ekspor aset dari Figma
Menyadari bahwa ini tidak mungkin lagi untuk hidup seperti ini, saya melihat apakah Figma memiliki API atau kemampuan untuk memperluas dengan plugin untuk mengotomatiskan ekspor, dan ternyata memang demikian. Saya memiliki dua jalur: menulis plugin Figma atau menggunakan API Figma .
Plugin Figma bekerja langsung di aplikasi Figma. Dengan Figma API, Anda dapat menulis utilitas konsol. Plugin tidak hanya dapat membaca informasi dari file Figma, tetapi juga membuat perubahan pada file tersebut. Karenanya, plugin Figma mengharuskan pengembang memiliki izin untuk mengedit file. Figma API hanya dapat membaca informasi dari file Figma.
Plugin ini ditulis dalam JavaScript. Dengan menggunakan Figma API, Anda dapat menulis pembungkus di sekitar apa pun. Tetapi plugin Figma tidak dapat bekerja dengan sistem file di komputer pengembang (pengguna). Itulah mengapa saya tidak melakukannya.
Saya seorang pengembang iOS, jadi saya memutuskan untuk membuat utilitas konsol di Swift. Saya mulai dengan prototipe yang harus mengekspor palet warna dari Figma langsung ke proyek Xcode. Dalam beberapa minggu itu sudah siap. Itu adalah sesuatu. Saya menjalankan utilitas saya dan setelah beberapa detik saya mendapatkan seluruh palet di Xcode. Beginilah cara kerja ekspor Figma yang sempurna :)
Setelah beberapa bulan, utilitas saya untuk mengekspor aset dari Figma sudah siap. Anda dapat menemukan tautannya di akhir artikel.
Bagaimana proses ekspor bekerja
Warna
Pengembang memanggil perintah tersebut
figma-export colors. Jika ini adalah proyek iOS, warnanya diekspor ke folder Assets.xcassets .
Selain itu, file Color.swift dibuat sehingga Anda dapat menggunakan warna langsung dari kode.
import UIKit
extension UIColor {
static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
static var backgroundVideo: UIColor { return UIColor(named: #function)! }
...
}
Jika ini adalah proyek Android, warna akan diekspor ke values / colors.xml dan values-night / colors.xml jika tema gelap didukung.
nilai / warna.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#7701FF</color>
<color name="button_ripple">#8A80FF</color>
<color name="button_disabled">#D9DCE1</color>
<color name="text_primary">#FFFFFC</color>
<color name="text_primary_pressed">#A680FE</color>
<color name="text_primary_disabled">#FFFFFE</color>
<color name="text_secondary">#101828</color>
<color name="text_tertiary">#A5ACBD</color>
...
values-night / colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#6F01EC</color>
<color name="button_ripple">#7D6AF0</color>
<color name="button_disabled">#3F334B</color>
<color name="text_primary">#E6D9F6</color>
<color name="text_primary_pressed">#E6D9F3</color>
<color name="text_primary_disabled">#544761</color>
<color name="text_secondary">#E6D9F5</color>
<color name="text_tertiary">#7B6F98</color>
...
Ikon
Pengembang memanggil perintah Jika ini adalah proyek iOS, ikon akan diekspor sebagai file PDF dengan parameter Render as Template Image ke folder Assets.xcassets . Jika ikon akan digunakan di UITabBar , maka secara opsional Anda dapat menentukan Pertahankan Data Vektor untuk mendukung Aksesibilitas. Jika ini adalah proyek Android, ikon akan diekspor ke folder drawable sebagai file vektor xml. Di balik terpal, utilitas tersebut mengonversi file SVG ke XML menggunakan vd-tool resmi (vector-drawable-tool) yang digunakan oleh Android Studio.
figma-export icons.
Ilustrasi
Pengembang memanggil perintah tersebut. Semuanya sama, hanya gambar yang diekspor sebagai file PNG. Jika ini adalah proyek Android, ilustrasi akan diekspor ke folder drawable dan drawable-night sebagai file vektor xml.
figma-export images.
Bagaimana ekspor dapat dikonfigurasi
FigmaExport memiliki banyak pengaturan yang disimpan dalam file konfigurasi dan diteruskan saat utilitas dimulai.
./figma-export colors -i figma-export.yaml
File konfigurasi menentukan parameter untuk iOS, untuk Android dan parameter umum. Ini juga berisi pengenal file Figma, di mana warna, ikon dan gambar berada. ID file dapat ditemukan di bilah alamat jika Anda membukanya di browser.
Misalnya, berikut adalah alamat UI-Kit kami: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit
Pengenal file lightFileId dalam kasus kami: GVHjNNE8PKKRf1KtnMPY9m
Contoh file konfigurasi untuk proyek iOS:
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
ios:
# Path to the Assets.xcassets directory
xcassetsPath: "./Resources/Assets.xcassets"
# Parameters for exporting colors
colors:
# Should be generate color assets instead of pure swift code
useColorAssets: True
# Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
assetsFolder: Colors
# Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
colorSwift: "./Sources/Presentation/Common/Color.swift"
# Color name style: camelCase or snake_case
nameStyle: camelCase
# Parameters for exporting icons
icons:
# Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
assetsFolder: Icons
# Icon name style: camelCase or snake_case
nameStyle: camelCase
# [optional] Enable Preserve Vector Data for specified icons
preservesVectorRepresentation:
- ic24TabMain
- ic24TabHistory
- ic24TabProfile
# Parameters for exporting images
images:
# Name of the folder inside Assets.xcassets where to place images (.imageset directories)
assetsFolder: Illustrations
# Image name style: camelCase or snake_case
nameStyle: camelCase
Contoh file konfigurasi untuk proyek Android:
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
mainRes: "./main/res"Bagaimana mengatur file Figma untuk ekspor sumber daya otomatis
Agar UI-Kit diturunkan secara otomatis, aturan berikut harus dipatuhi.
Umum
- Jika warna, ikon, atau ilustrasi unik untuk iOS atau Android dalam propertinya, kolom deskripsi harus berisi "ios" atau "android" . Jika warna, ikon, atau ilustrasi tidak tersedia untuk ekspor, properti deskripsinya akan memiliki "tidak ada" . Dengan demikian, FigmaExport akan menentukan apa yang harus diekspor ke proyek iOS, apa itu proyek Android, dan apa yang tidak boleh diekspor sama sekali.
Contoh. Ikon bagikan terlihat berbeda di iOS dan Android. Tangkapan layar di bawah ini menunjukkan bahwa ikon ic24ShareIos hanya akan diekspor ke proyek iOS. ios ditentukan dalam properti deskripsi Komponen, dan ikon ic24ShareAndroid hanya akan diekspor ke proyek Android;
- Ikon dan ilustrasi harus menjadi komponen.
- Gaya warna dan komponen harus diterbitkan di Perpustakaan Tim.
- Hanya ikon dan ilustrasi yang ditambahkan ke bingkai Ikon dan Ilustrasi yang diekspor.
Contoh
File-Figma dengan UI-Kit (tema terang)
File-Figma dengan UI-Kit (tema gelap)
Nama sumber daya
Warna, ikon dan ilustrasi dapat disebut nama apapun yang mengandung huruf az, AZ dan simbol "_" dan "/".
Karena nama variabel dalam kode tidak boleh memiliki simbol “/”, FigmaExport secara otomatis menggantinya dengan simbol “_”. Kemudian string yang dihasilkan diubah menjadi camelCase untuk iOS atau snake_case untuk Android.
| Nama warna | iOS | Android |
|---|---|---|
| tombol / ditekan | tombol Ditekan | button_pressed |
| background / primaryPressed | backgroundPrimaryPressed | background_primary_pressed |
| Nama ikon | iOS | Android |
|---|---|---|
| ic / 24 / sound_off
|
ic24SoundOff
|
ic_24_sound_off |
| Judul ilustrasi | iOS | Android |
|---|---|---|
| img / demo / camera_archive
|
imgDemoCameraArchive
|
img_demo_camera_archive
|
Untuk konsistensi dan kenyamanan, Anda dapat, misalnya, memberi nama semua ikon dalam format Anda sendiri - ic / size / name . Contohnya adalah ic / 24 / open . Dan ilustrasinya adalah img / group / title . Contohnya adalah img / zero / nointernet. Anda dapat membaca tentang warna di artikel "Perancang aplikasi: cara membuat dan mentransfer tema gelap" .
Di file konfigurasi figma-export.yaml, Anda dapat menggunakan ekspresi reguler untuk mengaktifkan validasi nama sebelum ekspor. Jika sumber daya memiliki nama yang salah, FigmaExport akan melaporkannya.
common:
colors:
# RegExp pattern for color name validation before exporting
nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background
icons:
# RegExp pattern for icon name validation before exporting
nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
images:
# RegExp pattern for image name validation before exporting
nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name
Tema gelap
Jika proyek Anda mendukung tema gelap, Anda perlu membuat file terpisah dengan komponen UI, yang akan berisi palet warna gelap dan ilustrasi gelap.
Warna
Dalam file Figma, warna harus diberi gaya sebagai gaya warna dan dipublikasikan ke Perpustakaan Tim.
Untuk kenyamanan pengembang, disarankan untuk membuat tabel dari semua warna, yang akan menunjukkan warna apa dan di mana itu digunakan.
Ikon
File Figma harus memiliki Frame bernama Ikon. Frame ini harus berisi komponen untuk setiap ikon. Contoh:
Ilustrasi
File Figma harus memiliki Bingkai bernama Ilustrasi, yang berisi komponen untuk setiap ilustrasi. Contoh:
Hasil
Berkat FigmaExport, kami berhasil mengatasi banyak masalah saat bekerja dengan Figma. Mengekspor sumber daya sekarang membutuhkan beberapa detik. Beberapa contoh bagaimana menggunakan utilitas membuat hidup kita lebih mudah.
1. Salah satu proyek memiliki 52 ikon. Perancang memutuskan bahwa mereka semua perlu dibawa ke gaya yang sama. Setelah dia memperbaruinya, kami harus memperbaruinya di rumah.
Bagaimana kami memperbaruinya secara manual: mengekspor semua ikon dari Figma sebagai file zip, mengganti nama 52 file, mentransfer ikon ke proyek, mengatur semua properti yang diperlukan, memastikan bahwa mereka tidak melupakan apa pun. Ini akan memakan waktu setidaknya satu jam.
Bagaimana kami memperbaruinya dari FigmaExport: kami menjalankan perintah figma-export icons.Setelah 10 detik, semua perubahan diperketat, kami meluncurkan aplikasi di simulator dan melihat bahwa semua ikon diganti.
2. Di salah satu sprint, kami memutuskan untuk merilis fitur baru. Di UI-Kit, desainer menambahkan empat ikon baru, menghapus dua ikon lama, dan menambahkan dua warna baru.
Alih-alih menghabiskan satu jam waktu berdiskusi dengan desainer apa yang dia ubah di UI-Kit, mengekspor ikon dan warna secara manual, kami hanya menjalankan perintah figma-export colors dan figma-export icons dan melalui Git kami melihat apa yang telah dihapus, apa yang ditambahkan, dan apa yang berubah. Dan mereka segera mulai membuat tata letak menggunakan ikon dan warna baru.
3. Kami membuat fitur yang diperlukan untuk membuat orientasi lanjutan dengan 4 bagian, yang masing-masing memiliki hingga 7 halaman dengan gambar.
Ekspor manual akan memakan waktu lama. Setelah menjalankan perintah figma-export images dalam waktu kurang dari satu menit, kami mendapatkan semua gambar ini dalam proyek, siap digunakan.
Beberapa kontra
- Perlu ada kesepakatan dengan desainer tentang cara menyimpan warna, ikon, gambar di UI-Kit agar dapat secara otomatis diturunkan.
- Ekspor hanya berfungsi untuk komponen yang ditambahkan ke Perpustakaan Tim, jadi desainer harus memiliki langganan Figma berbayar.
Rencana:
- tambahkan kemampuan untuk mengekspor gaya teks,
- menambahkan kemampuan untuk mengekspor gambar bitmap untuk Android,
- tambahkan dukungan SwiftUI.
Terima kasih khusus kepada Artur Abrarov dan Katya Rokityan karena telah membantu menyelesaikan UI-Kit.
Tautan utilitas
Unduh FigmaExport di GitHub .
Saya akan senang jika Anda mencoba utilitas saya. Pertanyaan, keinginan, umpan balik - tulis kepada saya di d.subbotin@redmadrobot.com