制限事項とトラブルシューティング

Figma と変換の制限事項

サポートされている Figma レイヤタイプ

Relay は、次のレイヤタイプのみをサポートしています。

  • テキストノード
  • 画像ノード（PNG、JPEG、その他）
  • フレームノード（自動レイアウトと非自動レイアウト）
  • コンポーネントとバリアント、コンポーネント インスタンス
  • ベクターノード

サポートされていない Figma レイヤおよび機能

  • プロトタイピング機能
  • マスキング グループ
  • スライスレイヤ

サポートされていない Figma プロパティ

サポートされていないプロパティには、次のものがあります。

  • 内側のシャドウ、レイヤぼかし、背景ぼかし
  • レイヤ回転（ベクター回転はサポートされています）
  • レイヤまたはストローク ブレンドモード（塗りつぶしブレンドモードはサポートされています）
  • テキスト プロパティ:
    • 段落間隔
    • 段落インデント
    • 番号のスタイル設定
    • レターフォーム
    • スタイルセット
    • 取り消し線と下線
    • 行の高さ（テキスト要素全体に適用した場合は機能します）
  • ベクター プロパティ:
    • Android の VectorDrawable 形式でサポートされていない機能:
      • 埋め込みビットマップ画像
        • ただし、長方形はベクターではなく画像としてサポートされています。
      • 破線
      • ぼかし
      • シャドウ
      • パターン
      • マスク
      • グループの不透明度
      • 円形グラデーションのフォーカス ポイント
    • SVG 形式でサポートされない機能:
      • 角形グラデーション
      • 菱形グラデーション
    • ベクター オブジェクト間のブール演算（和 / 差 / 積 / 排他的論理和）
      • 回避策は、単一のベクターに結合してフラット化することです

部分的にサポートされている Figma レイヤおよびプロパティ

  • テキストの切り捨て（省略記号の使用）は、テキスト アイテムが 1 行のみのときに最も確実に機能します
  • 塗りつぶしの色:
    • 画像の塗りつぶしは 1 つのみ指定できますが、他のタイプの塗りつぶし（グラデーションなど）を使用することもできます
    • グラデーションについては、線形のみがサポートされています。将来のリリースでは、残りのグラデーション タイプ（円形、菱形、角形）のサポートが追加される予定です。
    • Figma プラグインには、1 つのパラメータが複数の塗りつぶしを受け入れることを指定する方法がありません。塗りつぶしの色をパラメータ化したい場合、現在はパラメータに対して単色のみがサポートされています
  • ドロップ シャドウ:
    • 現在、ドロップ シャドウは以下のレイヤでは機能しません。
      • 長方形以外のベクター
      • 回転された長方形のベクター
    • 1 つのレイヤで複数のドロップ シャドウを使用することはできません。
    • 「標準」以外のドロップ シャドウ ブレンドモードは、Android バージョン 10 以降でのみ使用できます（それ以外の場合は無視されます）。
    • レイヤ上のドロップ シャドウは、Android バージョン 9 以降でのみ使用できます。ただし、テキストは Compose でサポートされているすべての Android バージョンで使用できます。
    • Compose では、シャドウは常に透明なレイヤの背後に表示されます。
  • 自動レイアウト内の絶対位置指定:
    • 絶対位置オブジェクトは、フレーム内のすべての自動レイアウト要素の背後または前面に配置する必要があります。自動レイアウト要素の間でレイヤ化される絶対位置オブジェクトは、それらのオブジェクトの前面に押し出されます。
    • 別の自動レイアウト フレームの内側にある絶対位置オブジェクトで自動レイアウト フレームをネストすると、ネストされたフレームの境界ボックスがフレーム内に配置されたアイテムの影響を受けるため、誤ったレイアウトになることがあります。

単一のスタイルを持つテキスト パラメータに複数のスタイルが渡されると、破棄される

親コンポーネントが、複数のスタイルを含むテキストを、1 つのスタイルのみを持つネストされたコンポーネント テキスト パラメータに渡そうとすると、生成される Compose コードでは複数のスタイルが失われます。テキスト パラメータの元のスタイルのみが保持されます。

この品質を低下させる処理は、生成されるコードのコンパイルを妨げる型の不一致を回避するために必要です。コンポーネント内のテキストに複数のスタイルが含まれる場合、生成されるコンポーザブルは AnnotatedText パラメータを持つことになります。コンポーネント内のテキストに 1 つのスタイルしか含まれない場合、生成されるコンポーザブルは書式のない String パラメータを持つことになります。上記のシナリオでは、親コンポーネントのリッチテキストを AnnotatedText から String に変換し、複数のスタイルを破棄して、ネストされたコンポーネント インスタンスにテキストを渡すことができるようにする必要があります。

親コンポーネントと同じバリアント プロパティを持つネストされたコンポーネントのコンパイルが失敗する

2 つのコンポーネントに同じプロパティ名を持つ [デザイン バリアント]{:.external} があり、一方がもう一方をネストしている場合、生成されるコードでは、2 つのバリアントに対して作成される列挙型が同じ名前を持つことになり、コンパイル エラーが発生します。

Conflicting import, imported name '(variant property)' is ambiguous

これを回避するには、いずれかのコンポーネントのバリアント プロパティ名を変更します。

フォントのサポート

現在は Google Fonts のフォントのみがサポートされています。

Android Studio のトラブルシューティング

Windows で SVG リソースの変換に関するエラーが発生した

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > Converting SVG files: Exception Converting SVG resources for my_packaged_component
        The syntax of the command is incorrect

Android Studio プロジェクト名が長すぎる可能性があります。Windows では、Windows オペレーティング システムの Android Studio プロジェクトは 70 文字以下にする必要があります。私たちは この長さを伸ばすことをおすすめします。

更新内容が Android Studio にインポートされない

プラグインは、Figma ファイルの最新の名前付きバージョンのみをプルダウンします。変更を含む Figma ファイルの新しい名前付きバージョンが作成されていることを確認してください。

ビルド時に SVG と Java ランタイムに関するエラーが発生する

Converting SVG Files: Exception running shell command 'cd /path-to/relay/bin; path/to/relay/bin/vd-tool -c -in path/to/hello_card -out /var/folders/...'.
The operation couldn't be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

Java ランタイムをインストールしてから、もう一度ビルドしてください。

ビルド時にフォントに関するエラーが発生する

次のようなエラーが表示される場合があります。

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf

このエラーの原因は、複数のコンポーネントが同じフォントを同じディレクトリにコピーしようとして競合状態が発生したことです。Google は、現在この問題の解決に取り組んでいます。解決するまでは、単にもう一度ビルドしてください。

Android Studio で、削除した UI パッケージ フォルダを元に戻すと問題が発生する

Android Studio で、ui-packages フォルダ内の UI パッケージ フォルダを削除した後で元に戻すと、そのフォルダ内の開いていなかったファイルが正常に復元されないことがあります。

回避策: [File] > [New] > [Import UI Packages…] を使用して、必要なバージョンの Figma ファイルを再インポートします。または、インポート時に UI パッケージ フォルダ内のファイルをすべてクリックして、それらが正常に復元されるようにすることもできます。

ui-packages の外部にあるリソースを更新しても新しいビルドが強制的に実行されない

ui-packages ディレクトリの外部に配置されている依存関係（テーマ マッピング ファイルや参照コンポーネント ファイルなど）を更新しても、プロジェクトのビルド時にコードが強制的に再生成されません。

回避策: 更新によってコードが強制的に生成されるようにするには、プロジェクトをクリーンアップ（[Build] > [Clean Project]）するか、更新が必要な UI パッケージに関連付けられている生成済みコードのフォルダを削除します。その後、もう一度ビルドします。

生成されたコードまたは ui-packages フォルダが Android プロジェクト ブラウザに表示されない

Relay for Android Studio プラグインで生成されたフォルダが、 が Android プロジェクト ブラウザに表示されます。

回避策: プロジェクト フォルダを再読み込みするには、最上位フォルダを右クリックし、 [ディスクから再読み込み]を選択します

子コンポーネントのアプリテーマが更新されない

親コンポーネントを新しいアプリテーマで再インポートしたとき、その子コンポーネント（DEPS.txt にリストされています）が新しいテーマをピックアップしません。

回避策: 親コンポーネントのコンポーネントからプレビュー テーマをコピーします。 config.json を実行し、子コンポーネントのプレビューするテーマを （それぞれの config.json）。再ビルドすると、子コンポーネントのテーマは 修正されます。

UI パッケージ名を文字で始める必要がある

UI パッケージ名が文字で始まっていない場合、コンパイルされない Compose コードが Relay によって生成され、The resource name must start with a letter というエラー メッセージが表示されます。

回避策: Figma で UI パッケージ名を変更して、文字で始まるようにします。

Compose のフォント パディングが Figma と整合していない

Figma と Compose では、境界ボックス内のテキストの配置方法が異なります。Compose は、境界ボックスの上部にパディングを追加します。

回避策: Compose でテキストを正しい位置に揃えるには、Figma でテキストの場所を数ピクセル上に移動する必要があります。Google は、現在この問題の恒久的な解決に取り組んでいます。