デザインシステム上の画像リソースを 自動エクスポートする / Automate image export from Figma to iOS and Android using figma-export

https://techfeed.io/events/techfeed-experts-night-3
https://github.com/RedMadRobot/figma-export

Transcript

1. TechFeed Experts Night #3 2022/09/07 REALITY株式会社 iOSエンジニア Yuto Yazaki デザインシステム上の画像リソースを 自動エクスポートする
2. 自己紹介 2 • 矢﨑 雄人 / Yuto Yazaki • REALITY株式会社 • iOSエンジニア
4. メタバース = 3D要素が多いのでは？ 実はネイティブの開発領域が多いです！ 4
5. REALITYでの画像リソースの管理
6. 今までの画像リソースの管理 6 • プロダクトデザイナーがFigmaでデザインを作成 • エンジニアが画像ファイルに書き出し • Xcode / Android Studio へ取り込む Figma上の画像やアイコン達は日々増えていく ※今回はiOSをベースにお話します ↑この部分、地味に考えることが多い...
7. 画像リソースをFigmaから書き出す時の課題
8. 1. PNGなのかSVGなのか 8 • 書き出しフォーマットを選択する ベクター画像はSVG イラスト画像はPNG
9. 2. ダークモード対応 9 • ライトモード/ダークモードで2種類の画像を用意 • でも単色のアイコンは1種類でOK ダークモードとライトモードで画像が違う
10. 3. TemplateなのかOriginalなのか 10 • 単色のアイコンは UIImage.RenderingMode.alwaysTemplate で描画 • アプリ側で任意の色を当てる • 複数色のアイコンは UIImage.RenderingMode.alwaysOriginal で描画 • 画像をそのまま表示する Templateで描画すると 塗りつぶされる Originalで描画すると 画像がそのまま表示される 1つのリソースで ライト/ダークモード両対応 ライト/ダークモードで 2種類のリソースを用意する
11. 4. 命名規則 11 • Figmaのコンポーネントは”/“区切りで管理 • Figma上で階層構造になる • 書き出した時も階層構造になる... Figma上で階層構造になる(見やすい) フォルダの奥深くに書き出される よしなに命名してた結果xcassetsがカオスに...
12. 手作業で画像リソースを書き出す時の課題 12 • PNGなのかSVGなのか • ダークモード対応 • TemplateなのかOriginalなのか • 命名規則
13. figma-exportで画像の書き出しを自動化する
14. figma-exportとは 14 • コマンドラインツール • https://github.com/RedMadRobot/figma-export • Figmaのcolor, typography, icon, imageを書き出して、 Xcode / Android Studioへ取り込むツール • 命名規則や書き出しフォーマットのルールに則って、 Figmaのデザインデータを用意する
15. Figmaのデザインデータを準備 15 • frameの中に書き出したいcomponentをまとめる • master componentが書き出し対象になる ※画像は開発途中の物
16. figma-export.ymlの設定 16 figma: lightFileId: {figma_file_id} common: icons: figmaFrameName: Icons nameValidateRegexp: '^(Lv1_Icon_)(.*)' nameReplaceRegexp: 'icon_$2' useSingleFile: true darkModeSuffix: '-dark' ~~中略~~ ios: xcodeprojPath: 'path/to/.xcodeproj' target: 'target_name' xcassetsPath: 'path/to/.xcassets' ~~中略~~ icons: format: svg assetsFolder: nameStyle: snake_case renderMode: template renderModeOriginalSuffix: '-original' FigmaのファイルIDを指定 Xcodeの出力先を指定 Figmaのframe名と componentの命名規則を定義
17. figma-exportを実行 17 • Figmaのアクセストークンを環境変数に入れて • figma-export icons -i figma-export.yml を実行 yuto.yazaki: figma-export-action$ export FIGMA_PERSONAL_TOKEN=********* yuto.yazaki: figma-export-action$ figma-export icons -i figma-export.yml 2022-09-07T14:21:41+0900 info com.redmadrobot.figma-export : Using FigmaExport 0.35.2 to export icons to Xcode project. 2022-09-07T14:21:41+0900 info com.redmadrobot.figma-export : Fetching icons info from Figma. Please wait... 2022-09-07T14:21:42+0900 info com.redmadrobot.figma-export : Fetching vector images... 2022-09-07T14:21:44+0900 info com.redmadrobot.figma-export : Processing icons... 2022-09-07T14:21:44+0900 info com.redmadrobot.figma-export : Downloading remote files... 2022-09-07T14:21:45+0900 info com.redmadrobot.figma-export.file-downloader : Downloaded 1/4 2022-09-07T14:21:46+0900 info com.redmadrobot.figma-export.file-downloader : Downloaded 2/4 2022-09-07T14:21:46+0900 info com.redmadrobot.figma-export.file-downloader : Downloaded 3/4 2022-09-07T14:21:46+0900 info com.redmadrobot.figma-export.file-downloader : Downloaded 4/4 2022-09-07T14:21:46+0900 info com.redmadrobot.figma-export : Writting files to Xcode project... 2022-09-07T14:21:47+0900 info com.redmadrobot.figma-export : Done! これでXcodeプロジェクトのxcassetsへ画像が書き出される！
18. figma-exportでXcodeへ書き出し① 18 • component名に “-dark” を付けるとダークモード用に Figma Xcode コレ
19. figma-exportでXcodeへ書き出し② 19 • “-original” を付けると UIImage.RenderingMode.alwaysOriginal に Figma Xcode コレ originalになる
20. GitHub Actionsで実行してPRを投げる 20 Figmaでデザインした物が自動でXcodeに取り込まれる！
21. まとめ
22. まとめ 22 • Figma上の画像の書き出しをfigma-exportで自動化 • 手動で書き出す煩わしさを解決 • Figmaと実装で画像リソースが同期する • REALITYではまだ導入したばかり • (というより、これから運用します) • 運用してみて気づく想定外の考慮漏れがあるかも...?
23. ありがとうございました