Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインシステム上の画像リソースを
自動エクスポートする / 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
    デザインシステム上の画像リソースを
    自動エクスポートする

    View full-size slide

  2. 自己紹介
    2
    • 矢﨑 雄人 / Yuto Yazaki
    • REALITY株式会社
    • iOSエンジニア

    View full-size slide

  3. メタバース = 3D要素が多いのでは?
    実はネイティブの開発領域が多いです!
    4

    View full-size slide

  4. REALITYでの画像リソースの管理

    View full-size slide

  5. 今までの画像リソースの管理
    6
    • プロダクトデザイナーがFigmaでデザインを作成
    • エンジニアが画像ファイルに書き出し
    • Xcode / Android Studio へ取り込む
    Figma上の画像やアイコン達は日々増えていく
    ※今回はiOSをベースにお話します
    ↑この部分、地味に考えることが多い...

    View full-size slide

  6. 画像リソースをFigmaから書き出す時の課題

    View full-size slide

  7. 1. PNGなのかSVGなのか
    8
    • 書き出しフォーマットを選択する
    ベクター画像はSVG イラスト画像はPNG

    View full-size slide

  8. 2. ダークモード対応
    9
    • ライトモード/ダークモードで2種類の画像を用意
    • でも単色のアイコンは1種類でOK
    ダークモードとライトモードで画像が違う

    View full-size slide

  9. 3. TemplateなのかOriginalなのか
    10
    • 単色のアイコンは UIImage.RenderingMode.alwaysTemplate で描画
    • アプリ側で任意の色を当てる
    • 複数色のアイコンは UIImage.RenderingMode.alwaysOriginal で描画
    • 画像をそのまま表示する
    Templateで描画すると
    塗りつぶされる
    Originalで描画すると
    画像がそのまま表示される
    1つのリソースで
    ライト/ダークモード両対応
    ライト/ダークモードで
    2種類のリソースを用意する

    View full-size slide

  10. 4. 命名規則
    11
    • Figmaのコンポーネントは”/“区切りで管理
    • Figma上で階層構造になる
    • 書き出した時も階層構造になる...
    Figma上で階層構造になる(見やすい)
    フォルダの奥深くに書き出される
    よしなに命名してた結果xcassetsがカオスに...

    View full-size slide

  11. 手作業で画像リソースを書き出す時の課題
    12
    • PNGなのかSVGなのか
    • ダークモード対応
    • TemplateなのかOriginalなのか
    • 命名規則

    View full-size slide

  12. figma-exportで画像の書き出しを自動化する

    View full-size slide

  13. figma-exportとは
    14
    • コマンドラインツール
    • https://github.com/RedMadRobot/figma-export
    • Figmaのcolor, typography, icon, imageを書き出して、
    Xcode / Android Studioへ取り込むツール
    • 命名規則や書き出しフォーマットのルールに則って、
    Figmaのデザインデータを用意する

    View full-size slide

  14. Figmaのデザインデータを準備
    15
    • frameの中に書き出したいcomponentをまとめる
    • master componentが書き出し対象になる
    ※画像は開発途中の物

    View full-size slide

  15. 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の命名規則を定義

    View full-size slide

  16. 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へ画像が書き出される!

    View full-size slide

  17. figma-exportでXcodeへ書き出し①
    18
    • component名に “-dark” を付けるとダークモード用に
    Figma
    Xcode
    コレ

    View full-size slide

  18. figma-exportでXcodeへ書き出し②
    19
    • “-original” を付けると UIImage.RenderingMode.alwaysOriginal に
    Figma Xcode
    コレ
    originalになる

    View full-size slide

  19. GitHub Actionsで実行してPRを投げる
    20
    Figmaでデザインした物が自動でXcodeに取り込まれる!

    View full-size slide

  20. まとめ
    22
    • Figma上の画像の書き出しをfigma-exportで自動化
    • 手動で書き出す煩わしさを解決
    • Figmaと実装で画像リソースが同期する
    • REALITYではまだ導入したばかり
    • (というより、これから運用します)
    • 運用してみて気づく想定外の考慮漏れがあるかも...?

    View full-size slide

  21. ありがとうございました

    View full-size slide