スタディサプリ Product Team Blog

株式会社リクルートが開発するスタディサプリのプロダクトチームのブログです

FigmaのCode ConnectとCode Generation APIを導入しました

はじめに

スタディサプリ小学・中学講座を開発している Android エンジニアの @maxfie1d です。 スタディサプリ小学・中学講座ではデザイナーがFigmaで作成したデザインデータをもとにエンジニアがUIのコードを書いています。 UIのコードを書くことはとてもクリエイティブで楽しい作業ですが、一方でUIにたくさんあるプロパティを読み取りながらコードに反映するのはそれなりに時間がかかり面倒でもあります。

この面倒な「デザインからコードを起こす作業」を効率化できないかどうかを考え、Figma の Code Connect と Code Generation APIを導入したのでご紹介します。

デザインからコードを起こす作業の課題

デザインからコードを起こす作業の課題について具体例をもとに説明します。 例えば小学講座で利用しているMainButtonコンポーネントには Size Style State Icon Text の5つのプロパティがあります。

Figmaで定義されたMainButton。5つのプロパティが存在する。

MainButtonをJetpack Composeのコードで表現すると以下のようになります。 1つボタンを置くだけでもそれなりの記述量です。

MainButton(
  text = "Label",
  onClick = {},
  size = MainButton.Size.Large,
  style = MainButton.Style.Filled,
)

たくさんあるUIのプロパティを1つずつ確認しながらコードを書き起こす作業はそれなりに時間がかかり面倒です。 またその作業中にミスをすれば、リリース前のデザイナーによるデザイン確認(デザインQA)で指摘されて手戻りになることもあります。

以上の課題を解決するためにCode Connectを導入しました。

Code Connect

Code Connectは2024年4月に登場したFigmaの新機能です。 その名前の通りコードとFigmaのコンポーネントの紐づけをし、Figma上でコードを表示できるようになる機能です。 記事執筆時点ではSwiftUI、React、Jetpack Composeに対応しています。本記事ではJetpack Composeでの使用例をご紹介します。

まずはドキュメントを読んでCode Connectのセットアップを行います。

次にコードとFigmaのコンポーネントを紐づけるコードを書きます。 先ほど紹介したMainButtonに対してCode Connectを設定するコードは以下のようになります。

@FigmaConnect(url = "https://www.figma.com/design/<紐づけするコンポーネントのURL>")
class MainButtonDoc {

    @FigmaProperty(FigmaType.Text, "Text")
    val text = "Button"

    @FigmaProperty(FigmaType.Enum, "Size")
    val size: MainButton.Size = Figma.mapping(
        "Large" to MainButton.Size.Large,
        "Medium" to MainButton.Size.Medium,
        "Small" to MainButton.Size.Small,
    )

    @FigmaProperty(FigmaType.Enum, "Style")
    val style: MainButton.Style = Figma.mapping(
        "Filled" to MainButton.Style.Filled,
        "Outlined" to MainButton.Style.Outlined,
    )

    @Composable
    fun MainButtonSnippet() {
        MainButton(
            text = text,
            onClick = {},
            size = size,
            style = style,
        )
    }
}

figma.config.jsonの設定も行っておきましょう。parser には compose を指定し、include および exclude を使ってCode Connectのコードの場所を指定しておきます。

{
  "codeConnect": {
    "parser": "compose",
    "include": [
      "figma/**"
    ],
    "exclude": [
      "**/test/**",
      "**/androidTest/**",
      "**/build/**"
    ]
  }
}

準備ができたら figma connect publish コマンドで公開します。失敗時に原因を特定しやすくするために --verbose オプションを付けておくとよいです。

$ figma connect publish --verbose

公開に成功すると以下のようにFigma上でコードが表示されるようになります。 もちろんプロパティを変更すれば表示されるコードも変化します。 すぐにコピペして使えるコードが表示されるので、高速かつミスなくUIを構築できるようになるのではないでしょうか。

Code Connectの詳細な使い方についてはドキュメントをご覧ください。

以上でCode Connectの紹介は終わりです。次にCode Generation APIについてご紹介します。

Code Generation API

Code Connectは強力ですが、さらに柔軟にコード生成を行うにはCode Generation APIを使用することができます。

Code Connectはコードとの紐づけ先がコンポーネントであることが前提となっているため、記事執筆時点では残念ながらテキストのような非コンポーネントに対して使うことができません。 テキストをコンポーネント化することも検討しましたが複数の懸念点が上がったため断念しました。 そこでCode Generation APIを使ってDev modeでテキストを選択するとJetpack Composeのコードが表示されるプラグインを開発してみました。

以下がデモになります。テキストを選択するとCode Connectと同様にそのままコピペして使えるコードが表示されます。

FigmaのCode Generation APIを使用したプラグインはメニューよりプラグイン > 開発 > プラグインの新規作成... とたどり、次に表示される画面で「コード生成」を選択することで簡単に作り始めることができます。

Code Generation APIの詳細な使い方についてはドキュメントをご覧ください。

まとめ

いかがでしたか。Code ConnectとCode Generation APIを使って「デザインからコードを起こす作業」を効率化する方法を紹介しました。 Code Connectを導入して間もないですが、開発者の手間を減らし、デザインとコードの一貫性が向上すると確信しています。 本記事が参考になると幸いです。