【入門編】FigmaのスクリプトとREST API連携で実現するデザインアセットの自動バックアップとメトリクス計測 – UI/UX・デザインツール活用バイブル

デザインを「計測」せよ。Figma REST APIで実現する、自動化された品質管理の世界へようこそ

こんにちは。UI/UXの現場で、私たちは日々「ピクセル」と格闘していますが、ふと立ち止まって考えてみてください。「今、チームで最も使われているコンポーネントは何だろう？」「先月のデザイン修正で、どれだけのアセットが更新されたのか？」――これらを手動で数えるのは、もはやデザイナーの仕事ではありません。

今日は、FigmaのREST APIとGitHub Actionsを組み合わせ、「デザインアセットの自動バックアップ」と「使用率メトリクスの計測」を完全自動化する手法を伝授します。

これをマスターすれば、あなたは単なる「画面を作る人」から、デザインシステムという「エコシステムを統治するエンジニア」へと進化できます。

—

1. なぜ「デザインの自動化」が必要なのか？

デザインファイルは、放置すればするほど「ブラックボックス」化します。どのコンポーネントがデッドコード（使われていない資産）なのか、誰にもわからなくなるからです。

今回構築するパイプラインは以下の2つを実現します。
1. 自動バックアップ: ファイルのJSON構造をGitで追跡し、変更履歴を完全に可視化する。
2. メトリクス計測: コンポーネントの使用回数を集計し、デザインシステムの「健康診断」を行う。

—

2. 基礎セットアップ：Figma APIの扉を開く

まずは、Figmaの力を引き出すための鍵を手に入れましょう。

手順1: Personal Access Tokenの取得

1. Figmaの `Settings` > `Personal access tokens` にアクセス。
2. 新しいトークンを生成（名前は `Design-Metrics-Bot` など）。
3. 重要: このトークンは二度と表示されません。`.env` ファイルに保管してください。

手順2: File Keyの確認

FigmaファイルのURL（`https://www.figma.com/file/KEY_STRING/…`）の `KEY_STRING` 部分が、そのファイルの識別子です。

—

3. HelloWorld：APIからデータを抽出する

まずは、Node.jsでFigmaのデータを叩く最小限のスクリプトを書きましょう。

プロジェクトの初期化
mkdir figma-automation && cd figma-automation
npm init -y
npm install axios dotenv

`index.js` を作成します：

require(‘dotenv’).config();
const axios = require(‘axios’);

const FIGMA_TOKEN = process.env.FIGMA_TOKEN;
const FILE_KEY = process.env.FILE_KEY;

async function fetchFigmaData() {
const url = `https://api.figma.com/v1/files/${FILE_KEY}`;

try {
const response = await axios.get(url, {
headers: { ‘X-Figma-Token’: FIGMA_TOKEN }
});

// データの抽出: コンポーネントの一覧をログに出すだけのシンプルなHelloWorld
console.log(“デザインシステム構造を取得しました:”, response.data.name);
console.log(“総コンポーネント数:”, Object.keys(response.data.components).length);
} catch (err) {
console.error(“エラーが発生しました:”, err.message);
}
}

fetchFigmaData();

`node index.js` を実行してみてください。あなたのデザインファイルの構造が、JSONとして降ってきたはずです。これこそが、デザインを「データ」として扱う第一歩です。

—

4. 自動化の極致：GitHub ActionsでのCI/CD構築

ローカルで動かすだけでは不十分です。GitHub Actionsを使い、毎日深夜に自動集計させましょう。

`.github/workflows/metrics.yml` を作成します。

name: Design Metrics Daily
on:
schedule:

cron: ‘0 0 ‘ # 毎日深夜に実行

workflow_dispatch: # 手動実行も可能に

jobs:
collect-metrics:
runs-on: ubuntu-latest
steps:

uses: actions/checkout@v3
name: Setup Node

uses: actions/setup-node@v3
with: { node-version: ’18’ }

run: npm install
name: Run Automation

env:
FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
FILE_KEY: ${{ secrets.FILE_KEY }}
run: node index.js
# ここで生成したJSONをGitにコミットする処理を追加すればバックアップ完了

—

5. 次のステップ：さらなる高みへ

この基盤ができると、以下のようなことが可能になります。

使用率の可視化: 特定のコンポーネントが「どのページで、何回使われているか」を検知し、廃止予定のコンポーネントをアラートする。
デザインの差分管理: JSONをGitで管理することで、`git diff` で「誰が昨日、デザインのどのパラメータを変えたか」を追跡する。

先輩エンジニアからのアドバイス

最初は「面倒だな」と感じるかもしれません。しかし、デザインシステムを構築する過程で、この「自動計測」を組み込むかどうかで、1年後のチームの生産性は天と地ほどの差が開きます。

「計測できないものは改善できない」

ピクセルを並べるだけのデザイナーから、システムを設計するデザイナーへ。この小さなスクリプトが、あなたのキャリアの武器になることを約束します。

さあ、まずは環境変数から設定してみましょう。何か詰まったら、いつでも聞いてくださいね。応援しています！