FigmaとSCSSで色の定義を合わせるための運用方法

こんにちは、松久です。

食べチョクでは、デザインツールとして Figma を使っています。色の定義を Figma の Color Styles で管理しています。管理はしているものの SCSS には反映できていない状態でした。このままだと何が管理されている色なのかエンジニアとデザイナーの認識が揃わなくなります。そこで、Figma の Color Styles と、SCSS で用意した色の変数を合わせられる状態を作っていくことにしました。

色を定義するまで

1 年前ぐらいに UI の色の定義の再確認をして、一部曖昧なところは残りつつも SCSS の変数の定義をしました。決まっていない部分があったままだったのですが、最近、未確定部分も定義して運用されはじめました。

SCSS の色の変数をまとめる

当初、variable.scss ファイルに色の定義だけではなく、いろいろな変数がまとまっていました。今後、@use を使うことを想定して、役割ごとのファイルに分割しておくことにしました。また、Stylelint などで指摘するときも、どのファイルを確認すると良いか伝えやすくなることを配慮しました。

Stylelint で色の指摘をする

定義済みの色を直接指定しようとした場合は、Stylelint のプラグインを作って指摘することにしました。定義済みの SCSS を json にすることも検討しましたが、追加や変更することは多くないので、そのまま書きました。

const stylelint = require("stylelint");
const ruleName = "tabechoku/use-ui-color";
const messages = stylelint.utils.ruleMessages(ruleName, {
  reject: (color, definedColor) =>
    `${color} は ${definedColor} が定義済みです。定義されているSCSS変数を利用してください。`,
});
const meta = {};
const colors = {
  "#ffffff": "$color-gray0",
  "#fff": "$color-gray0",
};
const ruleFunction = (primary) => {
  return (root, result) => {
    const validOptions = stylelint.utils.validateOptions(result, ruleName, {
      actual: primary,
    });
    if (!validOptions) {
      return;
    }
    root.walkDecls((decl) => {
      const matched = decl.value.match(/#.*/);
      if (!matched) {
        return;
      }
      const definedColor = colors[decl.value.toLowerCase()];
      if (definedColor) {
        stylelint.utils.report({
          ruleName,
          result,
          message: messages.reject(decl.value, definedColor),
          node: decl,
        });
      }
    });
  };
};
ruleFunction.ruleName = ruleName;
ruleFunction.messages = messages;
ruleFunction.meta = meta;
module.exports = stylelint.createPlugin(ruleName, ruleFunction);

指摘されるのがうっとうしい

Figma の Inspect に表示されるのをコピペすることが多く、Stylelint に指摘されるのはうっとうしく感じそうです。

「/ *Primary/$primary2* /」から$primary2が使われていることがわかる

Figma の Inspect では Color Style が使われているところには定義名が表示されるので、SCSS の定義名と合わせて気付けるようにしています。理想は、Zeplin のように Inspect に変数名で表示されることですが、できないのが残念です。あとは、Prettier にフォーマットしてもらう方法もあるのですが未着手です。

おわりに

Figma の Color Style で定義した色を運用するために、Stylelint で指摘することにした話でした。まだ問題はありますが、いろいろな色が実装されることは減らすことができました。

個々のデザイナーの力をより発揮しやすくする取り組みをすることで「食べチョク」の改善に向き合っていきます。

食べチョク開発者ブログ

食べチョクエンジニアによるプロダクト開発ブログ