📜

Figmaのデザイントークンをコード化するのにzeroheightが役立った話

2022/12/24に公開

Figma

Figmaで作成したデザインデータを自動的にコード化するロマンは誰もが夢見ていることかと思います。

ただ、Reactとかあまり書けないWebサイト制作がメインのコーダーやデザイナー的にFigma APIをバリバリに使うのはなかなか学習や検証に時間がかかり…。

「とりあえずFigmaで作成したカラーやタイポグラフィの情報だけでもSassの変数として使えれば…！」と思っていたところ、zeroheightが結構便利で役立ちました。

そこで今回は、Figmaのデザイントークンをコード化する方法としてzeroheightを使ってみたという話と、おまけで最近試しているコード出力方法なども紹介できればと思います。

zeroheightでFigmaのデザイントークンをコード出力する

zeroheightはスタイルガイド・ドキュメント作成ツールです。
Figmaのコンポーネントを一覧で表示させたり、コンポーネントごとにHTMLやReact形式でまとめたり、デザインシステムをつくるのに便利でした。

zeroheightの細かい機能については以下記事でまとめています。

そんなzeroheightですが、Design Tokensという機能でコード出力することができました。
ターミナルやパッケージのインストールすることなく、Figmaとzeroheightの連携のみで可能です。

出力したSassファイル

design_system_styles.scss

/**** Colors ****/
$color-black-1: #000000;
$color-black-2: #333333;
$color-blue-1: #006cd8;
$color-blue-2: #2f90f4;
$color-primary-1: #37ab9d;
$color-primary-2: #4dc0b2;
$color-secondary-1: #ffc042;
$color-secondary-2: #fbca6a;
$color-white-1: #ffffff;
$color-white-2: #fafafa;

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

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

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

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

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

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

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

前提条件

以下の2点を前提としています。

Figmaでデザイントークンを登録
zeroheightでプロジェクトを作成

とはいえ、Figmaはカラーとタイポグラフィをローカルスタイルに設定していれば大丈夫です。

Figmaの画面。カラーとタイポグラフィをまとめている。

また、zeroheightについても1人1プロジェクトであれば無料で試せます。
アカウント発行〜プロジェクト作成まで割とかんたんにできました。

zeroheightでFigmaを連携させる

zeroheightのプロジェクトが作成できたら、早速Figmaと連携させてみます。

zeroheightのスタイルガイド内の右下に出ているバナーを選択すればアップロードできます。

zeroheightのスタイルガイド画面。右下にアップロードするボタンがある。 スタイルガイド画面右下からアップロード

右下のバナーを消してしまっても、ダッシュボードまで戻ってアップロード画面でFigmaをアップロード可能です。

zeroheightのアップロード画面。Figmaファイルを追加できる。 アップロードの画面から追加

アップロード画面でFigmaの共有用URLを貼り付ければ、数分で連携できます。🎉

Design Tokens機能を使う

zeroheightにFigmaをアップロードできたら早速Design Tokens機能を使ってみましょう。
エディタ上の＋ボタンを選択すると、一番右端にDesign Tokensが表示されます。
（今回は Design Tokens 1.0 を使用します。 Design Tokens 2.0 はStyle Dictionaryの使用が必須です…。）

Design Tokensの選択画面。