🎧 👩🏾‍🔧 🎸 FigmaExport：FigmaからXcodeおよびAndroidStudioプロジェクトへのUIキットのエクスポートを自動化する方法 🤳🏻 😹 👧🏽

iOSまたはAndroidの開発者で、プロジェクトのデザインがFigmaで開発されている場合、リソースをエクスポートするときに問題が発生する可能性があります。色をアンロードできない、アイコンや画像をエクスポートするのが不便です。この記事では、あなたの生活を楽にし、FigmaからXcodeとAndroidStudioへのUI-Kitのエクスポートを自動化する方法を説明します。

ますます多くのモバイル開発チームがFigmaに切り替えています。以前は、多くの人（そして私たちも）がSketch + ZeplinまたはFigma + Zeplinのバンドルを使用していました。そして便利でした。しかし、プロジェクトの1つでダークテーマのサポートを追加すると、状況はさらに悪化しました。 Zeplinは暗いテーマをサポートしていないため、考えさせる回避策を探す必要があります。Zeplinは今必要ですか？この場合、Zeplinは、2つのツールでプロジェクトを維持および同期する設計者の時間の無駄であり、会社の追加コストもかかります。

Zeplinを捨ててFigmaに移動した後、私たち（開発者）はFigmaからUI-Kitをエクスポートするのに苦労し始めました。

Figmaは、Zeplinとは異なり、XcodeやAndroidStudioとはまったく相互作用しません。プラグインは、Figmaがプラグインと緊密に統合するのを防ぎます。色とテキストスタイルをエクスポートするコマンドラインユーティリティを見つけましたが、機能しませんでした。画像と暗いテーマのエクスポートはサポートされていませんでした。それが私が自分のユーティリティを書いた理由です。

しかし、問題についてもう少し詳しく説明します。

モバイル開発者がFigmaから資産をエクスポートするのが不便なのはなぜですか

問題＃1：色をエクスポートできない

FigmaでUI-Kitを開くと、開発者には何が表示されますか？最も単純なケースでは、異なる色のいくつかの円。

ただし、プロジェクトが大きく、暗いテーマをサポートしている場合、パレットにはさらに多くの色が含まれます。

ダークテーマのサポートを追加する予定ですか？パレットがどれだけ大きくなるかを見る

Figmaには色をエクスポートする機能がありません。最もできることは、色を選択してHEX値をコピーすることです。また、設計者が何かを変更した場合、大きなパレットの場合、開発者はコードとFigmaでパレットを比較するために多くの時間を費やす必要があります。

色の名前も、コピーするのに必ずしもうまく機能するとは限りません。一部のデザイナーはスタイル名に「/」文字を使用していますが、iOSおよびAndroidではサポートされていません。この記号は、色をグループにグループ化するために必要です。

例。 Figmaの色はbackground / primaryという名前です。 Android開発者の場合はbackground_primaryという色を指定する必要があり、iOS開発者の場合はbackgroundPrimaryを指定する必要があります。

色に関するもう1つの問題は、暗いテーマです。デザイナーツール（Figma、Zeplin、Sketch）では、暗いパレットと明るいパレットを同時に使用することはできません。ここには2つのアプローチがあります。暗いパレットで別のファイルを作成するか、すべての色を1つのファイルに保存しますが、名前を後置で付けます（例：background_primary_day、background_primary_night）。

開発者として私たちが望んでいるのは、カラーパレットをFigmaからXcodeまたはAndroidStudioプロジェクトに直接エクスポートできることです。

問題＃2：標準ツールを使用したアイコンの不便なエクスポート

ここにもいくつかの問題があります。

繰り返しになりますが、設計者がアイコンの名前に「/」文字を使用してアイコンをグループ化することがあります。たとえば、ic / 24 / tab / profileという名前のアイコンが標準のFigmaツールを使用してエクスポートされた場合、そのようなネストが発生します。

これで作業することは不可能です。ファイルの名前を変更する必要があります。ファイルの名前はic24TabProfile.pdfにする必要があります。これはiOS開発者向けです。

Android開発者の場合、リソースにsnake_caseスタイルで名前を付けるのが通例です。この場合、ファイルの名前はic_24_tab_profile.xmlになります。しかし、Figmaはそれをしません。

Figmaからエクスポートされたアイコンは、手動でプロジェクトに転送する必要があります。そして、iOS開発者がそれらを移行するだけでは十分ではありません。アイコンごとに下に置く必要があります：ベクトルデータの保存、シングルスケール、テンプレート画像としてのレンダリング。

開発者として私たちが望んでいるのは、すべてのFigmaアイコンをXcodeまたはAndroidStudioプロジェクトに直接エクスポートできることです。

問題＃3：標準ツールを使用したイラストの不便なエクスポート

アイコンは小さなベクター画像であり、多くの場合白黒であり、（システムまたは開発者が）色を変更したり、サイズを変更したりできます。アクセシビリティを有効にすると、一部のアイコンはテキストとともに大きくなります。彼らの主な問題は名前です：私が上で述べた「/」文字、そしてiOS開発者がcamelCase名を使用し、Android開発者がsnake_caseを使用するという事実。

イラストは、暗いテーマと明るいテーマが異なる大きなカラー画像です。暗いテーマでは、色をミュートする必要があります。イラストが明るすぎて、暗闇に対して目立つ場合、目の明るい光で「ヒット」します。

イラストにはアイコンと同じ問題がありますが、新しいものもいくつかあります。

Android開発者は、FigmaアイコンとイラストをSVGファイルとしてエクスポートし、Android Studioの組み込みツールを使用して、SVGファイルをベクタードローアブルXMLファイルに変換します。 50個のアイコンやイラストをエクスポートする必要がある場合、それらすべてを変換するのに長い時間がかかります。これは自動化できます。

iOS開発者は、イラストを3つのスケールのビットマップとしてエクスポートします。アプリケーションが暗いテーマをサポートしている場合、合計6つの画像があります。これがiOSプロジェクトでの外観です。

ここで、Figmaから50個のイラストをアンロードしたと想像してみましょう。 50 * 6 = 300のPNG画像があり、ドラッグアンドドロップでプロジェクトに手動で転送してから、すべての名前を手動で変更する必要があることがわかりました。あなたはこれをしたいですか？ - 番号。やるべきもっと重要なことがあります...

開発者として私たちが望んでいるのは、すべてのFigmaイラストをXcodeまたはAndroidStudioプロジェクトに直接エクスポートできることです。

Zeplinが役に立たなかった理由：

ダークテーマはサポートしていません。
HEX値が同じで名前が異なる複数の色を使用することはできません。アプリケーションの場所に応じて色に名前を付けると、2つの色の名前が異なり、HEX値が同じになる場合があります。たとえば、backgroundPrimaryPressed（押されたときの前景色）とbackgroundSecondary（背景色）は同じHEX値である必要があります。Zeplinはあなたにそれをさせません。回避策があります-HEX値を可能な限り低い値に変更します。例＃F4F5F8および＃F4F5F7;
レイアウトとUIキットをFigmaと同期するには、追加のデザイナーリソースが必要です。
それは余分なお金がかかります。Figmaは、組織のデザイナー1人あたり月額12ドルの費用がかかります。Zeplinを購入した場合、デザイナー1人あたり月額10.75ドルになります。

Figmaからの資産のエクスポートを自動化した方法

これはもはやこのように生きることは不可能であることに気づき、私はFigmaにエクスポートを自動化するためのAPIまたはプラグインの拡張性があるかどうかを調べましたが、実際にそうなっていることがわかりました。2つのパスがありました。Figmaプラグインを作成するか、FigmaAPIを使用します。

FigmaプラグインはFigmaアプリで直接機能します。Figma APIを使用して、コンソールユーティリティを作成できます。プラグインは、Figmaファイルから情報を読み取るだけでなく、それらに変更を加えることもできます。このため、Figmaプラグインでは、開発者がファイルを編集する権限を持っている必要があります。Figma APIは、Figmaファイルからのみ情報を読み取ることができます。

プラグインはJavaScriptで書かれています。Figma APIを使用すると、あらゆるもののラッパーを作成できます。ただし、Figmaプラグインは、開発者（ユーザー）のコンピューター上のファイルシステムでは機能しません。だから私はそれをしませんでした。

私はiOS開発者なので、Swiftでコンソールユーティリティを作成することにしました。私は、カラーパレットをFigmaからXcodeプロジェクトに直接エクスポートする必要があるプロトタイプから始めました。彼は数週間で準備ができていました。それは何かでした。ユーティリティを実行し、数秒後にパレット全体をXcodeで取得しました。これが完璧なFigmaエクスポートの仕組みです:)

数か月後、Figmaからアセットをエクスポートするためのユーティリティの準備が整いました。記事の最後にそれへのリンクがあります。

エクスポートプロセスの仕組み

色

開発者はコマンドを呼び出しますfigma-export colors。iOSプロジェクトの場合、色はAssets.xcassetsフォルダーにエクスポートされます。

さらに、Color.swiftファイルが作成されるため、コードから直接色を使用できます。

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)! }
    ...
 }

Androidプロジェクトの場合、暗いテーマがサポートされている場合、色はvalues / colors.xmlおよびvalues-night / colors.xmlにエクスポートされます。

値/colors.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>
...

値-夜/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>
...

アイコン

開発者はコマンドを呼び出します。これがiOSプロジェクトの場合、アイコンはRender as TemplateImageパラメーターを使用してPDFファイルとしてAssets.xcassetsフォルダーにエクスポートされます。UITabBarでアイコンを使用する場合は、オプションで[ベクターデータの保持]を指定してアクセシビリティをサポートできます。 Androidプロジェクトの場合、アイコンはベクターxmlファイルとしてドローアブルフォルダーにエクスポートされます。内部的には、ユーティリティは、Android Studioで使用される公式のvd-tool（vector-drawable-tool）を使用してSVGファイルをXMLに変換します。figma-export icons.

イラスト

開発者がコマンドを呼び出します。すべて同じですが、画像のみがPNGファイルとしてエクスポートされます。 Androidプロジェクトの場合、イラストはベクターxmlファイルとしてdrawableおよびdrawable-nightフォルダーにエクスポートされます。figma-export images.

エクスポートの構成方法

FigmaExportには、構成ファイルに保存され、ユーティリティの起動時に渡される多くの設定があります。

./figma-export colors -i figma-export.yaml

構成ファイルは、iOSのパラメーター、Androidのパラメーター、および一般パラメーターを指定します。また、色、アイコン、画像が配置されているFigmaファイルの識別子も含まれています。ファイルIDは、ブラウザーで開くとアドレスバーに表示されます。

たとえば、UI-Kitのアドレスは次のとおりです。www.figma.com/ file / GVHjNNE8PKKRf1KtnMPY9m / RTC - Key -UI-kit

この場合のlightFileIdファイルの識別子：GVHjNNE8PKKRf1KtnMPY9m

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

Androidプロジェクトの構成ファイルの例：

---
figma:
  lightFileId: shPilWnVdJfo10YFo12345
  darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
  mainRes: "./main/res"

自動リソースエクスポート用にFigmaファイルを整理する方法

UI-Kitを自動的にアンロードするには、次のルールに従う必要があります。

一般

色、アイコン、またはイラストがそのプロパティでiOSまたはAndroidに固有である場合、説明フィールドには「ios」または「android」を含める必要があります。色、アイコン、またはイラストをエクスポートできない場合、それらの説明プロパティには「none」が含まれます。したがって、FigmaExportは、iOSプロジェクトにエクスポートする必要があるもの、Androidプロジェクトとは何か、およびまったくエクスポートしないものを決定します。

例。共有アイコンは、iOSとAndroidで異なって見えます。以下のスクリーンショットは、ic24ShareIosアイコンがiOSプロジェクトにのみエクスポートされることを示しています。iosはコンポーネントの説明プロパティで指定され、ic24ShareAndroidアイコンはAndroidプロジェクトにのみエクスポートされます。

アイコンとイラストはコンポーネントである必要があります。
カラースタイルとコンポーネントは、チームライブラリで公開する必要があります。
Icons andIllustrationsフレームに追加されたアイコンとイラストのみがエクスポートされます。

例

UI-Kitを使用したFigmaファイル（明るいテーマ）

UI-Kitを使用したFigmaファイル（暗いテーマ）

リソース名

色、アイコン、およびイラストは、文字az、AZ、および記号「_」と「/」を含む任意の名前と呼ぶことができます。

コード内の変数名に「/」記号を付けることはできないため、FigmaExportは自動的に「_」記号に置き換えます。次に、結果の文字列がiOSの場合はcamelCaseに、Androidの場合はsnake_caseに変換されます。

色名	iOS	アンドロイド
ボタン/押された	buttonPressed	button_pressed
背景/ primaryPressed	backgroundPrimaryPressed	background_primary_pressed

アイコン名	iOS	アンドロイド
ic / 24 / sound_off	ic24SoundOff	ic_24_sound_off

イラストのタイトル	iOS	アンドロイド
img /デモ/ camera_archive	imgDemoCameraArchive	img_demo_camera_archive

一貫性と利便性のために、たとえば、すべてのアイコンに独自の形式（ic / size / name）で名前を付けることができます。例はic / 24 / openです。そしてイラストはimg / group / titleです。例はimg / zero / nointernetです。色については、「アプリケーションデザイナー：暗いテーマを作成して転送する方法」の記事で読むことができます。

構成ファイルfigma-export.yamlでは、正規式を使用して、エクスポート前に名前の検証を有効にできます。リソースの名前が間違っている場合、FigmaExportはそれを報告します。


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

暗いテーマ

プロジェクトが暗いテーマをサポートしている場合は、UIコンポーネントを含む別のファイルを作成する必要があります。このファイルには、暗いカラーパレットと暗いイラストが含まれます。

色

Figmaファイルでは、色をカラースタイルとしてスタイル設定し、チームライブラリに公開する必要があります。

開発者の便宜のために、すべての色の表を作成することをお勧めします。これは、使用されている色と場所を示します。

Icons

Figmaファイルには、Iconsという名前のフレームが必要です。このフレームには、各アイコンのコンポーネントが含まれている必要があります。例：

イラスト

Figmaファイルには、各イラストのコンポーネントを含む、Illustrationsという名前のフレームが必要です。例：

結果

FigmaExportのおかげで、Figmaを使用する際の多くの問題を取り除くことができました。リソースのエクスポートに数秒かかるようになりました。ユーティリティの使用が私たちの生活をどのように楽にしてくれたかのいくつかの例。

1.プロジェクトの1つには52個のアイコンがありました。デザイナーは、それらすべてを同じスタイルにする必要があると判断しました。彼がそれらを更新した後、私たちは自宅でそれらを更新しなければなりませんでした。

手動で更新するにはどうすればよいですか。Figmaからすべてのアイコンをzipファイルとしてエクスポートし、52ファイルの名前を変更し、アイコンをプロジェクトに転送し、必要なすべてのプロパティを書き留めて、何も忘れないようにしました。少なくとも1時間かかります。

FigmaExportからそれらを更新する方法：figma- exporticonsコマンドを実行しました。10秒後、すべての変更が厳しくなり、シミュレーターでアプリケーションを起動すると、すべてのアイコンが置き換えられたことがわかりました。

2.スプリントの1つで、新しい機能をリリースすることにしました。 UI-Kitで、デザイナーは4つの新しいアイコンを追加し、2つの古いアイコンを削除し、2つの新しい色を追加しました。

UI-Kitで変更した内容についてデザイナーと話し合い、アイコンと色を手動でエクスポートするのに1時間費やす代わりに、figma- exportcolorsとfigma-exporticonsコマンドを実行するだけで、Gitを介して、削除されたもの、追加されたもの、何が変わったのか。そして、彼らはすぐに新しいアイコンと色を使用してレイアウトを作り始めました。

3.最大7ページの写真付きの4つのセクションで高度なオンボーディングを行う必要がある機能を作成しました。

手動エクスポートには長い時間がかかります。figma-export imagesコマンドを1分以内に実行すると、プロジェクト内のこれらすべての画像を使用できるようになりました。

いくつかの短所

色、アイコン、画像をUI-Kitに保存して自動的にアンロードできるようにする方法については、設計者と合意する必要があります。
エクスポートは、チームライブラリに追加されたコンポーネントに対してのみ機能するため、設計者は有料のFigmaサブスクリプションを持っている必要があります。

予定：

テキストスタイルをエクスポートする機能を追加し、
Android用のビットマップイメージをエクスポートする機能を追加します。
SwiftUIサポートを追加します。

UI-Kitの完成を支援してくれたArturAbrarovとKatyaRokityanに特に感謝します。

ユーティリティリンク

GitHubでFigmaExportをダウンロードします。

私のユーティリティを試していただければ幸いです。質問、願い、フィードバック-d.subbotin@redmadrobot.comで私に書いてください

FigmaExport：FigmaからXcodeおよびAndroidStudioプロジェクトへのUIキットのエクスポートを自動化する方法

モバイル開発者がFigmaから資産をエクスポートするのが不便なのはなぜですか (adsbygoogle = window.adsbygoogle || []).push({});

問題＃1：色をエクスポートできない (adsbygoogle = window.adsbygoogle || []).push({});

問題＃2：標準ツールを使用したアイコンの不便なエクスポート (adsbygoogle = window.adsbygoogle || []).push({});

問題＃3：標準ツールを使用したイラストの不便なエクスポート

Zeplinが役に立たなかった理由：

Figmaからの資産のエクスポートを自動化した方法 (adsbygoogle = window.adsbygoogle || []).push({});

エクスポートプロセスの仕組み (adsbygoogle = window.adsbygoogle || []).push({});

色