<p><img src="https://storage.googleapis.com/zenn-user-upload/d32073af5719-20230620.png" alt="プラグインのカバー画像" loading="lazy" class="md-img"></p>
<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>株式会社 Red Frasco でフロントエンドエンジニアをしている根本と申します。<br>
社内でオンライン MTG 用の背景画像を作ることになったのですが、</p>
<p><strong>「数十人分のデザインとデータを管理するのが大変...」</strong><br>
<strong>「コピペして書き換える作業が辛すぎる。。。」</strong></p>
<p>ということで、データを CSV に保存して、対象となるコンポーネントから自動でインスタンスを一括生成してくれる Figma プラグインを作ってみました！</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>既に似たようなプラグインがあり、N 番煎じでしたら申し訳ございません 🙇‍♂️<br>
以下に提起する課題がある程度解決できたらソースコードを公開したいと思っています。</p>
</div></aside>
<h1 id="%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> プラグインの概要</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__954db837c3e6b" src="https://embed.zenn.studio/card#zenn-embedded__954db837c3e6b" data-content="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F1252650737279454322%2FInstance-Generator" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.figma.com/community/plugin/1252650737279454322/Instance-Generator" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.figma.com/community/plugin/1252650737279454322/Instance-Generator</a></p>
<p>このプラグインは、コンポーネントのプロパティ情報をカラムに持つ CSV データからインスタンスを一括生成することができます。</p>
<ul>
<li>
<strong>Case1</strong>: 社員用の名刺データやオンライン MTG 用背景の一括生成</li>
<li>
<strong>Case2</strong>: コピーライトがデザインにハマるかどうかを大量に比較する</li>
</ul>
<p>などのユースケースに活用できるかなと思っています。本質的でない作業をプラグインが代用することで、デザイナーの負担を軽減することが本プラグインの目的です。</p>
<h1 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h1>
<p>以下が、簡単な使い方になります。</p>
<ol>
<li>コピー元となるコンポーネントと出力先となるフレームを作成します。</li>
<li>コンポーネントの中で可変になる部分をプロパティ化します。</li>
<li>プロパティ名がカラムとなった CSV データを用意します。</li>
<li>Figma でデザインファイルを開き、「元となるコンポーネント」と「出力先のフレーム」を選択した状態で本プラグインを実行します。</li>
<li>プラグインの中で、先ほど作成した CSV データを選択し、「作成する」ボタンを押します</li>
<li>出力先のフレームに CSV データから生成されたインスタンスが一括作成されます。</li>
</ol>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>現在はまだベータ段階であるため、予期せぬ動作やバグが起きる可能性があります。改善点やバグが見つかった場合は、お知らせいただければ幸いです 🙇‍♂️</p>
</div></aside>
<p>実際に想定されるユースケースに沿った使い方をご紹介します！</p>
<h2 id="%E4%BE%8B-1)-%E7%A4%BE%E5%93%A1%E7%94%A8%E3%81%AE%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3-mtg-%E7%94%A8%E8%83%8C%E6%99%AF%E3%81%AE%E4%B8%80%E6%8B%AC%E7%94%9F%E6%88%90">
<a class="header-anchor-link" href="#%E4%BE%8B-1)-%E7%A4%BE%E5%93%A1%E7%94%A8%E3%81%AE%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3-mtg-%E7%94%A8%E8%83%8C%E6%99%AF%E3%81%AE%E4%B8%80%E6%8B%AC%E7%94%9F%E6%88%90" aria-hidden="true"></a> 例 1) 社員用のオンライン MTG 用背景の一括生成</h2>
<p>今回プラグインを作成するに至った「<strong>社員用のオンライン MTG 用背景の一括生成</strong>」というのユースケースです。以下の手順でプラグインを使用します。<br>
簡単に動画も作ってみました（クオリティ...笑）<br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/JOUU9nMFVgM" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=JOUU9nMFVgM" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=JOUU9nMFVgM</a></p>
<h3 id="%E6%89%8B%E9%A0%86-1%3A-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-1%3A-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 手順 1: コンポーネントの作成</h3>
<p>コンポーネントを作成します。可変にした部分をプロパティ化します。<br>
この時、プロパティ化する部分は Auto Layout で組むとスタイリングがいい感じになります。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/0b17cd3a146a-20230625.png" alt="コンポーネントの作成" loading="lazy" class="md-img"></p>
<h3 id="%E6%89%8B%E9%A0%86-2%3A-csv-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E7%94%A8%E6%84%8F">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-2%3A-csv-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E7%94%A8%E6%84%8F" aria-hidden="true"></a> 手順 2: CSV データの用意</h3>
<p>プロパティをカラムにもつ CSV データを作成します。実際のデータ作成は非デザイナーの方にお願いして管理してもらうなどのケースを想定しています。<br>
サンプルの csv はこちらです。（架空のデータです）</p>
<details><summary>sample.csv</summary><div class="details-content"><div class="code-block-container"><pre><code>name-jp,name-en,job-jp,job-en
根本 貴志,Takashi Nemoto,開発,Engineer
伊藤 美香,Mika Ito,営業,Sales Representative
山田 健太,Kenta Yamada,マーケティング,Marketing Specialist
佐藤 さくら,Sakura Sato,デザイン,Designer
中村 一郎,Ichiro Nakamura,人事,Human Resources
鈴木 由美,Yumi Suzuki,会計,Accountant
小林 太郎,Taro Kobayashi,研究,Researcher
高橋 真理,Mari Takahashi,コンサルティング,Consultant
田中 悠子,Yuko Tanaka,プロジェクトマネージャー,Project Manager
渡辺 雄一,Yuichi Watanabe,営業,Sales Representative
斎藤 みなみ,Minami Saito,マーケティング,Marketing Specialist
木村 恵美,Emi Kimura,デザイン,Designer
山本 健介,Kensuke Yamamoto,開発,Engineer
井上 美穂,Miho Inoue,人事,Human Resources
三浦 聡子,Satoko Miura,会計,Accountant
吉田 謙介,Kensuke Yoshida,研究,Researcher
斉藤 美佐子,Misako Saito,コンサルティング,Consultant
山田 裕子,Yuko Yamada,プロジェクトマネージャー,Project Manager
鈴木 裕太,Yuta Suzuki,営業,Sales Representative
田中 美咲,Misaki Tanaka,マーケティング,Marketing Specialist
小林 光男,Mitsuo Kobayashi,デザイン,Designer
高橋 みゆき,Miyuki Takahashi,開発,Engineer
渡辺 誠,Makoto Watanabe,人事,Human Resources
斎藤 彩子,Ayako Saito,会計,Accountant
木村 太一,Taichi Kimura,研究,Researcher
山本 美香,Mika Yamamoto,コンサルティング,Consultant
井上 健太,Kenta Inoue,プロジェクトマネージャー,Project Manager
三浦 知佳,Chika Miura,営業,Sales Representative
吉田 太郎,Taro Yoshida,マーケティング,Marketing Specialist
斉藤 さゆり,Sayuri Saito,デザイン,Designer

</code></pre></div></div></details>
<p><img src="https://storage.googleapis.com/zenn-user-upload/d33de3cad51d-20230625.png" alt="CSV データの用意" loading="lazy" class="md-img"></p>
<h3 id="%E6%89%8B%E9%A0%86-3%3A-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-3%3A-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> 手順 3: プラグインの起動</h3>
<p>参照元となるコンポーネントと出力先となるフレームを 2 つ選択した状態でプラグインを起動します。<br>
プラグイン起動後は先ほど作成した CSV データを選択します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/fa57f3451ba3-20230625.png" alt="プラグインの起動" loading="lazy" class="md-img"></p>
<h3 id="%E6%89%8B%E9%A0%86-4%3A-%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%AE%E4%B8%80%E6%8B%AC%E7%94%9F%E6%88%90">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-4%3A-%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%AE%E4%B8%80%E6%8B%AC%E7%94%9F%E6%88%90" aria-hidden="true"></a> 手順 4: インスタンスの一括生成</h3>
<p>「作成する」ボタンを押下すると、出力先のフレームに CSV データから生成されたインスタンスが一括作成されます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/646f563be0a8-20230625.png" alt="インスタンスの一括生成" loading="lazy" class="md-img"></p>
<h1 id="%E4%BB%8A%E5%BE%8C%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9" aria-hidden="true"></a> 今後の改善点</h1>
<p>今後以下のようなアップデートを考えています。（現在のところ、社内でサクッと使えるレベルのものなので...😭）</p>
<ul>
<li>エラーハンドリングがグチャグチャなので設計し直す</li>
<li>データ元となる CSV ファイル（コンポーネントのプロパティ情報をカラムにもつ）を出力できるようにする</li>
<li>一括生成する際、各インスタンスのマージンや順序などを自由に変更できるようにする</li>
</ul>
<p>これらの改善をし、より使いやすいプラグインを目指して開発を進めていきます！</p>


CSVから対象コンポーネントのインスタンスを一括生成するFigmaプラグインを作ってみた

手順 4: インスタンスの一括生成

例 1) 社員用のオンライン MTG 用背景の一括生成

Discussion