Figmaを起点に作るデザイントークン - Qiita

この記事の概要 デザイントークンという言葉を聞いたことがあるでしょうか？ 標準化された仕様はまだ存在しない1のですが、色やスペース、タイポグラフィスケールなど、見た目を構成する最小単位の要素だと思ってもらえば良いです。 そんなデザイントークンをFigmaを起点にして作る方法について、記事にしました。 デザインデータを作り、コードに適用するまでを対象にしています。 デザイントークンの種類について 一口にデザイントークンと言っても複数の役割があるため、実制作に入る前に概念の説明をします。 よくある区分はグローバルトークン2とエイリアストークン3の2種類を設定する方法です。 今回の記事では要旨だけをピックアップして説明していますが、AdobeのSpectrumに詳細に分かりやすくまとまっています。 興味のある方はこちらもどうぞ。 グローバルトークン グローバルトークンとは、#2680EBにblu