株式会社モニクルで開発している togana です。
この記事は モニクル Advent Calendar 2024の5日目の記事です。
はじめに
Figma を使っていると、デザインと実装を統一するためにデータを出力して活用したいと思うことがあります。特に、Variables の情報を Design Tokens Community Group（以下、DTCG）の形式で出力できるプラグインがあれば便利だと思い、探してみました。しかし、欲しい形式を出力できるプラグインが見つからなかったので、自作することにしました。
まずは作り方
以下の記事で詳しく解説されているので、こちらを参考にしてください。
variables のデータは持ってこれるのか？
Figma の Plugin API は結構色々取得することが可能です。Dev mode で利用可能な範囲で調べたところ getLocalVariableCollectionsAsync と getVariableByIdAsync を利用することで参照できそうです。
なお、Figma の Plugin API には非同期バージョンと通常バージョンの関数が用意されていますが、非同期でない関数は DEPRECATED となっているため、今後の利用は推奨されません(今回は使いました)。
variables の ResolvedDataType と DTCG の type で互換性はあるのか？
Figma の Variables には BOOLEAN、COLOR、FLOAT、STRING の4つのデータ型があります。一方、DTCG 形式では以下の型がサポートされています。
このセクションでは、それぞれの互換性を確認し、対応可能な型を洗い出します。
BOOLEAN
存在しないです。なんならこの variables の BOOLEAN どのタイミングで使うのかよくわからないのでこうやって使うよっていうものがあればコメントで教えていただきたいです。
COLOR
対応できそうなものに COLOR があります。
RGB or RGBA を値としてセットすることができるとあります。
{
"Majestic magenta": {
"$value": "#ff00ff",
"$type": "color"
},
"Translucent shadow": {
"$value": "#00000080",
"$type": "color"
}
}
variables の方にも "COLOR" variables can be assigned to RGB values と記載があるので対応できそうです。(RGB って書いてあるけど実際の型定義はRGB/RGBA)
HEX の変換するぐらいで済みそうです。適当に関数を用意しておきます。
convertRgbaColorToHexColor.ts
type RgbaColor = Omit<RGBA, 'a'> & Partial<Pick<RGBA, 'a'>>;
export function convertRgbaColorToHexColor({ r, g, b, a }: RgbaColor): string {
const toHex = (value: number) => {
const hex = Math.round(value * 255).toString(16);
return hex.padStart(2, '0');
};
const hex = ['#', toHex(r), toHex(g), toHex(b)];
if (a) {
hex.push(toHex(a));
}
return hex.join('');
}
FLOAT
対応できそうなものに Dimension と Font weight と Duration と Number があります。
Number と Font weight 以外は unit の設定をする必要があります。しかしその設定ができないため今回は見送りました(スコープ設定で特定のものだけが選択されていたらpxやrem,ms,sと判定できる気もするので要検討)。
Font weight と Number の違いは スコープ設定で fontWeight が選択されているか否かで判定できそうです(fontWeight のみの scope を設定すると FONT_WEIGHT と FONT_VARIATIONS の2つが設定される罠があります)。
if (scopes.includes('ALL_SCOPES') || scopes.length > 2) {
return 'number';
}
// NOTE: fontWeight のみの scope を設定すると FONT_WEIGHT と FONT_VARIATIONS が設定される
return scopes.includes('FONT_WEIGHT') && scopes.includes('FONT_VARIATIONS')
? 'fontWeight'
: 'number';
STRING
対応できそうなものに Font family があります。
ただ issue も紐づいているので対応に含めるか迷いましたが、スコープ設定で絞り込むことができるので対応する場合は対応することにします。
if (scopes.includes('ALL_SCOPES') || scopes.length > 1) {
return 'unknown';
}
// NOTE: fontFamily のみの scope を設定すると FONT_FAMILY が設定される
return scopes.includes('FONT_FAMILY') ? 'fontFamily' : 'unknown';
対応可能なもの
調べた結果 COLOR, Number, Font weight, Font family に対応させることができそうでした。
実際に作ったプラグイン
最後に
今回、Figma の variables を DTCG の形式で出力するプラグインを自作しました。Plugin API は充実しており、多くのデータを取得可能です。DTCG の形式に変換する際にまだ判断が難しいところもありました。デザインと実装が統一される未来を目指して、今後もプラグインの開発を進めていきたいと思います。
Discussion