$30 off During Our Annual Pro Sale. View Details »

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

Yuto Yazaki
September 08, 2022

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

Yuto Yazaki

September 08, 2022
Tweet

More Decks by Yuto Yazaki

Other Decks in Programming

Transcript

  1. TechFeed Experts Night #3 2022/09/07 REALITY株式会社 iOSエンジニア Yuto Yazaki デザインシステム上の画像リソースを

    自動エクスポートする
  2. 自己紹介 2 • 矢﨑 雄人 / Yuto Yazaki • REALITY株式会社

    • iOSエンジニア
  3. 3

  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. ありがとうございました