system
矢口 奈果

2021.1.15HTML/CSS 

Webクリエイター

矢口 奈果

【VScode】XDプラグインでスニペットを作成する方法

2020年10月にVScodeとXDの連携が可能になりました。
VScodeのXDプラグインでスニペットを作成する方法をご紹介します。

事前準備

・XDにてアセットライブラリの作成を行なってください。
作成したアセットライブラリからスニペットを作成します。

・VScodeにXDプラグインをインストール(インストールはこちら

手順

手順イメージ

①VScodeでXDプラグインを起動。

②DSP(Design System Package)を作成。

※「How to use」から解説動画(英語)が閲覧可能です。

手順イメージ

③DSP名を入力。

④DSPを保存するフォルダを選択。

⑤次へ。

手順イメージ

⑥DSPで使用する言語を選択。

⑦次へ。

手順イメージ

⑧Adobe IDの認証。Adobeの公式サイトが開くので「アクセスの許可」を行なってください。
アセットライブラリの読み込みを行わずにスニペットを作成する人は認証をスキップして問題ないです。

⑨次へ。

手順イメージ

⑩XDを起動し、事前に準備しておいたアセットライブラリを開きます。

⑪アセットライブラリを公開。

手順イメージ

⑫「参照」からCreative Cloudに飛びます。

手順イメージ

⑬Creative Cloudを開いた後、読み込みたいライブラリを右クリック。

⑭リンクを取得を選択。

手順イメージ

⑮リンクをコピー

手順イメージ

⑯VScodeに戻り、取得したリンクを入力。

⑰リンクをインポート。

⑱次へ。

手順イメージ

⑲アセットライブラリが読み込まれたことを確認し、クリック。

⑳Style Dictionaryをインストール。

手順イメージ

㉑読み込んだアセットライブラリから編集したいアセットを選択。

㉒クリック。

手順イメージ

㉓スニペットを編集。

手順イメージ

㉔スニペット名を入力。(最終的には入力したスニペット名の頭に”xd_”が付きます。)

㉕言語を選択。

㉖ソースコードの入力。

㉗スニペットの編集を完了する。

手順イメージ

㉘スニペット名を入力し呼び出します。

手順イメージ

㉙スニペットが読み込めることを確認。

手順イメージ

㉚他の言語も呼び出せるか確認。先ほどの手順でCSSを設定。

手順イメージ

㉛スニペットを読み込めることを確認。

まとめ

スニペットの他にもカラーコードや文字サイズの管理ができるようです。
今後は、XDプラグインを利用してプロジェクトごとに管理を行いたいと思います。

また、アセットライブラリを読み込まずにスニペットを作成することもできるので、Adobe IDを持っていない人でもXDプラグインの利用自体は可能です。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ