Adobe XDでMarkdown記法を書いたテキストを、自動でスタイル付きデザイン要素に変換するプラグイン「Markdown Styler for XD」をGitHubで公開しました。
Adobe XDにはMarkdown変換プラグインが存在しませんでした。残念ながら2024年11月以降、Adobe Marketplaceでの新規プラグイン公開は停止されています。そのため、GitHubでオープンソースとして公開することにしました。
こんな時に便利
- ワイヤーフレームで仮テキストを素早くスタイリングしたい
- Markdownで書いた原稿をそのままXDに流し込みたい
- テーブルを手作業で作るのが面倒
- コードブロックや引用に背景色を付けたい
インストール方法
- GitHubからリポジトリをクローンまたはダウンロード
- XDの「プラグイン → 開発版 → 開発フォルダーを表示」
dist/xd-markdown-stylerフォルダを開発フォルダにコピー- 「プラグイン → 開発版 → プラグインを再読み込み」
詳しい手順はGitHubのREADMEをご覧ください。
GitHub
リポジトリ: https://github.com/sarap422/xd-markdown-styler
MITライセンスで公開しています。
対応しているMarkdown記法
テキストスタイル
| Markdown記法 | 変換結果 |
|---|---|
**太字** |
Bold フォント |
*斜体* |
Georgia Italic |
***太字斜体*** |
Bold Italic |
~~打ち消し線~~ |
打ち消し線 |
<u>下線</u> |
下線 |
見出し（h1〜h6）
ベースフォントサイズに対する比率で自動拡大されます。
| 記法 | 比率 |
|---|---|
# 見出し1 |
200% |
## 見出し2 |
160% |
### 見出し3 |
127% |
#### 見出し4 |
113% |
##### 見出し5 |
100% |
###### 見出し6 |
87% |
ブロック要素
| 記法 | 変換結果 |
|---|---|
`code` |
Courier New + 背景色 |
```code block``` |
複数行コード + 背景色 |
> 引用 |
背景色付き |
--- |
水平線 |
| A | B | |
テーブル（交互背景色） |
リンク・画像
| 記法 | 変換結果 |
|---|---|
[テキスト](URL) |
青色 + 下線 |
 |
プレースホルダー画像 |
使い方
- テキストレイヤーにMarkdown記法で入力
- テキストレイヤーを選択（複数選択可）
Cmd + Shift + M（Mac）またはCtrl + Shift + M（Windows）
たったこれだけで、Markdown記法がXDのスタイルに変換されます。
設定UIでカスタマイズ可能
プラグインには設定画面があり、以下の項目をカスタマイズできます。
- 見出しの拡大率（h1〜h6）
- コード・引用・テーブルの背景色
- パディング幅
- 水平線の色と太さ
- リンクの色
- 画像プレースホルダーの色
「デフォルト」「ダーク」「ミニマル」のプリセットも用意しています。
まとめ
「Markdown Styler for XD」は、XDでのテキストスタイリング作業を効率化するプラグインです。
- Markdown記法を自動でXDスタイルに変換
- テーブル・コード・引用に背景色を自動付与
- 設定UIでカスタマイズ可能
- オープンソース（MIT License）
XDを使い続けている方は、試してみてください。
