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

## はじめに

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

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

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

## Code Connect
### Code Connectとは？
> Code Connectは、コードを開発者にとってよりアクセスしやすく、有用にすることで、組織におけるデザインシステムの導入を促進する新しいツールです。
> 
> Code Connectを使用すると、開発モードに表示されるコードスニペットをカスタマイズできるため、開発者は自動生成されたCSSではなく、実際のデザインシステムのコードを見ることができます。
> 
> その結果、より迅速かつ効率的な開発、そして組織全体でのデザインシステムの導入率の向上が実現されます。重複した、一時的なコンポーネントの作成やメンテナンス作業を削減することもできます。
> （[引用：デザインシステムに適したコード](https://www.figma.com/ja-jp/blog/introducing-code-connect/)）

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

### 何ができるの？
<font color="gray">*2024年7月6日 時点*</font>

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

:::note info
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で渡して、以下のようなデザインを表示させています。

![スクリーンショット 2024-07-06 10.23.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/76687d09-43f5-e8aa-0829-cd27c8bf730e.png)

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/da6027d1-a3ae-146a-a787-10986a4e9604.png)


## Code Connectをセットアップする

:::note warn
Code Connectは、エンタープライズ プラン・ビジネス プラン のみが利用できる機能です。
:::


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

```terminal
npm install @figma/code-connect
```

### 2. Figmaとコードを接続する
以下のコマンドをターミナルで、入力し、対話形式で必要な情報を入力します。

```terminal
npx figma connect
```

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

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

```terminal
? 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`と入力しました。

```terminal
? 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の入力を求められます。

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

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

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

```terminal
? 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キー` を押します。

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

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

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

```terminal
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のファイルを生成します。

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

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

```.env
FIGMA_ACCESS_TOKEN = "****************************"
```

### 4. Figmaにpublichする
以下のコマンドを入力し、publishします。

```terminal
npx figma connect publish
```

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

---

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

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

https://twitter.com/degudegu2510