最初にオチから
- XD側での準備が重要。アセットの名前の頭文字を数字にしては駄目。
Adobe XD から Visual Studio Code（VS Code） に Design System Packages（DSP）を読み込ませる基本的な機能についてはこちらを参照してください。
https://letsxd.com/vscode
XD→VS CodeでScssを生成する手順
※Macでしか確認していません。その他の環境の方、ごめんなさい。
- Adobe XD
- [ファイル]→[ライブラリの管理]を選択
- 現在のファイルの[公開]を選択
- 共有者は自分のみでOK
- Adobe Creative Cloud
- ウィンドウを開き[作品]タブを選択
- CC ライブラリから該当のドキュメントを選択
- 右上の[表示専用アクセス]の右の[…]を選択し
- 表示されたリストの[リンクを取得]を選択
- リンクが生成されたら[リンクをコピー]を選択
- VS CodeとXDの接続
- XD機能を使用可能にする
- 拡張機能からAdobe XDをインストール
- 右下の[XD]ボタンを選択
- DSP name and locaiton設定
- [Create package]を選択
- [DESIGN SYSTEM PACKAGE NAME]を入力
- [SAVE LOCATION]を選択
- [NEXT]を選択
- Languages設定
- 今回はScssの書き出しなので[CSS]のチェックを外し、[SCSS]のチェックを入れる
- Creative Cloud Libraries設定
- [Authenticate]を選択
- ウィンドウが開いてAdobe CCの自分のアカウントと紐付けしてください
- [CC LIBRARY LINK]に 2 で取得したリンクを入力
- [Import]を選択
- [Authenticate]を選択
- XD機能を使用可能にする
- VS Code側でとりあえずScssの書き出し
- XDタブの左下の[Start editing]を選択
- そのまま[Finish editing]を選択
- 「In order to compile your tokens, Please install Style Dictionary locally.」というアテンションが出るので[Install]を選択
- style dictionaryの情報が出るので[Export tokens]を選択
- 「Tokens compiled to SCSS」と出るので、ここでSCSSが書き出し完了
ここで問題発生
XDで完全にデフォルトの文字色は「#707070」。
この色をアセットに登録して、手を加えないままだと問題が発生します。
おそらくデフォルトのXDのアセットの色表示はカラーチップのような見た目で、その色の名前が表示されていませんが、リスト表示にすると「#707070」という名前が表示されます。
この「#707070」という名前のまま、VS Codeに持ち込んでScssを生成すると
$707070: #707070;
のような変数を作り出してしまい、Scssのルールに違反してしまいエラーとなりCSSが生成できません。
また、この状況になった際にVS Code側でToken IDを「color_gray」のように編集して変数名を修正した場合、再インポートのタイミングで再び同じ変数が生成されてしまいます。
$707070: #707070;
$color_gray: #707070;
逆にXD側で修正した場合、ローカルに残っている「$707070」は別のものとして扱われるため結局
$707070: #707070;
$color_gray: #707070;
のようになります。
修正する場合は、XD側で修正し、VS Code側でエラーになっている変数をちまちま削除する方法しかなさそうです。
（上手い修正方法をご存知の方がいらっしゃれば、教えていただけると助かります。🙇🏻♂️）