【Figma】Code Connect の 使い方

はじめに

皆さんは、Code Connectをご存知でしょうか？

Code ConnectはFigma上のデザインシステムとコード上のデザインシステムのギャップを埋めるためのツールです。

この記事では、そんな Code Connectの使い方について解説します。

Code Connect とは？

Code Connectは、コードを開発者にとってよりアクセスしやすく、有用にすることで、組織におけるデザインシステムの導入を促進する新しいツールです。

Code Connectを使用すると、開発モードに表示されるコードスニペットをカスタマイズできるため、開発者は自動生成されたCSSではなく、実際のデザインシステムのコードを見ることができます。

その結果、より迅速かつ効率的な開発、そして組織全体でのデザインシステムの導入率の向上が実現されます。重複した、一時的なコンポーネントの作成やメンテナンス作業を削減することもできます。
（引用：デザインシステムに適したコード）

つまり、Code Connectは、Figma上のデザインシステムとコード上のデザインシステムのギャップを埋め、エンジニアがより効率的に開発することができるツールということだそうです。

何ができるの？

2024年7月6日 時点

現時点では、以下のことができます。

Dev Mode利用時のコードスニペットにコードで実際に使われているコードを表示させることができる

例えば、以下のようなボタンコンポーネントを用意するとします。
(React、emotionを使っています。)

Button.tsx

type ButtonType = "GreenFill" | "GreenBorder" | "BlueFill" | "BlueBorder" | "YellowFill" | "YellowBorder" | "RedFill" | "RedBorder"
  
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  buttonType: ButtonType
  fontSize: 14 | 16 | 18
  children: React.ReactNode
}

export const Button = ({ buttonType, children, fontSize, ...props }: ButtonProps) => {
  return (
    <button
      css={baseButtonStyle(buttonType, fontSize)}
      {...props}
    >
      {children}
    </button>
  )
}

ボタンコンポーネントは、buttonType・fontSize・childrenという値をPropsで渡して、以下のようなデザインを表示させています。

Code Connectで、コードとFigmaファイルを接続し、Devモードで見てみると、以下のようになります。

Code Connect をセットアップする

Code Connect のセットアップについては、こちらの記事で紹介しているので、ぜひご覧ください。

Code Connect の使い方

上記で説明したように、Code Connectでは、FigmaのDev Modeでみることができるインスペクトパネルで実際に使うコードを見ることができます。

ここでは、新しく作ったコード上のコンポーネントをどのようにFigman上のコンポーネントに紐付けるかを解説します。

⚪︎ Code Connect 用のファイルを生成する

コード上のコンポーネントを作ったら、まずは、Code Connect用のファイルを生成します。

以下のコマンドをターミナル入力し、ターミナルの指示通りに入力することで、Code Connect用のファイルが生成できます。

npx figma connect

ファイルが生成されると以下のようなCode Connect 用のファイルが生成されます。
以下は、ボタンコンポーネントの Code Connect 用のファイルの中身になります。

Button.figma.tsx

import { Button } from "./Button"
import figma from "@figma/code-connect"

figma.connect(
  Button,
  "https://www.figma.com/design/*****Figma上のコンポーネントのURL*****",
  {
    props: {
      children: figma.string("Children"),
      buttonType: figma.enum("buttonType", {
        RedBorder: "RedBorder",
        RedFill: "RedFill",
        GreenFill: "GreenFill",
        GreenBorder: "GreenBorder",
        BlueFill: "BlueFill",
        BlueBorder: "BlueBorder",
        YellowFill: "YellowFill",
        YellowBorder: "YellowBorder",
      }),
      fontSize: figma.enum("fontSize", {
        "14": 14,
        "18": 18,
        "16": 16,
      }),
    },
    example: (props) => 
      <Button
        buttonType={props.buttonType}
        fontSize={props.fontSize}
      >
        {props.children}
      </Button>,
  },
)

⚪︎ Code Connect 用のファイルを修正する

stringを指定する

以下のようにpropsに指定することで、任意の文字列を指定することができます。

このコードは、Figma上のコンポーネントのプロパティ"children"を props.children に定義しています。

props: {
  children: figma.string("children")
}

booleanを指定する

以下のようにpropsに指定することで、true/falseを指定することができます。

このコードは、Figma上のコンポーネントのプロパティ"disabled"を props.disabled に定義しています。

props: {
  disabled: figma.boolean("disabled")
}

また、以下のようにすることで、Figma上のコンポーネントでtrueの時に、Iconのインスタンスを表示させ、falseの時、非表示にすることができます。

props: {
  Icon: figma.boolean("isIcon", {
    true: figma.instance("Icon"),
    false: undifined,
  })
}

enumを指定する

以下のように指定することで、FigmaのコンポーネントプロパティのVariantを指定することができます。

このコードは、Figma上のコンポーネントのプロパティ "buttonType"をprops.buttonTypeに定義しています。

props: {
  buttonType: figma.enum("buttonType", {
    breenFill: "GreenFill",
    breenBorder: "GreenBorder",
    blueFill: "BlueFill",
    blueBorder: "BlueBorder",
  }),
}

instaneを指定する

以下のように指定することで、Figmaのコンポーネントのinstanceを指定することができます。

このコードは、Figma上のインスタンス"icon"をprops.iconに定義しています。

props: {
  icon: figma.instance("icon"),
}

Instance childrenを指定する

instance-swapをつかって、バインドされてないコンポーネントを指定したい時は、以下のようにします

このコードは、Figma上のバインドされていないインスタンスのレイヤー　名"icon"をprops.iconに定義しています。

props: {
  icon: figma.children("icon"),
}

また、 * を使うこと、すべてのインスタンスや、部分的に一致しているレイヤー名のインスタンスを定義することができます。

// すべてのインスタンス
figma.children("*")

// Iconから始まるインスタンス
figma.children("Icon*")

Nested propertiesを指定する

Nested propertiesを使っているコンポーネントを指定したい場合は、以下のようにします。

props: {
  icon: figma.nestedProps("icon", {
    size: figma.enum({ ... }),
  }),
}

Text Contents を指定する

Figmaのコンポーネント使っている時、テキストコンテンツをオーバーライドする形にすることがあると思います。
そんな時わざわざ、propsで渡すことはほとんどないと思います。

そのような時は、以下のようにレイヤー名を指定するで、テキストのオーバーライドを指定することができます

props: {
  label: figma.textContent("Text Layer")
},

⚪︎ Figma　のコンポーネントに紐付ける

以下のコマンドをターミナル入力することで、Figma　のコンポーネントに紐付けることがきます。

npx figma connect publish

まとめ

この記事では、Code Connect の 使い方について解説しました。
ぜひこの記事を参考にCode Connectを使ってみてください！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。