xdのプラグインメモ

要素のcssを取得したい

プラグイン「Copy CSS」を使う。

ここからインストール

Copy CSS と入力するとでてくる

cssを取得する

書き出されるコード(一例)

width: 360px;
height: 70px;
border-radius: 4px;
background: linear-gradient(#48b047 0%, #45d943 99.56%, #45d943 100%);
border: 1px solid #399b38;

参考 : https://yukinishimura.net/adobe-xd-coding/

html形式で出力したい

プラグイン「Web Export」を使う。

選択画面

選択するとこんな感じの画面が出てくる

もろもろ設定すると書き出しが行われる

注意

適当に選択すると余計なものも出てくる。

多角形の図形を作る

http://romantist.jp/blog/xd-pulgin-polygon/

三角形などの多角面の図形を簡単に作ってくれるプラグイン。 図形を選んで cmd + c で

<svg xmlns="http://www.w3.org/2000/svg" width="32.209" height="58.962" viewBox="0 0 32.209 58.962">
  <path id="パス_128" data-name="パス 128" d="M2.209-22.481-30,7V-51.962Z" transform="translate(30 51.962)"/>
</svg>

のような感じでsvgの書き出しを行ってくれる。

対象のもの

サイトで使われている色などを取得する

「Mimic」のプラグインを使えば現在のサイトで使われている色などを取得することができる。

https://www.google.com/ と入力すると

のような感じで出力を行ってくれる。