はじめに
システム開発において、ユーザーと製品・サービスをつなぐ役割を担うUIデザインは重要な要素です。UIデザインの設計には様々なツールが使われていますが、その中でも注目されているデザインツールがFigmaです。
Figmaはブラウザ上で簡単にUIデザインを作成できる機能に加えて、Figma上で作成したデザインデータを取得できるFigma REST APIが用意されています。
今回は、Figma REST APIから取得できるデザインデータを使用して、Reactコード生成を検証しました。
検証概要
Figmaで公開されているデジタル庁デザインシステムを使用して作成したサンプルフォームのデザインデータと、デジタル庁デザインシステムの公開されているReactコードスニペットを組み合わせて、Reactコード生成を検証します。
検証で使用した素材
・デジタル庁デザインシステム デザインデータ v2.0.2
・デジタル庁デザインシステム React サンプルコンポーネント(コミット1d2f542)
検証手順
- Figmaで公開されているデジタル庁デザインシステムを使用してサンプルフォームを作成する
- Figma REST API を使って手順1で作成したサンプルフォームのデザインデータを取得する
- デザインデータからReactコード生成するPythonスクリプトを作成する
- 手順３で作成したPythonスクリプトを使用して、手順２で取得したデザインデータからReactコード生成する
前提知識
Figma
Figmaとはブラウザ上で簡単にUIデザインを作成できるデザインツールです。直感的な操作が可能で簡単にUIデザインを作成できることに加えて、複数名でのコラボレーション、デザインの共有を簡単に行うことができます。また、0からデザインを作成する必要をなくすために基本的なデザインが構築されているテンプレートが準備されています。
Figma API
FigmaではFigma上のデータを取得・利用できるAPI(Plugin API, Widget API, REST API)が用意されています。今回はFimga上で作成したデザインのデザインデータを取得できるREST APIを利用します。
Figma REST APIでは作成したデザインデータを取得できるようになっています。取得できるデータは、Figmaデザインのレイヤー階層がツリー構造となっているデザインデータです。
デジタル庁デザインシステムのボタンを例に挙げると、図１左のようにレイヤーが定義されたボタンのデザインデータをJavascriptライブラリのD3.jsで可視化する図１のようになっています。また、可視化した図の見方を表にまとめます。
図１
| タイルの色 | 説明 |
|---|---|
| 青色 | Figma上で表示されている要素 |
| 黄色 | コンポーネントとして定義されている要素 |
| 灰色 | Figma上で非表示にされている要素 |
Figmaの説明は以上にして、次にデジタル庁デザインシステムについて説明します。
デジタル庁デザインシステム
デザインシステムとは「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」です。デジタル庁デザインシステムでは使い勝手のよい行政サービスを効率よく構築するためのガイドライン、コード、テンプレート、コミュニティを提供している。デジタル庁デザインシステムのデザインデータはFigmaテンプレートとして公開されています。またReactのコードスニペットが公開されています。
検証
1.Figmaで公開されているデジタル庁デザインシステムを使用してサンプルフォームを作成する
今回は検証のために、図2のようなサンプルフォームを作成しました。4つのコンポーネントとテキストを組み合わせています。また、Figmaのオートレイアウト機能を使用して、各要素を整列しています。
Figmaの使用方法については割愛しますが、公式のチュートリアルがわかりやすいです。
- インプットテキスト
- テキストエリア
- ラジオボタン
- ボタン
図２
2.Figma REST API を使って手順1で作成したサンプルフォームのデザインデータを取得する
Figma REST API の使用方法については割愛しますが、Figma REST APIを使用することで、手順１で作成したデザインのデザインデータを取得できます。JavascriptライブラリのD3.jsでレイヤー名ごとに可視化した図を示します。
また、可視化した図の見方を表にまとめます。
| Figmaデザイン | Figma REST APIで取得したデザインデータの可視化 |
|---|---|
図３
|
図４
|
| タイルの色 | 説明 |
|---|---|
| 青色 | Figma上で表示されている要素 |
| 黄色 | コンポーネントとして定義されている要素 |
| 灰色 | Figma上で非表示にされている要素 |
3.デザインデータからReactコード生成するPythonスクリプトを作成する
Reactコード生成方法のイメージとしては、ツリー構造を探索していき、探索した要素がコンポーネントである場合にコンポーネントコードを出力するイメージです。
図５はコード生成方法のイメージです。
図５
探索の順序は下記のようになっています。
①ツリー構造の1つ下の階層を探索する。探索した要素はテキストである。
テキストはコンポーネントとしては定義されていない。テキストの内容を取得する。
下に階層が存在しないため、同じ階層に存在する他の要素の探索を行う。
②同じ階層に存在する他の要素を探索する。探索した要素はFRAMEである。
オートレイアウトの設定値などの情報を取得してCSSに反映する。
下に階層が存在するので、下の階層の探索を行う。
③下の階層の要素を探索する。探索した要素はInput Text Unitsである。
Input Text Unitsはコンポーネントして定義されている。Input Text Unitsに必要な要素（ラベル、プレースホルダー、必須バッジ）などの情報を取得する。
コンポーネントして定義されているので、この要素より下の探索を終了して、上の階層の探索に戻る
.
.
.
上の手順を繰り返すことで、Figmaデザインデータのツリー構造を全探索しつつ、Reactコードを生成するために必要なデータを取得していきます。
Reactコードを生成するために必要なデータを取得した後、Reactコードとして出力します。ここで出力されるファイルは、Reactコード（tsxファイル）とcssファイルです。
4.手順３で作成したPythonスクリプトを使用して、手順２で取得したデザインデータからReactコード生成する
手順１で作成したFigmaデザインを手順２でデザインデータを取得して、手順３で作成したPythonスクリプトを使用してReactコードを生成しました。生成したReactコードをブラウザ上で表示した画像が図６です。
図6
検証結果
Reactコード生成するPythonスクリプトを作成することで、 Figmaで作成したデザインからReactコードを生成することができました。
しかし、２点問題点がありました。
問題点①：テキスト要素に関して、どのHTMLタグで出力するか指定するために工夫する必要がある。
→Figma REST APIを使用して取得できるデザインデータでHTMLタグを区別するには工夫が必要でした。今回は、図７のようにテキストのレイヤー名に「h2_」とプレフィックスをつける工夫を行いました。
図７
問題点②：現在公開されているデジタル庁デザインシステムのReactコードスニペットでは誤っている部分がある。
→現在公開されているReactコードスニペットではテキストスタイルの指定が誤っている部分があると考えています。例えばテキストエリアのラベルです。FigmaでのデザインとReactコード生成後のデザインでは、後者のline-hightが小さいです。そのためReactコード生成後のデザインでは詰まっている印象を受けます。これは、Figma上で指定されているラベルのテキストスタイルとReactコードスニペットでのラベルのテキストスタイルが誤っていることが原因です。
まとめ
Figma REST APIから取得できるデザインデータを使用して、Reactコード生成を検証しました。
Figma REST APIから取得できるデザインデータを探索して、Reactコード生成するPythonスクリプトを作成することで、 Figmaで作成したデザインからReactコードを生成することができました。
今回はデジタル庁デザインシステムを使用しましたが、他にもMaterial UI（カスタマイズしたMaterial UIも含めて）にも応用できると考えています。またコード生成する部分を変更すれば、ReactだけでなくAngularなども生成可能です。
Figmaデザインからコード生成を行うことで、開発者はデザインの細かなミスを気にすることなくロジック部分の開発に集中することができると考えています。
引用
・デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/
・Figma公式チュートリアル https://www.figma.com/community/file/1228577958737472070/figma-figma-basics