XDでコーディングを楽にするおすすめなプラグインを紹介します!

コーディングを楽にするXDのおすすめなプラグインを紹介します!

takato(@n8takato)です!

XDで作成したwebデザインをコーディングする際に楽な方法があるか知りたい。

この記事は上記の課題に向けて作成しております。

XDにはコーディング作業をサポートする機能が備わっています。
この機能を使うことでコーディングを早く楽に行うことが出来ます。

XDユーザーでかつコーディング作業を担当する方は是非読んでください。

この記事を読むメリット

  • デザインデータがXDの場合、コーディング作業が楽になる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

XDに関する他の記事はこちら↓

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【AdobeXD】クリッピングマスクをかける方法を説明します! XDでマスクをかける方法を知りたい。 この記事は上記の課題に向けて作成しています。 XDはIllustrator同様にマスクをかけることが出来ます。 マスクをかける方法につい...
目次

XDでコーディングを楽にするプラグイン

コーディングを楽にするXDのおすすめなプラグイン
コーディングを楽にするXDのおすすめなプラグイン

冒頭で説明した通りXDにはコーディング業務をサポートしてくれるプラグインがあります。

コーディング業務をサポートするプラグイン

  • Copy CSS to Clipboard

cssコードを自動で生成

「Copy CSS to Clipboard」はXDからcssコードを自動で生成してくれる優れたプラグインです。

普段コーディングする際はcssコードを1から作成しますよね。ですが「Copy CSS to Clipboard」を使うと選択した部分のcssコードを一瞬で生成してくれます。

プラグインをインストールするとcssのコーディング時間が短縮出来ます。

Copy CSS to Clipboardを導入する方法

Copy CSS to Clipboardを導入する方法
Copy CSS to Clipboardを導入する方法

「Copy CSS to Clipboard」の導入方法を説明します。

導入手順は下記の通りです。

  1. XDの「プラグイン」→「プラグインを管理」を選択
  2. 「Copy CSS to Clipboard」を検索
  3. 「Copy CSS to Clipboard」を入手する

XDの「プラグイン」→「プラグインを管理」を選択

XD上部のメニュー「プラグイン」を選択します。

表示された中の「プラグインを管理」を選択します。

するとcreative cloudが自動で開きます。

プラグインを管理
プラグインを管理

「Copy CSS to Clipboard」を検索

creative cloudの左にある「おすすめのプラグイン」を選択します。

続いて検索ボックスに「Copy CSS to Clipboard」と検索します。

creative cloud
creative cloud

「Copy CSS to Clipboard」を入手する

検索結果にある「Copy CSS to Clipboard」をインストールします。

「入手」をクリックするとインストールされます。

※僕は既にインストールしているので「インストール済み」と表示されています。

Copy CSS to Clipboard
Copy CSS to Clipboard

Copy CSS to Clipboardの使い方

Copy CSS to Clipboardの使い方
Copy CSS to Clipboardの使い方

続いて「Copy CSS to Clipboard」の使い方を説明します。

「Copy CSS to Clipboard」でcssコードを生成する手順は下記の通りです。

  1. cssコードを生成したい図形などを選択
  2. 左下にあるプラグインメニューを選択
  3. 「Copy CSS to Clipboard」を選択
  4. 「Copy CSS」を選択してcssコードをコピーする
  5. コードを貼り付ける

cssコードを生成したい図形などを選択

cssコードを抽出したい図形などを選択します。

今回は下記のオレンジ色のボタンのcssコードを抽出してみます。

図形を選択する
図形を選択する

左下にあるプラグインメニューを選択

プラグインメニューを選択します。

プラグインメニューはXDの画面左下にあります。

プラグインメニューを選択する
プラグインメニューを選択する

「Copy CSS to Clipboard」を選択

インストールしたプラグイン一覧が表示されます。

この中の「Copy CSS to Clipboard」を選択します。

Copy CSS to Clipboardを選択する
Copy CSS to Clipboardを選択する

「Copy CSS」を選択してcssコードをコピーする

プルダウンで「Copy CSS」が表示されたと思います。

cssコードを生成したい図形を選択した状態で「Copy CSS」を選択すると、cssコードがコピーされます。

Copy CSSを選択する
Copy CSSを選択する

これで選択した図形のcssコードをコピーすることが出来ました。

以降は図形を選択した状態で「Copy CSS」をクリックすると生成されたcssコードをコピー出来ます。

コードを貼り付ける

コピーしたコードを貼り付けます。

上記の図形では下記のcssコードがコピーされました。

width: 500px;
height: 90px;
background: #ffc872;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));

こちらのコードを任意のクラスに貼り付けるだけです。

cssコードが簡単に作成出来たと思います。

Copy CSS to Clipboardを使うメリット

Copy CSS to Clipboardを使うメリット
Copy CSS to Clipboardを使うメリット

「Copy CSS to Clipboard」を使うメリットは、なんといってもcssの記述が早くなることです。

コーディングが遅いのはやばい?

web制作に限らずビジネスの世界では速さと正確さが求められます。

正確さに時間をかけても納期に間に合わなければ意味がありません。

web制作の現場でのコーディングの速さを求められます。

速さと正確さを手に入れられる

XDの「Copy CSS to Clipboard」を導入することで、コーディングの速さと正確さを手に入れることが出来ます。

影やグラデーションなどcssで実装するのが少し面倒な部分もコードを生成してくれます。

コーディングのcss部分が大幅に短縮出来るので、その分凝ったアニメーションなどに使うことが出来ます。

プラグインを導入して作業時間を短縮しよう!

プラグインを導入して作業時間を短縮しよう!
プラグインを導入して作業時間を短縮しよう!

まとめです。

XDのプラグイン「Copy CSS to Clipboard」を導入するとcssコードを自動で生成してくれます。

そのためcssのコーディング時間が短縮されます。

他のアニメーションを拘るのも良いですし早く帰って好きなように時間を使うのもありです。

作業時間を短縮して余った時間を効率的に過ごしてみてください。

\楽天ポイント5倍セール!/
楽天市場
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる