本投稿は TECOTEC Advent Calendar 2024 の12日目の記事です。
こんにちは、決済認証システム開発事業部の黒田です。 普段は、主にUIUXデザインを担当しております。今回は、Figmaのバリアブル機能を使ったデザイントークンの管理方法についてご紹介したいと思います。
バリアブル機能とは
バリアブル(Variable)は直訳すると「変数」という意味になります。 バリアブル機能を使うことで、「カラー、数値、文字列、ブーリアン」を変数として定義することができ、Figmaのプロジェクト内でバリアブルを用いてプロトタイプを作成することができます。
デザイントークンとは
デザイントークンとは、デザインシステム内の最小単位になります。 デザイントークンの管理方法は様々なやり方がありますが、今回はGlobal TokenとAlias Tokenで分ける方法をご紹介します。
Global Tokenはカラーコードなどの値が定義されたトークンで、Alias Tokenはボタンや文字の色など、どのパーツ・どの状況で使用するかの意味を持たせるトークンになります。
続きを読む