【Figma】Code Connectをセットアップする

はじめに

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

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

この記事では、そんな Code Connectのセットアップ方法について解説します。

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は、エンタープライズ プラン・ビジネス プラン のみが利用できる機能です。

1. Code Connectをインストールする

以下のコマンドをターミナルで入力して、Code Connectをインストールします。

npm install @figma/code-connect

2. Figmaとコードを接続する

以下のコマンドをターミナルで、入力し、対話形式で必要な情報を入力します。

npx figma connect

アクセストークンの入力

上記を入力すると、まずは、以下のようになり、Figmaのアクセストークンの入力を求められます。

そのため、home > account > setting にある Personal access tokens を File content: Read-only・Code Connect: Writeのスコープを設定し、トークンを生成してください。

? No access token detected. Visit https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
      for instructions on how to do this, ensuring you have both the File Content and Code Connect Write scopes 

  Please enter your access token: › 

デザインシステムのディレクトリーを入力

トークンを入力すると以下のようになり、code上のデザインシステムのディレクトリー(コンポーネントが管理されているディレクトリー)の入力が求められます。

今回は、./src/component というフォルダでコンポーネントを管理しているので、src/componentと入力しました。

? Which top-level directory contains the code to be connected to your Figma design system? (Press enter to use current directory) › 

Figmaのコンポーネントを管理しているページのURLを入力

ディレクトリーの入力が完了したら、以下のようにFigmaでコンポーネント管理しているページのURLの入力を求められます。

? What is the URL of the Figma file containing your design system library?  › 

設定ファイルを生成する

URLを入力し、Code Connectの設定ファイルがない場合、以下のように設定ファイルを生成するか問われます。

Yesを選択すると、figma.config.json というファイルが作られます。

? It looks like you don't have a Code Connect config file. Would you like to generate one now from your provided answers? ›

編集するリンクを選択する

figma.config.json が作られると以下のように　編集するリンクを選ぶことを求められるので、準備ができたら ESCキー を押します。

Select a link to edit (Press esc when you're ready to continue on)

Code Connectのファイルを生成するフォルダを設定する

次は、Code Connectのファイルを生成するフォルダを設定します。

コンポーネントと同じフォルダに生成する場合は、Enterキー を押します。

What directory should Code Connect files be created in?(Press enter to co-locate your files alongside your component files) 

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

次は、Code Connectのファイルを生成するか問われるので、Code Connectのファイルを生成します。

You're ready to create 1 Code Connect file. Continue?

3. .env ファイルを作る

.env ファイル を作って、Figmaのアクセストークンを使えるようにします。

.env

FIGMA_ACCESS_TOKEN = "****************************"

4. Figmaにpublichする

以下のコマンドを入力し、publishします。

npx figma connect publish

まとめ

この記事は、Code Connectのセットアップ方法について解説しました。
ぜひこの記事を参考にCode Connectをつかってもらえたら嬉しいです！

---

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

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