タケユー・ウェブ日報

Webシステム受託会社の業務の中での気づきや調べごとのメモ。

Adobe XD + VSCode + Flutter でデザイントークンを開発者に共有する

先日VSCodeAdobe XDプラグインが公開され、Adobe XDで作成したプロトタイプをコーディングに利用することが可能になりました。 利用までの手順と、実際に何ができて何ができないのか?試してみたので記録しておきます。

coliss.com

letsxd.com

Adobe XD + VSCode でできること

Adobe XD + VSCode でできないこと

操作手順

前提

  • VScode + Flutter のインストールを終えていて適当なプロジェクトが作成済み
  • Adobe XD のインストールを終えていて適当なプロトタイプが作成済み

1. Adobe XD のアセットをCCライブラリに公開する

アセットの各アイテムに名前を付け、公開します。

f:id:uzuki05:20201122162446p:plain
アセットパネルから『ライブラリとして公開』を選択

f:id:uzuki05:20201120184559p:plain
Adobe CCライブラリ

2. VSCode への Adobe XD プラグインのインストール

VSCodeを開いて Adobe XD プラグインを検索してインストールします。 なおこのプラグインはグローバルで有効化されるので、リモート開発でも個別にインストールする必要はありません。

f:id:uzuki05:20201120182329p:plain
Adobe XD プラグイン

3. Adobe XD プラグインDSP: Design System Package を作成

使用したいプロジェクトでXDプラグインを使います。

f:id:uzuki05:20201120185537p:plain
XDプラグインを開く

[Create package] へ進み、適当なパッケージ名と保存先を指定します。 Adobe CCライブラリで取得した共有リンクを指定してインポートを実行します。

f:id:uzuki05:20201120191002p:plain
Create Package

f:id:uzuki05:20201120191115p:plain
保存先を指定

f:id:uzuki05:20201120191209p:plain
コンパイルターゲットを指定。今回はCSSDart

f:id:uzuki05:20201120191320p:plain
CCライブラリを開いて共有リンクを取得

f:id:uzuki05:20201120191408p:plain
インポートを開始

f:id:uzuki05:20201120191450p:plain
インポートが終わるとデザイントークンやコンポーネントを確認できます

f:id:uzuki05:20201120191542p:plain
デザイントークンを確認できます

4. DSPからコードを生成する

Start editingから編集モードに入り、Finish editingを押して終了すると、そのタイミングでターゲットへのコンパイルが行われます。

f:id:uzuki05:20201120191816p:plain
Start Editing

f:id:uzuki05:20201120191901p:plain
Finish Editing

f:id:uzuki05:20201120191931p:plain
初回は Style Dictionary のインストールを要求されます。

f:id:uzuki05:20201120192054p:plain
コンパイル成功しました!

f:id:uzuki05:20201120192209p:plain
生成されたファイル
実際に生成されたコードです。

/**
 * Do not edit directly
 * Generated on Fri, 20 Nov 2020 10:20:42 GMT
 */

:root {
  --text-primary: #ffffff;
  --primary: #478aff;
  --text-default: #333333;
  --danger: #c30000;
  --default-family: Yu Gothic;
  --default-weight: Regular;
  --h-1-family: Yu Gothic;
  --h-1-weight: Bold;
  --default-size: 16rem;
  --h-1-size: 24rem;
}
//
// style_dictionary.dart
//
// Do not edit directly
// Generated on Fri, 20 Nov 2020 10:20:42 GMT
//


import 'dart:ui';

class StyleDictionary {
  StyleDictionary._();
  
    static const danger = Color(0xFFC30000);
    static const primary = Color(0xFF478AFF);
    static const textDefault = Color(0xFF333333);
    static const textPrimary = Color(0xFFFFFFFF);
    static const defaultFamily = "Yu Gothic";
    static const defaultWeight = "Regular";
    static const h1Family = "Yu Gothic";
    static const h1Weight = "Bold";
    static const defaultSize = 256.00;
    static const h1Size = 384.00;
}

5. 生成されたコードを利用する

入力したパッケージ名/dist/styledictionary/flutter/style_dictionary.dart に生成されたファイルがあるのでインポートして使います。

import 'style_dictionary.dart';

// 省略

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox.expand(
          child: Container(
            color: StyleDictionary.primary,
            child: Text(
              "Hello",
              style: TextStyle(
                color: StyleDictionary.textPrimary
              )
            ),
          )
        )
      )
    );
  }

その他

ビルド設定を変更する

ためしに flutter の書き出し先を変更してみます。

設定ファイルを作成

DSP名/dist/styledictionary/config.jsStyle Dictionary のビルド設定がありますが、これは自動生成されるため変更できません。 config2.js など適当なファイルにコピーしてこちらを変更します。

// config2.js
const StyleDictionary = require('style-dictionary').extend({
  "source": [
    "properties/colors.json",
    "properties/fonts.json",
    "properties/custom.json",
    "properties/sizes.json"
  ],
  "platforms": {
    "css": {
      "files": [
        {
          "destination": "variables.css",
          "format": "css/variables"
        }
      ],
      "transformGroup": "css",
      "buildPath": "css/"
    },
    "flutter": {
      "files": [
        {
          "destination": "style_dictionary.dart",
          "format": "flutter/class.dart",
          "className": "StyleDictionary"
        }
      ],
      "transformGroup": "flutter",
//      "buildPath": "flutter/"
      "buildPath": "../../../lib/"  // 変更
    }
  }
});
// (省略)

2. DSP settings

VSCodeのXDプラグインDSP settingsを変更します。

f:id:uzuki05:20201122150026p:plain
DSP settings

f:id:uzuki05:20201122150114p:plain
Build parameters に config2.js を指定する

変更後は再度 Start editing & Finish editing すると実行されます。

f:id:uzuki05:20201122150820p:plain
config2.js で指定したパスに style_dictionary.dart を生成した

コードスニペットを使う

コードスニペットの登録

f:id:uzuki05:20201122151038p:plain
XDプラグインDSPを開き、Code snippet の鉛筆アイコンをクリック

f:id:uzuki05:20201122152106p:plain
コードスニペットの呼び出しトリガー、言語、スニペットの内容を記入してチェックアイコンをクリック

f:id:uzuki05:20201122152419p:plain
Tokens にはこのコンポーネントで参照するデザイントークンを指定しておきます

終わったらFinish editingをクリック

コードスニペットの使用

DSPを読み込んだプロジェクト内でトリガー文字列を入力するとポップアップで表示され、Enterキーでスニペットが挿入されます。

f:id:uzuki05:20201122152848p:plain
トリガー文字列でプレビューと共に表示

Adobe XDでの更新を取り込む

Adobe XD で変更すると『更新を公開』できるので、公開します。

f:id:uzuki05:20201122154141p:plain
Adobe XD で変更すると更新を公開にマークが付く

f:id:uzuki05:20201122154422p:plain
更新ボタンをクリック

DSP settings の CC LIBRARY LINK の Import ボタンをクリックすると、更新分をマージできます。

f:id:uzuki05:20201122154454p:plain
ImportボタンでCCライブラリから更新を取り込みます

Start editing が出てこない

VSCodeのどのフォルダー/ワークスペースでもないグローバルの画面で XD プラグインを開き、DSPパッケージを作成または読み込んだとき、DSP settings も Start editing も見当たりません。

f:id:uzuki05:20201122154638p:plain
グローバルでDSPを読み込むと、DSP settings と Start editing ボタンが表示されない

これを解決するには、DSPを使用するフォルダー/ワークスペースDSPを読み込むか、グローバルエディターの機能を有効にします。

f:id:uzuki05:20201122155149p:plain
Enable editor mode in settings

f:id:uzuki05:20201122155241p:plain
Xd: Global Editor にチェックを入れる