🎨

Figmaのカラーバリアブルをベースコードに反映するプラグイン CSS/SCSS Variables Colorizer

2024/05/28に公開

このプラグインの特徴は、ベースコードの形を崩さずにFigmaのカラーバリアブルを反映できること

Figmaのバリアブルをコードとして生成するプラグインはすでにありますが、生成されるコードの形はそのプラグインに依存することが多いです。

しかし、現場によっては、開発効率を上げるために各案件で使い回せるようなベースコードが用意されているところもあると思います。コードを理解するために必要なコメントや可読性向上のために変数の種類ごとに改行でブロックを作っていることもあるのではないでしょうか。

そのようなベースコードがある場合に、ベースコードの形を崩さずに、Figmaのカラーバリアブルを反映できたら便利だと考え、このプラグインを作りました。

変数名が -- から始まることを想定しています。
CSS変数名が --hogehoge1 の場合、Figmaのバリアブル hogehoge1 と対応します。

例えば、Figmaのバリアブル hogehoge1 に設定された色が #ff0000 の場合は以下のようになります。

ベースコード

:root {
  --hogehoge1: #000000;
  --hogehoge2: #000000;
}

プラグイン使用後のコード

:root {
  --hogehoge1: #ff0000;
  --hogehoge2: #000000;
}

変数名が $ から始まることを想定しています。
SCSS変数名が $hogehoge1 の場合、Figmaのバリアブル hogehoge1 と対応します。

例えば、Figmaのバリアブル hogehoge1 に設定された色が #ff0000 の場合は以下のようになります。

ベースコード

$hogehoge1: #000000;
$hogehoge2: #000000;

プラグイン使用後のコード

$hogehoge1: #ff0000;
$hogehoge2: #000000;

コメントや改行のあるコードでも大丈夫です。コメントや改行を残したまま、対象の色だけを上書きします。
対応できる色の値はHEXの形式（#から始まる形式）のみなので、RGBまたはRGBAの形式だと反映されません。
改行無しで複数のプロパティを指定している場合には正しく反映されません。
- 正しく反映されない例： $hogehoge1: #000000;$hogehoge2: #ffffff;