Zenn
📎

zeroheightでFigmaの共有・コード出力をやってみたまとめ

2022/12/12に公開
Figma
UI/UX
デザイン
#
デザインシステム
#
zeroheight
idea

デザインシステムをつくるうえで、ひとまずFigmaでカラースタイルやタイポグラフィ、コンポーネントなどをまとめることが多いかと思います。

ただ、それをもとにコード出力するとなると学習コスト・ハードルが高く…。
かといってFigmaをそのまま共有してもVariantやカラーパレットの意図を汲み取れずに、デザインシステムの構築・運用が頓挫してしまうことも多く…。

自分自身もFigmaのパターンライブラリを共有する際にてんやわんやしていますが、最近zeroheightを導入することである程度コンポーネントの整理やカラースタイルの共有がしやすくなりました。

ということで今回は、最近の自分が検証しているFigmaとzeroheightの連携周りについて記事を書いていきます。

導入編

使用するツール・ファイル

今回使用するのは以下の2つ。

  • Figmaでつくったパターンライブラリ
  • zeroheight

Figmaのパターンライブラリは、カラーとタイポグラフィのローカルスタイルを設定していればある程度Figmaとzeroheightとの連携周りの機能を把握できるかと思います。
（記事ではコンポーネントやバリアントも使った機能も紹介します。）

zeroheightも1人用・1つのプロジェクトであれば無料版で一旦は十分です。

zeroheightの準備

zeroheight

Figmaのファイルが準備できれば、zeroheightの新規アカウント・チーム・プロジェクトを作成します。

メールアドレス登録して、チーム設定したら、以下のような画面になります。

スタイルガイドの管理画面

Create Styleguidesでスタイルガイドを作成すると、デフォルトでそれっぽいスタイルガイドをつくってくれています。

zeroheightの初期画面

個人的に0からつくる派なのでいつも削除していますが…。
ページを削除したり新規作成したりもかなり直感的に操作できます。

ページ削除している操作画面

zeroheightにFigmaを連携する

zeroheightの準備ができたらFigmaを連携させます。

zeroheightのエディタ画面上にある＋ボタンをクリックしてDesign uploadsを選択。

そのままAdd a design uploadのボタンを選択します。

アクセス許可とかいろいろ踏んで、

あとはFigmaのURLを入力すればFigmaとzeroheightの連携の準備は完了です。

カラー・タイポグラフィ・シャドウ

Figmaのローカルスタイル上で設定したカラーやタイポグラフィは、そのままzeroheightと連携させることができます。

上述したエディタのDesign uploadsでFigmaと連携ができていれば、カラーはColor Stylesで反映させられます。

Design Uploads で取得できる情報

実際に反映するとこんな感じです。デフォルトだと五十音順に並びますが、並び替えもGUIで簡単に操作できます。

Figmaから取得したカラー一覧

カラーコードのコピーやFigmaファイルのどこから引っ張っているかの確認も簡単に可能でした。

カラーコードをコピーしようとする画面

タイポグラフィやシャドウも同様に、Text StylesやEffect StylesでFigmaで設定したローカルスタイルをzeroheight上に一覧化させることができます。
（※タイポグラフィの例文も自由に変更可能。）

Figmaのタイポグラフィ情報をzeroheightに反映した画面

コンポーネント

ローカルスタイルのzeroheight反映の時点である程度理解したかと思いますが、コンポーネントも同様にzeroheightに反映できます。

＋ボタンをクリックしてDesign uploadsを選択して、Componentsから反映させたいコンポーネントを選択するとコンポーネントのデザインを反映してくれるという感じです。

インスタンスでNG例も作成

zeroheightでは、Rulesという do / don’t のタイルもデフォルトで作成できます。
アンチパターンや推奨パターンなどを横並びで見れるので、デザインシステムの作成に結構便利な機能です。

で、このRulesは、画像をアップロードして表示させるのはもちろんのこと、Figmaのコンポーネントやインスタンスを反映させることも可能です。

なので、Figmaで推奨パターンのコンポーネントを作成し、「こうやって編集したらだめだよ」というアンチパターンをインスタンスで作成することで、FigmaのComponents一覧を綺麗に保ちつつルールを視覚化できます。
インスタンスもFigmaから引っ張れるのは便利ですね。

Variantも一覧で表示可能

また、FigmaでVariantを作成しても、Variantのパターン分のコンポーネントをzeroheightに反映できます。
コンポーネントをステータスごと・アイコン有無などでVariantsを設定した際も特に問題なくFigmaとzeroheightとで連携可能です。

Figmaで設定したVariantFigmaで設定したVariant

zeroheightに反映したComponent一覧zeroheightに反映したComponent一覧

ちなみに、Componentの場合はサイズ調整やVariantで設定したプロパティ表記も可能です。要素同士のデザインの違いもわかりやすくなるので助かります。

書き出しもzeroheight上で可能

アイコンなどに関しては、コンポーネント化して一覧表記させるだけでなく、画像としての書き出し機能も便利になりそうです。

Figma側でエクスポート形式を設定しておくと、zeroheight上でFigmaで指定した形式で画像の書き出しが可能になります。
逆にいうと、Figma側で指定していない形式ではエクスポートできないので、認識違いでpng形式に書き出しちゃったみたいなことが起こりにくいです。

ローカルスタイルのコード出力

zeroheightでローカルスタイルやコンポーネントを視覚的にまとめられるだけでも、Figmaのパターンライブラリの共有は便利になるかと思います。
それだけでなく、zeroheightではFigmaのローカルスタイルをコードの変数として出力できます。

＋ボタンをクリックしてDesign tokensを選択すると、Figmaのローカルスタイルで設定したカラーやタイポグラフィの情報がSassで一覧表示。
Sass以外にもCSS変数やJSON形式でも出力してくれます。

カラー変数やタイポグラフィの関数を自動で出力してくれるので、コーディングの参考にもなるかなと思います。
（実際にはまだ使ってないですが…。）

出力されたコード例（Sass）
/**** Colors ****/
$c-black-1: #000000;
$c-black-2: #333333;
$c-blue-1: #006cd8;
$c-blue-2: #2f90f4;
$c-primary-1: #37ab9d;
$c-primary-2: #4dc0b2;
$c-secondary-1: #ffc042;
$c-secondary-2: #fbca6a;
$c-white-1: #ffffff;
$c-white-2: #fafafa;

/**** Fonts ****/
/** heading1 **/
$heading1-font-family: 'Noto Sans JP', 'NotoSansJP-Bold';
$heading1-font-size: 32px;
$heading1-letter-spacing: 0px;
$heading1-line-height: 160%;
$heading1-font-weight: 700;
$heading1-display: inline-block;
$heading1-color: black;

@mixin heading1() {
  font-family: $heading1-font-family;
  font-size: $heading1-font-size;
  letter-spacing: $heading1-letter-spacing;
  line-height: $heading1-line-height;
  font-weight: $heading1-font-weight;
  display: $heading1-display;
  color: $heading1-color;
}
/** heading2 **/
$heading2-font-family: 'Noto Sans JP', 'NotoSansJP-Bold';
$heading2-font-size: 24px;
$heading2-letter-spacing: 0px;
$heading2-line-height: 160%;
$heading2-font-weight: 700;
$heading2-display: inline-block;
$heading2-color: black;

@mixin heading2() {
  font-family: $heading2-font-family;
  font-size: $heading2-font-size;
  letter-spacing: $heading2-letter-spacing;
  line-height: $heading2-line-height;
  font-weight: $heading2-font-weight;
  display: $heading2-display;
  color: $heading2-color;
}
/** heading3 **/
$heading3-font-family: 'Noto Sans JP', 'NotoSansJP-Bold';
$heading3-font-size: 20px;
$heading3-letter-spacing: 0px;
$heading3-line-height: 160%;
$heading3-font-weight: 700;
$heading3-display: inline-block;
$heading3-color: black;

@mixin heading3() {
  font-family: $heading3-font-family;
  font-size: $heading3-font-size;
  letter-spacing: $heading3-letter-spacing;
  line-height: $heading3-line-height;
  font-weight: $heading3-font-weight;
  display: $heading3-display;
  color: $heading3-color;
}
/** heading4 **/
$heading4-font-family: 'Noto Sans JP', 'NotoSansJP-Bold';
$heading4-font-size: 18px;
$heading4-letter-spacing: 0px;
$heading4-line-height: 160%;
$heading4-font-weight: 700;
$heading4-display: inline-block;
$heading4-color: black;

@mixin heading4() {
  font-family: $heading4-font-family;
  font-size: $heading4-font-size;
  letter-spacing: $heading4-letter-spacing;
  line-height: $heading4-line-height;
  font-weight: $heading4-font-weight;
  display: $heading4-display;
  color: $heading4-color;
}
/** paragraph **/
$paragraph-font-family: 'Noto Sans JP', 'NotoSansJP-Regular';
$paragraph-font-size: 16px;
$paragraph-letter-spacing: 0px;
$paragraph-line-height: 160%;
$paragraph-font-weight: 400;
$paragraph-display: inline-block;
$paragraph-color: black;

@mixin paragraph() {
  font-family: $paragraph-font-family;
  font-size: $paragraph-font-size;
  letter-spacing: $paragraph-letter-spacing;
  line-height: $paragraph-line-height;
  font-weight: $paragraph-font-weight;
  display: $paragraph-display;
  color: $paragraph-color;
}
/** paragraph-bold **/
$paragraph-bold-font-family: 'Noto Sans JP', 'NotoSansJP-Bold';
$paragraph-bold-font-size: 16px;
$paragraph-bold-letter-spacing: 0px;
$paragraph-bold-line-height: 160%;
$paragraph-bold-font-weight: 700;
$paragraph-bold-display: inline-block;
$paragraph-bold-color: black;

@mixin paragraph-bold() {
  font-family: $paragraph-bold-font-family;
  font-size: $paragraph-bold-font-size;
  letter-spacing: $paragraph-bold-letter-spacing;
  line-height: $paragraph-bold-line-height;
  font-weight: $paragraph-bold-font-weight;
  display: $paragraph-bold-display;
  color: $paragraph-bold-color;
}

最後に

Figmaでの変更をzeroheightに反映させるのも、Adding Design uploadsを選択すると表示されるモーダル左上のローディングアイコンを選択するだけで更新してくれます。

ローディングアイコンを選択

と、こんな感じでFigmaからzeroheightへの反映はかなり直感的に操作できます。

また、最近だと有料プランでzeroheight上のドキュメントをGitHub連携できるようにした情報もありました。
（参考：https://zeroheight.com/blog/connecting-design-and-development-react-github-and-tokens/ ）

まだまだFigmaもzeroheightも機能が進化しているので、引き続きFigma連携関連で便利そうな機能があれば更新します。

他にもFigmaとの連携ならこの方法が使える・こんなツールも使いやすいよ等あれば以下のディスカッションでコメントお願いします！
それでは。👋

Discussion