<p><a href="https://www.figma.com/community/plugin/851183094275736358" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/851183094275736358</a><br></p><h3 id="h3281b07c80">Export images</h3><p><a href="https://www.figma.com/community/plugin/1073791321657719341?fuid=1302939569881205313" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/1073791321657719341?fuid=1302939569881205313</a><br>今動いてない？</p><h3 id="h04bf682957">WebP Exporter</h3><p><a href="https://www.figma.com/community/plugin/1181873200384736932" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/1181873200384736932</a><br>nodeが多いとUIがフリーズするから減らしてね。が出る<br>exporting many freeze the UI.Try selecting fewer or smaller nodes</p><h3 id="h750d5a3955">Export Original Images</h3><p><a href="https://www.figma.com/community/plugin/973190386632562805" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/973190386632562805</a><br>オリジナル画像がエクスポートできる</p><h3 id="h2f5a0befae">Export &amp; Resize Images (JPEG, PNG, WebP and TTIF)</h3><p><a href="https://www.figma.com/community/plugin/1370731988423238311/export-resize-images-jpeg-png-webp-and-ttif" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/1370731988423238311/export-resize-images-jpeg-png-webp-and-ttif</a><br>zipでまとめてエクスポートできる</p><h3 id="h750d5a3955">Export Original Images</h3><p><a href="https://www.figma.com/community/plugin/973190386632562805/export-original-images" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/973190386632562805/export-original-images</a><br>トークン<br><a href="https://www.figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens" target="_blank" rel="noopener noreferrer">https://www.figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens</a><br>@create-figma-plugin<br><a href="https://yuanqing.github.io/create-figma-plugin/ui/" target="_blank" rel="noopener noreferrer">https://yuanqing.github.io/create-figma-plugin/ui/</a><br>Figma API のおさらい – ファイル内のコンポーネントのアセットを1コマンドでZIP化してみる<br><a href="https://blog.photosynthesic.jp/2021/12/figma-api-zip-test/" target="_blank" rel="noopener noreferrer">https://blog.photosynthesic.jp/2021/12/figma-api-zip-test/</a><br>jszipの参考<br><a href="https://github.com/dicedvo/imagen-figma/blob/35d1971594badf24da1f01986e6a9c2ad40bc417/src/ui.tsx#L20" target="_blank" rel="noopener noreferrer">https://github.com/dicedvo/imagen-figma/blob/35d1971594badf24da1f01986e6a9c2ad40bc417/src/ui.tsx#L20</a><br>Blobとは何か理解していない方へ<br><a href="https://zenn.dev/kazu1/articles/736991963449d6" target="_blank" rel="noopener noreferrer">https://zenn.dev/kazu1/articles/736991963449d6</a></p><h3 id="h2f5a0befae">Export &amp; Resize Images (JPEG, PNG, WebP and TTIF)</h3><p><a href="https://www.figma.com/community/plugin/1370731988423238311/export-resize-images-jpeg-png-webp-and-ttif" target="_blank" rel="noopener noreferrer">https://www.figma.com/community/plugin/1370731988423238311/export-resize-images-jpeg-png-webp-and-ttif</a><br>説明が誰向きかわかりやすい<br>Figmaのメモリ<br><a href="https://note.com/chatworkdesign/n/n391bacf911c8" target="_blank" rel="noopener noreferrer">https://note.com/chatworkdesign/n/n391bacf911c8</a><br>Fimaのメモリ表示<br><a href="https://help.figma.com/hc/ja/articles/360040528173-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%AE%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%BC%E4%BD%BF%E7%94%A8%E9%87%8F%E3%81%AE%E5%89%8A%E6%B8%9B" target="_blank" rel="noopener noreferrer">https://help.figma.com/hc/ja/articles/360040528173-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%AE%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%BC%E4%BD%BF%E7%94%A8%E9%87%8F%E3%81%AE%E5%89%8A%E6%B8%9B</a><br><br>zipの実行時間を確認</p><pre><code>const startTime = performance.now();
処理
const endTime = performance.now();
          console.log(`ZIP生成時間: ${(endTime - startTime).toFixed(2)} ms`);</code></pre><p>3.17MB ZIP生成時間: 80.90 ms 10枚　png<br>9.5MB ZIP生成時間: 195.70 ms　30枚　png<br>15MB ZIP生成時間: 286.20 ms 50枚　png<br>変更後<br>ZIP生成時間: 163.70 ms 10枚　png<br>ZIP生成時間: 464.70 ms　30枚　png<br>ZIP生成時間: 729.90 ms　50枚　png<br>再変更後：並列処理<br>ZIP生成時間: 59.10 ms　10枚<br>ZIP生成時間: 225.30 ms　30マイ<br>ZIP生成時間: 328.00 ms　50マイ<br>生成前と生成後のメモリの動き<br>10枚<br>ZIP生成前 787871475<br>ZIP生成時間: 101.80 ms<br>ZIP生成後 792058482<br>30枚<br>ZIP生成前 786444051<br>ZIP生成時間: 249.80 ms<br>ZIP生成後 748556676<br>50枚<br>ZIP生成前 810115999<br>ZIP生成時間: 386.10 ms<br>ZIP生成後 778780513<br>100マイ　31MB<br>ZIP生成前 809095516<br>ZIP生成時間: 621.00 ms<br>ZIP生成後 844117102<br><br>1920x高さ800～1200のレンジ幅ある画像　JPG<br>10枚　4MB　1511.40 ms<br>30枚　12.3MB　5220.00 ms<br>50枚　20MB　7775.70 ms<br>100枚　41MB　17191.50 ms<br>PNG版<br>10枚　2.6MB 3062.30 ms<br>30枚　8MB　9509.20 ms<br>50枚　13MB　15992.90 ms<br>100枚　26MB　32719.40 ms<br><br>同じ画像でエクスポート設定をJPGにした<br>JPG 10枚　ZIP生成時間: 230.10 ms<br>JPG 30枚　ZIP生成時間: 211.50 ms<br>JPG 50枚　ZIP生成時間: 481.60 ms<br>JPG 100枚　ZIP生成時間: 728.90 ms 41MB<br>別の画像<br>PNG 10枚　3000x3000px 25.6MB<br>21946.50 ms<br>JPG 10枚　3000x3000px 71MB<br>11693.80 ms<br>PNG　10枚 5000x5000px 28MB<br>44826.60 ms<br>JPG 10枚 5000x5000px 154MB<br>31587.80 ms&nbsp;<br><br>日本語文字化け問題<br>単一ファイルを保存するときはそのままのレイヤー名が日本語でも文字化けしなかった<br>jszipでＤＬしたzipを解凍すると解答するツールによって文字化けしてしまった<br>zip.fileに入れるときにエンコードしても治らない</p><pre><code>        images.forEach((image: ImageData) =&gt; {
          const { name, data, format, suffix } = image;
          // const encodedName = encodeURIComponent(name);
          const fileName = `${name}${suffix}.${format.toLowerCase()}`;
          // Windows のエクスプローラー対応：Shift_JIS に変換
  //         const sjisFileNameArray = Encoding.convert(fileName, {
  //           to: "SJIS",
  //           from: "UNICODE",
  //           type: "array",
  //         });
  //           // Uint8Array に変換（JSZipがバイナリファイル名を解釈できるようにする）
  // const sjisFileNameUint8Array = new Uint8Array(sjisFileNameArray);
          // Shift_JIS のバイナリ文字列に変換
          zip.file(fileName, data);
        });</code></pre><p>blobにするときにshift_jis</p><pre><code>        const blob = await zip.generateAsync({
          type: "blob",
          compression: "DEFLATE",
          encodeFileName: (name) =&gt; {
            // Shift_JIS に変換し、バイナリ文字列に変換
            return Encoding.codeToString(
              Encoding.convert(name, {
                to: "SJIS",
                from: "UNICODE",
                type: "array",
              })
            );
          },
        });</code></pre><p>windowsの7-zipでは問題ない<br>windowsのコンテキストから解凍で文字化け<br>mac環境がないので↓で試す</p><ul><li><strong>✅7-Zip で解凍テストする</strong><ul><li>7-Zip は macOS の Finder に比べて UTF-8 に強いため、<strong>Windows のエクスプローラーで文字化けしても 7-Zip では正しく表示される</strong> 可能性がある。</li><li><strong>7-Zip で解凍して文字化けしないなら macOS でも問題ない</strong> 可能性が高い。</li><li><strong>逆に 7-Zip で文字化けするなら macOS でも文字化けする可能性大。</strong></li></ul></li><li><strong>✅Windows 上の WSL (Ubuntu) でテスト</strong><ul><li><strong>WSL (Windows Subsystem for Linux) に Ubuntu をインストールし、</strong><code>unzip</code> コマンドで解凍テスト</li><li>WSL の Linux 環境は macOS の Finder に近い挙動を示すため、<strong>正しく解凍されるか確認できる</strong>。</li></ul></li><li><strong>手順</strong><ol><li>WSL (Ubuntu) をインストール</li><li><code>unzip</code> コマンドをインストール (<code>sudo apt update &amp;&amp; sudo apt install unzip</code>)</li><li><code>unzip sample.zip -d test_folder/</code> で解凍してファイル名を確認</li></ol></li><li><strong>✅Mac 風の解凍ツールを試す</strong><ul><li>Windows で UTF-8 の解凍を適切に行うツールを使う</li></ul></li><li><strong>「Explzh（エクスプローラ風アーカイバ）」</strong> は Windows 上で macOS の UTF-8 に近い解凍挙動を持つ<ul><li><strong>Explzh</strong> → <a href="https://www.ponsoftware.com/" target="_blank" rel="noopener noreferrer">公式サイト</a></li><li><strong>「WinRAR」</strong> も試す価値あり。</li></ul></li><li><strong>✅オンラインの解凍ツールを使う</strong><ul><li>macOS の Finder での解凍と似た挙動のオンラインツールを使う</li><li>例: unzip-online.com</li></ul></li><li><strong>試してない｜仮想環境で macOS を動かす</strong><ul><li>最も確実なのは macOS の仮想環境を作る方法</li></ul></li><li>Windows で macOS を仮想マシンで動かせるツール：<ul><li><strong>「macOS-Simple-KVM」</strong> (Linux の KVM 上で macOS を動かす)</li><li><strong>「VMware Workstation」</strong>（macOS の ISO イメージが必要）</li></ul></li></ul><pre><code>        const blob = await zip.generateAsync({
          type: "blob",
          compression: "STORE",</code></pre><p>DEFLATEにしたら透過部分が透過だけど黒はいって圧縮かかってしまったので、STOREに変更<br>jszipのオプションです　STORE<br><a href="https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html#compression-and-compressionoptions-options" target="_blank" rel="noopener noreferrer">https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html#compression-and-compressionoptions-options</a></p>

<h2 id="hf5cbd78e79">PureImage Export</h2><p>作成したプラグインは下記のURLをご覧ください。</p><p><a href="https://www.figma.com/community/plugin/1479843311486845733/pureimage-export" target="_blank" rel="noopener noreferrer nofollow">https://www.figma.com/community/plugin/1479843311486845733/pureimage-export</a></p><p>選択したレイヤーの角丸やエフェクトを解除することなく、プラグインを使用することで、それらを一時的に無効化した状態でエクスポート・保存できます。</p><p>また、複数のレイヤーを選択した場合は、ZIPファイルとしてまとめてダウンロードすることが可能です。</p><h3 id="h459285c7f7">おすすめの方</h3><ul><li>FigmaからWebコーディング用に最適化された画像をエクスポートしたい方</li><li>Figmaから簡単に画像を取り込みたいWebデザイナーやフロントエンド開発者</li></ul><h3 id="hdabfaee831">PureImage Export の特徴</h3><ul><li>🧹 角丸＆エフェクトの解除</li><li>🔍 プレビュー表示</li><li>📁 複数レイヤーの一括ダウンロード</li></ul>

<h3 id="h4d849f4362"><strong>使い方</strong></h3><ol><li>角丸やエフェクトが適用されたレイヤーを選択する。</li><li>エクスポートの設定を行う（デフォルト設定のままでもOK）。</li><li><strong>PureImage Export</strong> を実行する。</li><li>レイヤー1つ選択の場合、プレビューが表示される。</li><li>角丸やエフェクトを設定し、[Export as xxx] をクリック。</li><li>保存する。</li></ol>

<h2 style="text-align: start" id="h7ace4d318d"><strong>なぜプラグインを作ろうと思ったか</strong></h2><h3 id="hbc3d40e377">画像を書き出すときの手間</h3><p style="text-align: start">Webサイトのデザインルールとして角丸が適用されている場合、ほとんどの写真や画像に角丸が適用された状態のFigmaデータになっています。</p><p>コーディングする際、書き出すたびに角丸を外したり、ページごとに複製してまとめて角丸を解除して書き出したり……。毎回手動で角丸やエフェクトを外さなければならないのが面倒でした。</p><h3 id="h59b7e53f0d">他にいい方法はないのか🤔？</h3><p>先日、選択したレイヤーやグループ内のネストされたレイヤーすべての角丸をリセットできる「<a href="https://www.figma.com/community/plugin/1478812638940260555/reset-corner-radius" target="_blank" rel="noopener noreferrer nofollow">Reset Corner Radius</a>」を作成しました。</p><p>「角丸がリセットできるなら、角丸やエフェクトも解除できるのでは？」「さらに、デザインの設定を変えずにエクスポートだけできるのでは？」と思い、今回のプラグインを作成するに至りました。</p><blockquote><p>📝<a href="https://841-biboroku.info/entry/figma-reset-corner-radius-plugin/">コーディングで地味につらい...Figmaで画像・レイヤーの角丸を一括で解除するプラグインを作ってみた</a></p></blockquote>

<h3 id="hbbc85534e5">画像・エクスポート関連のプラグインを調査</h3><p>Figmaで使用できる画像・エクスポート関連のプラグインにはどのようなものがあるか調査しました。</p><h4 id="h04bf682957"><a href="https://www.figma.com/community/plugin/1181873200384736932" target="_blank" rel="noopener noreferrer nofollow"><strong>WebP Exporter</strong></a></h4><p>選択したレイヤー画像の品質、スケール、ファイル名などまとめて設定できるWebpプラグインです。<br><em>&quot;Exporting many freeze the UI. Try selecting fewer or smaller nodes.&quot;</em></p><p>ノード数が多いとUIがフリーズするため、少なくするよう警告が表示されており、適切に対策が取られているプラグインだと感じました。</p><h4 id="h750d5a3955"><a href="https://www.figma.com/community/plugin/973190386632562805" target="_blank" rel="noopener noreferrer nofollow"><strong>Export Original Images</strong></a></h4><p>選択した画像をトリミングせずに元のサイズのままエクスポートできます。</p><h4 id="h476c428f09"><a href="https://www.figma.com/community/plugin/1233404694629290096/free-compressed-pdf-and-image-exporter-pdf-png-jpg-webp-and-svg" target="_blank" rel="noopener noreferrer nofollow"><strong>Free Compressed PDF and Image Exporter</strong></a></h4><p>圧縮された画像やPDFを書き出すことができます。</p><h4 id="hc82ae3feb3"><a href="https://www.figma.com/community/plugin/851183094275736358/figma-to-html" target="_blank" rel="noopener noreferrer nofollow">Figma to HTML</a></h4><p>ReactまたはHTML形式のファイルやCSS、画像をエクスポートできます。画像に角丸が設定されている場合は、角丸が解除された状態の画像が含まれます。</p><h3 id="hfd12e9abcd">他のエクスポート系プラグインを試した結果</h3><p>圧縮やフォーマット変更など、画像のエクスポート設定を調整できるプラグインは多数ありましたが、角丸やエフェクトを解除してエクスポートできるプラグインは見つけられませんでした。</p><p><span class="txt-small">※あるかもしれませんが、少なくとも自分の調査では見つかりませんでした。</span></p>

<h2 id="h32098baedb">使用したライブラリ・フレームワーク</h2><ul><li><code>@create-figma-plugin/ui</code>, <code>@create-figma-plugin/utilities</code> (Figmaプラグイン開発用)</li><li><code>preact</code> (軽量なUIライブラリ)</li><li><code>jszip</code> (ZIP圧縮処理)</li><li><code>encoding-japanese</code> (文字エンコーディング変換)</li></ul><h2 id="h92ecb667cc">実行フロー</h2>

<h2 id="h94cac76955">開発で取り組んだ最適化</h2><p>Figmaプラグインを開発する中で直面した課題と、それをどう解決したかの備忘録として、以下の4つのポイントについてまとめました。</p><ol><li>レイヤーの幅・高さ制限を設けている</li><li>角丸とエフェクトを解除してリストアできるようにしている</li><li>文字化けしないように処理</li><li>エクスポート処理を軽くするためチャンク処理をしている</li></ol><h3 id="h530dd256e4">1. レイヤーが大きすぎるとフリーズする問題の対策</h3><p>Figmaでは、大きなサイズのレイヤーをエクスポートしようとすると処理が遅くなり、最悪の場合フリーズしてしまうことがあります。そのため、プラグインではエクスポートサイズの制限を設けました。</p>

const MAX_EXPORT_SIZE = 5000;

function isExportSizeValid(node: BaseNode): boolean {
  const figmaNode = node as FrameNode | RectangleNode;
  const { width, height } = figmaNode;
  let scale = figmaNode.exportSettings[0]?.constraint?.value || 1;
  let exportWidth = width * scale;
  let exportHeight = height * scale;

  return exportWidth <= MAX_EXPORT_SIZE && exportHeight <= MAX_EXPORT_SIZE;
}

<p>エクスポート時にこの関数を使用し、制限を超える場合は警告を出すようにしました。</p><h2 id="h39850c5627">2. 角丸とエフェクトを解除・リストアする処理</h2><p>エクスポート時にエフェクトや角丸が影響を及ぼし、期待通りの出力にならないことがありました。そのため、一時的にこれらのスタイルを解除し、エクスポート後に元に戻す処理を実装しました。</p>

<p>このように、処理の前後でエフェクトと角丸を適切にリストアできるようにしました。</p><h2 id="ha717e37da6">3. 文字化け防止のためのZIPファイル名エンコード処理</h2><p>ZIPファイル内に格納するファイル名のエンコーディング処理を行うことで、解凍時の文字化けを防いでいます。特に、日本語などの特殊文字が含まれる場合、以下のようにSJIS（Shift-JIS）エンコーディングを使用することで、Windows環境での互換性を保ちます。</p><p></p>

const blob = await zip.generateAsync({
  type: "blob",
  encodeFileName: (name) =>
    Encoding.codeToString(
      Encoding.convert(name, {
        to: "SJIS",
        from: "UNICODE",
        type: "array",
      })
    ),
});

function sanitizeFileName(name: string): string {
  return name.replace(/[^a-zA-Z0-9-_\.]/g, "_");
}

<p>この関数を使って、エクスポート時にファイル名を安全な形式に変換しています。</p><h2 id="h4a926ac831">4. エクスポート処理の軽量化（チャンク処理）</h2><p>大量のファイルを一度にエクスポートしようとすると、処理が重くなり、ユーザーの操作が遅延してしまう可能性があります。そのため、エクスポートをチャンク処理で分割し、処理の負担を軽減しています。</p>

<h2 id="ha214098e44">まとめ</h2><p>制作の途中で処理が重くなったり、文字化けが発生したりと、躓くポイントは多くありましたが、試行錯誤を重ねながらなんとか形にすることができました😌</p><p>AIを活用したコーディングの情報が増えている中、まだ従来の方法でコーディングを行っている部分も多く、少しでも手間を減らせればと考えています。効率化や作業の負担軽減につながるポイントはまだ多くあるはずなので、引き続き改善を進めていきたいと思います🎉</p>

<h3 id="h9a3f3348bf">📝参考</h3><ul><li><a href="https://www.figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens" target="_blank" rel="noopener noreferrer nofollow">List of All Available Color Tokens（Figmaカラートークンリスト）</a></li><li><a href="https://yuanqing.github.io/create-figma-plugin/ui/" target="_blank" rel="noopener noreferrer nofollow">@create-figma-plugin</a></li><li><a href="https://blog.photosynthesic.jp/2021/12/figma-api-zip-test/" target="_blank" rel="noopener noreferrer nofollow">Figma API のおさらい – ファイル内のコンポーネントのアセットを1コマンドでZIP化してみる</a></li><li><a href="https://github.com/dicedvo/imagen-figma/tree/35d1971594badf24da1f01986e6a9c2ad40bc417" target="_blank" rel="noopener noreferrer nofollow">dicedvo / imagen-figma</a></li><li><a href="https://zenn.dev/kazu1/articles/736991963449d6" target="_blank" rel="noopener noreferrer nofollow">Blobとは何か理解していない方へ</a></li><li><a href="https://note.com/chatworkdesign/n/n391bacf911c8" target="_blank" rel="noopener noreferrer nofollow">Figmaのメモリー使用量の制約に挑んだ話 /  Chatwork Design</a></li><li><a href="https://help.figma.com/hc/ja/articles/360040528173-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%AE%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%BC%E4%BD%BF%E7%94%A8%E9%87%8F%E3%81%AE%E5%89%8A%E6%B8%9B" target="_blank" rel="noopener noreferrer nofollow">Figmaのメモリ表示</a></li></ul>

角丸＆エフェクトを簡単解除！Figmaエクスポート作業を快適にするプラグインを作ってみた

<p><a href="https://grow-group.jp/archives/17690/#i-6" target="_blank" rel="noopener noreferrer">https://grow-group.jp/archives/17690/#i-6</a><br>まさにこれ<br><a href="https://webspe.net/figma-coding/" target="_blank" rel="noopener noreferrer">https://webspe.net/figma-coding/</a><br>角丸気を付けようてきな<br><a href="https://forum.figma.com/suggest-a-feature-11/dev-export-without-rounded-corners-30318" target="_blank" rel="noopener noreferrer">https://forum.figma.com/suggest-a-feature-11/dev-export-without-rounded-corners-30318</a><br>みんなそう思ってる！<br>デザインのつくり方に左右される<br>ルールはあってもどこか１つで違うせって委になった瞬間に複製し始めたら気づかず最後まで角丸地獄解除地獄・・<br>地味につらい。</p>

<h2 id="hfb7f37ac7c">Reset Corner Radius</h2><p>作成したプラグインは下記のURLをご覧ください。</p><p><a href="https://www.figma.com/community/plugin/1478812638940260555/reset-corner-radius" target="_blank" rel="noopener noreferrer nofollow">https://www.figma.com/community/plugin/1478812638940260555/reset-corner-radius</a></p><p>選択したレイヤーのすべての角丸をワンクリックで0にリセットできます。個々のレイヤーだけでなく、グループやコンポーネント内のネストされたレイヤーにも対応しています。</p>

<h2 id="hf5d80b86d9">なぜ角丸をなし・解除するプラグインを作ろうと思ったか</h2><h3 id="h1d680b451d">1. コーディングでの画像書き出しの地味なつらさ😭</h3><p>Figmaでデザインされた画像を書き出す際、角丸が設定されていると、そのままでは角丸付きの画像としてエクスポートされてしまいます。</p><p>角丸なしで書き出したい場合、設定によっては一度角丸を解除しないといけません。複数選択すればまとめて角丸を0に変更もできますが、グループレイヤーや中のレイヤーをひとつひとつ選択するのは面倒です。</p><p>また多数のデザイナーが関わるプロジェクトでは、デザインルールが完全に統一されるとは限らず、どこかで設定がずれてしまうこともあります。</p><p>ルールで縛るのではなく、書き出すときにどうにかできないかと思ったのがきっかけです。</p>

<h3 id="h8f6e7a60c3">2. プラグイン作成に興味があった</h3><p>以前からFigmaのプラグイン作成に興味があり、関連する記事や動画を見て簡単な機能なら作れそうかな🤔と。</p><p>また、Figmaには多くのプラグインがありますが、自分が求めるピンポイントな機能のプラグインが見つけられなかった（もしかすると存在するかもしれませんが…）。そこで、自分で作ってみることにしました。</p>

<h2 id="h4916689128">普段どのように角丸画像・レイヤーをエクスポートしている？</h2><p>書き出すときだけ一時的に角丸を0にするか、レイヤーを複製・コピーして角丸を無い状態にしてエクスポートしています。</p><h3 id="hb80274a7ba">デザインあるある</h3><p>いろいろ作り方はあると思いますが、下記のような作りが多いのではないでしょうか。</p><ul><li>レイヤーの塗りに対して画像が設定されていて、レイヤーに角丸</li><li>マスクした画像<ul><li>マスクグループレイヤーを角丸</li><li>マスクレイヤーを角丸　など</li></ul></li></ul>

<p>書き出しするためにエクスポート設定をしてプレビューを確認してみます。</p><p>角丸が設定されているレイヤーと選択するレイヤーによって、角丸がある状態とない状態になることがわかります。</p><p><strong>マスクした画像</strong>の<strong>画像レイヤーを直接選択</strong>すると角丸の設定を変更せずに角丸なしでエクスポートすることができます。</p><p>数が多いと地味に面倒です。</p>

<h3 id="h6d30a4fa1e">みんなはどうしてるのだろう？</h3><p>コーディングをする人たちは、角丸の画像エクスポートをどうしているのか気になり調べてみると、同じような問題を感じている人がいるようでした・</p><p>以下のページでも関連する話題が挙がっています。</p><p></p><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://grow-group.jp/archives/17690/" data-iframely-url="//cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2Fgrow-group.jp%2Farchives%2F17690%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script><blockquote><p>書き出しで困った：シャドウ・角丸の値が、画像レイヤーに直接設定されている<br>シャドウや角丸の値は、画像そのものに設定したほうがデザインデータ作成時は楽な場合がありますね。しかし、何も知らないエンジニアが画像をつかんで書き出しを行うと、シャドウや角丸付きの画像が書き出されてしまいます。エンジニアが書き出しのたびにレイヤーを確認・調整せねばならず、数が多いと大変です。</p><p><strong>引用元:</strong> <a href="https://grow-group.jp/archives/17690/#i-6" target="_new">Grow Group</a></p></blockquote><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://webspe.net/figma-coding/" data-iframely-url="//cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2Fwebspe.net%2Ffigma-coding%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script><blockquote><p>注意① 画像の装飾は含めずに書き出す<br>画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装することを推奨します。書き出す要素のレイヤーを確認し、エフェクトが付いた要素を含めて書き出さないように注意しましょう。</p><p><strong>引用元:</strong> <a href="https://webspe.net/figma-coding/" target="_new">WebSpe</a></p></blockquote><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://forum.figma.com/suggest-a-feature-11/dev-export-without-rounded-corners-30318" data-iframely-url="//cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2Fforum.figma.com%2Fsuggest-a-feature-11%2Fdev-export-without-rounded-corners-30318&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script><blockquote><p>Dev export without rounded corners<br>It would be great if dev could export without rounded corners applied and or have some export flexibilities<br>角丸を適用せずに開発用エクスポートができると便利です。 または、エクスポートの柔軟性があると助かります。<br><strong>引用元:</strong> <a href="https://forum.figma.com/suggest-a-feature-11/dev-export-without-rounded-corners-30318" target="_blank" rel="noopener noreferrer nofollow">Figma Forum</a></p></blockquote>

<h2 id="h4d849f4362">使い方</h2><ol><li>書き出したいレイヤーのエクスポート設定をする<ol><li>レイヤーにエクスポートファイル名を設定</li><li>倍率を設定</li><li>拡張子を設定</li><li>（サフィックスを設定）</li></ol></li><li>書き出し用のレイヤーまたはフレームをコピーして複製</li><li>複製したレイヤーを選択する</li><li>プラグインとウィジェットで「Reset Corner Radius」を検索</li><li>該当プラグインをクリックで実行</li></ol><p>実行すると、選択範囲の角丸がすべて解除されます。</p>

<h3 id="h60d96e8693">適用範囲</h3><ul><li>単一レイヤー</li><li>グループ化したレイヤー</li><li>グループ化したレイヤー内のレイヤー</li><li>インスタンス内のレイヤー</li><li>フレーム内のレイヤー</li><li>すべてのレイヤー</li></ul><h3 id="h44c6fc4a7d">⚠️<strong>注意事項</strong></h3><ul><li>選択している中のレイヤーもすべて角丸の設定を0にします。</li><li>メインコンポーネントを選択した状態で実行すると、インスタンスにも適用されるため注意してください。</li></ul>

<h2 id="h4cb7f3347b">プラグインの仕組みと作成・公開</h2><p>Figmaのプラグインは公式の手順に沿って作成しました。特に難しい処理はなく、選択したレイヤーやその中のすべてのレイヤーの角丸を「0」にするだけのシンプルな仕組みです。</p><ol><li>Figmaの開発者向けドキュメントを参考に、プラグインの基本セットアップを実施</li></ol><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.figma.com/plugin-docs/" data-iframely-url="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.figma.com%2Fplugin-docs%2F%3Ffuid%3D749517769065274208&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script><ol start="2"><li><code>manifest.json</code> を作成</li><li>選択したレイヤーとその子レイヤーの <code>cornerRadius</code> を <code>0</code> にする処理を実装</li></ol>

if ("cornerRadius" in node) {
  (node as RectangleNode).cornerRadius = 0;
}

<ol start="4"><li>動作確認</li><li>プラグインの公開申請</li><li>Figmaのサポートチームから承認の通知で公開</li></ol>

<h2 id="ha214098e44">まとめ</h2><p>エクスポート時に自動で角丸が解除されれば一番理想的ですが、それを実現するために一括で角丸を0にできるプラグインを作成してみました。このプラグインを使うことで、これまで手動で行っていた工程を少し減らすことができ、作業効率が向上しました。コーディング時のちょっとした手間を減らすための工夫として、同じ悩みを持つ方の役に立てば嬉しいです🎉</p>

コーディングで地味につらい...Figmaで画像・レイヤーの角丸を一括で解除するプラグインを作ってみた

<p>ドキュメントや資料作成、コーディング時にもFigmaを活用していますが、使い始めの頃は便利なプラグインや入れるべきプラグインの記事を読みあさっていました。</p><p>当初、XDからFigmaに移行したこともあり、レイヤー名の一括変更は<a href="https://www.figma.com/community/plugin/731271836271143349" target="_blank" rel="noopener noreferrer nofollow">Rename It</a>などプラグインがないとできないと思い込んでいましたが、実はFigmaの標準機能でレイヤー名を一括リネームできると最近知りました。</p><p>このように「プラグインを使わなくても実はできる機能」がたくさんあるのでは？と思い、Figmaの公式ヘルプを確認しました。</p><p>ヘルプページで「<a href="https://help.figma.com/hc/en-us/search?category=360002042553&amp;filter_by=knowledge_base&amp;query=shortcut&amp;utf8=%E2%9C%93" target="_blank" rel="noopener noreferrer nofollow">shortcut</a>」というキーワード＋Figma Designカテゴリで検索し、2025年2月20日時点で65件の該当記事をチェック。その中から「こんな機能あったの？」「デフォルトであったんだ」と知らなかった機能をいくつかピックアップしてまとめてみました。</p>

<h2 id="hc18e9a4ac5">レイヤー名の一括変更</h2><p>レイヤー名を一括でリネームするには、<strong>Ctrl + R</strong>（Macの場合は Cmd + R）を押すだけ。さらに、</p><ul><li><code>$n</code>：昇順で連番を振る（1, 2, 3...）</li><li><code>$N</code>：降順で連番を振る（10, 9, 8...）</li></ul><p>というように、パターンを使い分けられる。</p><p>☺️レイヤーをコピペすると上にレイヤーが積みあがっていくので、降順で一括リネームできるのがうれしい。</p><p><strong>&lt;ショートカットキー&gt;</strong><br>Mac: Command ⌘ - R<br>Windows: Ctrl + R</p><p><a href="https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers" target="_blank" rel="noopener noreferrer nofollow"><u>Rename Layers</u></a></p>

<h2 id="hcb2befa45e">オートレイアウトのパディング一括設定</h2><p>オートレイアウトの「パディング」や「間隔」を個別に設定する場合は、「パディング（個別）」ボタンをクリックしてから設定をしていました。</p><p>実は、カンマ区切りで一括入力できるそうです！</p><p>例えば <code>10, 20, 10, 20</code> と入力すると、</p><ul><li>上下のパディングが10px</li><li>左右のパディングが20px</li></ul><p>のように適用されます。</p><p>🤔いくらカンマで区切っても、個別にならない...。</p><p>１アクション必要だったようです。レイヤーを選択した状態でCtrlキーを押しながら、パディング入力欄をクリックすると水平パディング／垂直パディングの入力欄が１つになりました。</p><p><a href="https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties" target="_blank" rel="noopener noreferrer nofollow"><u>Explore auto layout properties</u></a></p>

<h2 id="h3b1909c27d">アウトラインモード</h2><p>よく使うか？というとほぼ使わない。<br>けど、イラレじゃないとできないと思っていたので、できるんだという驚きはありました。</p><p><strong>&lt;ショートカットキー&gt;</strong><br>Mac: ⌘ Command ⇧ Shift O<br>Windows: Control ⇧ Shift O</p><p>😂パスの単純化や不要なパスの削除ができるようになってくれるとうれしいな・・（調べたけどわからなかった）</p><p><a href="https://help.figma.com/hc/en-us/articles/5724448965527-View-layer-outlines-in-Figma-Design" target="_blank" rel="noopener noreferrer nofollow"><u>View layer outlines in Figma Design</u></a></p>

<h2 id="haec2eecfbb">オートレイアウトの提案機能</h2><p>本当にこれは驚いた・・</p><p>オートレイアウトの設定って、地味に面倒だったりします。実は、Figmaは最適なオートレイアウトを<strong>提案してくれる</strong>機能を持っています。</p><p><strong>試した手順</strong></p><ol><li>適当に矩形とテキストレイヤーを並べる（今回は、すべてレイヤーが同列の状態です）</li><li>レイヤーを選択</li><li>ショートカットまたは右クリック &gt; その他のレイアウトオプション &gt; オートレイアウトを提案</li><li>自動でオートレイアウト！</li></ol><p><strong>&lt;ショートカットキー&gt;</strong><br>Mac: ⌃ Control ⇧ Shift A<br>Windows ⌃ Control Alt ⇧ Shift A</p><p>🙄本当に驚きました。なんて便利な・・</p><p><a href="https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design" target="_blank" rel="noopener noreferrer nofollow"><u>Add auto layout to a design</u></a></p>

<h2 id="h1ec5f7b6fb">タッチキーボードで簡単に絵文字を入力</h2><p>Windowsの場合は、タッチ キーボードを有効にする必要があります。（そもそもPCでタッチキーボードを使ったことがありませんでした）</p><p>テキストレイヤーで、<code>:</code>から入力開始し単語を入力すると該当するApple 絵文字の候補が表示されます。</p><p><a href="https://help.figma.com/hc/en-us/articles/360039957174-Add-emojis-to-text" target="_blank" rel="noopener noreferrer nofollow"><u>Add emojis to text</u></a></p>

<h2 id="h6298b6a690">寸法を自動計算</h2><p>今の幅を「半分にしたい」「〇分割にしたい」というとき、数が多くなればなるほど電卓を使いがち。</p><p>Figmaなら、「<strong>サイズのWに/2</strong>」と入力するだけで自動計算してくれます。</p><p>加算 +、減算 -、乗算 *、括弧などの使用も可能です！</p><p>公式のヘルプでは<code>(𝑥/2)+6</code>や<code>Mixed+100</code>といった式も紹介されています。</p><p><a href="https://help.figma.com/hc/en-us/articles/360039956914-Adjust-alignment-rotation-position-and-dimensions" target="_blank" rel="noopener noreferrer nofollow"><u>Adjust alignment, rotation, position, and dimensions</u></a></p>

<h2 id="h427ecc2d52">レイヤーに一括配置できるマルチペースト</h2><p>ヘッダーやフッター、資料であればページ番号など同じ要素を貼り付けるとき、フレームを選択→貼り付けを繰り返していました。</p><p>レイヤーを複数選択（ドラッグでまとめて選択）した状態から、貼り付けるだけ。</p><p><a href="https://help.figma.com/hc/en-us/articles/4409078832791-Copy-and-paste-objects" target="_blank" rel="noopener noreferrer nofollow">Copy and paste objects</a></p>

<h2 id="h8d498c1791">バリアントの結合</h2><p>Figmaを使い始めた頃、バリアントの存在にものすごく衝撃を受けた記憶があります。パネルにトグルスイッチが出たときには感動しました✨</p><p>しかし、そこから止まってました・・</p><p>名前を揃えるだけで簡単にバリアントをグループ化できるのです。</p><p><strong>試した手順</strong></p><ol><li>ボタンを作成</li><li>色違い、大きいサイズ、アイコンありのパターンを作成</li><li>レイヤー名を「コンポーネント名/色名/サイズ/アイコンの有無」でスラッシュ区切りでプロパティをセットする</li><li>各要素をコンポーネント化</li><li>まとめて選択</li><li>右パネルの「バリアントの結合」をクリック</li><li>右パネルにコンポーネント名以降につけた「色名」「サイズ」「アイコンの有無」がプロパティ化されている</li><li>プロパティ名を変更</li><li>コンポーネントを配置すると、右パネルに設定したプロパティが選択肢として表示される</li></ol><p><a href="https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants" target="_blank" rel="noopener noreferrer nofollow"><u>Create and use variants</u></a></p>

<h2 id="h942f304dd1">よく使う機能</h2><ul><li>バリアブルのモード<ul><li>もっと使いこなしたい🔥</li></ul></li><li>画像エクスポート サフィックス設定</li><li>矢印<ul><li>資料を作るとき便利</li><li>XDのときはプラグイン使っていた</li></ul></li><li>チャット機能<ul><li>その場にいるメンバーを見つけて話しかけたり、Figma上でチャットできるのでその場で済む会話ができるのが便利</li></ul></li><li>セクション<ul><li>グループ分けしてまとめて移動できるのが本当に助かる</li></ul></li><li>選択範囲へのリンク</li></ul><h2 id="h2dff0c1528">📒リリースノート</h2><p><a href="https://www.figma.com/ja-jp/release-notes/" target="_blank" rel="noopener noreferrer nofollow"><u>https://www.figma.com/ja-jp/release-notes/</u></a></p><p>RSSも配信されてます🎉</p>

<h2 id="h673abd94de">ショートカットのおさらい</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>機能</p></th><th colspan="1" rowspan="1"><p>Mac</p></th><th colspan="1" rowspan="1"><p>Windows</p></th></tr><tr><td colspan="1" rowspan="1"><p>キーボードショートカット</p></td><td colspan="1" rowspan="1"><p>Control + Shift + ?</p></td><td colspan="1" rowspan="1"><p>Ctrl + Shift + ?</p></td></tr><tr><td colspan="1" rowspan="1"><p>テキストのアウトライン化</p></td><td colspan="1" rowspan="1"><p>Command + E</p></td><td colspan="1" rowspan="1"><p>Ctrl + E</p></td></tr><tr><td colspan="1" rowspan="1"><p>線のアウトライン化</p></td><td colspan="1" rowspan="1"><p>Command + Option + O</p></td><td colspan="1" rowspan="1"><p>Ctrl + Alt + O</p></td></tr><tr><td colspan="1" rowspan="1"><p>両サイドのパネル開閉</p></td><td colspan="1" rowspan="1"><p>Command + \</p></td><td colspan="1" rowspan="1"><p>Ctrl + \</p></td></tr><tr><td colspan="1" rowspan="1"><p>左パネルのページ・アセット切替</p></td><td colspan="1" rowspan="1"><p>Option + 2</p></td><td colspan="1" rowspan="1"><p>Alt + 2</p></td></tr><tr><td colspan="1" rowspan="1"><p>オートレイアウト</p></td><td colspan="1" rowspan="1"><p>Shift + A</p></td><td colspan="1" rowspan="1"><p>Shift + A</p></td></tr><tr><td colspan="1" rowspan="1"><p>開発モード切替</p></td><td colspan="1" rowspan="1"><p>Shift + D</p></td><td colspan="1" rowspan="1"><p>Shift + D</p></td></tr><tr><td colspan="1" rowspan="1"><p>矢印ツール</p></td><td colspan="1" rowspan="1"><p>Shift + L</p></td><td colspan="1" rowspan="1"><p>Shift + L</p></td></tr><tr><td colspan="1" rowspan="1"><p>セクションツール</p></td><td colspan="1" rowspan="1"><p>Shift + S</p></td><td colspan="1" rowspan="1"><p>Shift + S</p></td></tr><tr><td colspan="1" rowspan="1"><p>レイヤー表示・非表示</p></td><td colspan="1" rowspan="1"><p>Command + Shift + H</p></td><td colspan="1" rowspan="1"><p>Ctrl + Shift + H</p></td></tr><tr><td colspan="1" rowspan="1"><p>レイヤーロック・解除</p></td><td colspan="1" rowspan="1"><p>Command + Shift + L</p></td><td colspan="1" rowspan="1"><p>Ctrl + Shift + L</p></td></tr><tr><td colspan="1" rowspan="1"><p>ネストオブジェクトの移動</p></td><td colspan="1" rowspan="1"><p>- 子を選択：Enter<br>- 親を選択：Shift + Enter <br>- 次の兄弟を選択：Tab <br>- 前の兄弟を選択：Shift + Tab</p></td><td colspan="1" rowspan="1"><p>同左</p></td></tr><tr><td colspan="1" rowspan="1"><p>レイヤー選択の解除</p></td><td colspan="1" rowspan="1"><p>Esc</p></td><td colspan="1" rowspan="1"><p>Esc</p></td></tr><tr><td colspan="1" rowspan="1"><p>コンポーネントの切り離し</p></td><td colspan="1" rowspan="1"><p>Option + Command + B</p></td><td colspan="1" rowspan="1"><p>Ctrl + Alt + B</p></td></tr><tr><td colspan="1" rowspan="1"><p>プロパティコピー・貼り付け</p></td><td colspan="1" rowspan="1"><p>- コピー：Option + Command + C<br>- 貼り付け：Option + Command + V</p></td><td colspan="1" rowspan="1"><p>- コピー：Ctrl + Alt + C<br>- 貼り付け：Ctrl + Alt + V</p></td></tr><tr><td colspan="1" rowspan="1"><p>カーソルチャット</p></td><td colspan="1" rowspan="1"><p>/（52文字の制限あり）</p></td><td colspan="1" rowspan="1"><p>/（52文字の制限あり）</p></td></tr><tr><td colspan="1" rowspan="1"><p>番号付きリスト</p></td><td colspan="1" rowspan="1"><p>1.または1) のあとにスペース</p></td><td colspan="1" rowspan="1"><p>1.または1) のあとにスペース</p></td></tr><tr><td colspan="1" rowspan="1"><p>位置揃え</p></td><td colspan="1" rowspan="1"><p>- 上：Alt + W<br>- 下：Alt + S <br>- 左：Alt + A <br>- 右：Alt + D <br>- 垂直中央：Alt + V <br>- 水平中央：Alt + H</p></td><td colspan="1" rowspan="1"><p>同左</p></td></tr><tr><td colspan="1" rowspan="1"><p>レイヤー反転</p></td><td colspan="1" rowspan="1"><p>- 垂直：Shift + V<br>- 水平：Shift + H</p></td><td colspan="1" rowspan="1"><p>同左</p></td></tr><tr><td colspan="1" rowspan="1"><p>マスク</p></td><td colspan="1" rowspan="1"><p>Control + Command + M</p></td><td colspan="1" rowspan="1"><p>Ctrl + Alt + M</p></td></tr><tr><td colspan="1" rowspan="1"><p>エクスポート</p></td><td colspan="1" rowspan="1"><p>Shift + Command + E</p></td><td colspan="1" rowspan="1"><p>Shift + Ctrl + E</p></td></tr></tbody></table>

<h2 id="ha214098e44">まとめ</h2><p>Figmaには、プラグインを入れなくても活用できる<strong>隠れた便利機能</strong>がたくさんあることに驚きました。UIもどんどん進化し、新たな機能が増えていることに気付かないのはもったいない。キャッチアップの大切さを改めて感じました。</p>

実はFigma標準機能！こんなこともできたのか…

<p>エンジニアでも仕様書や画面定義書、マニュアルなど資料作成をする機会が多いと思います。</p><p>最近はFigmaで作成することが機会が増えました。ここでは、実際の事例を元に、Figmaが提供する機能やプラグイン（拡張機能）の使い方のぼかしの値を手順をまとめました。</p><p><span class="txt-small">※この記事では、コンポーネント・オートレイアウト機能の説明はしません。</span></p>

<p><strong>目次</strong></p><p><span class="txt-small">（すみません、目次のアンカー機能は未実装です・将来的には対応する予定です）</span></p><ul><li>画像内の見せたくない情報をぼかす</li><li>よく使う文章を共通管理する（改行なしテキストのみ）</li><li>キャプチャが長いときや情報を途中で区切るときの表現（省略波線）</li><li>画面説明書やマニュアルの説明箇所に連番をふる<ul><li>ⅰ. 番号コンポーネントの作成</li><li>ⅱ. 番号と線を組み合わせたコンポーネントの作成</li><li>ⅲ. 連番を自動で割り当てる</li></ul></li><li>部分的にプラグインを使って目次ページを作成<ul><li>ⅰ. 目次コンポーネントの作成</li><li>ⅱ. 各ページのタイトルを取得する</li><li>ⅲ. 目次コンポーネントにページタイトルを貼り付けるⅲ. 目次コンポーネントにページタイトルを貼り付ける</li></ul></li><li>活躍する場面が多そうなプラグイン<ul><li>テキスト変更をしやすくするためのプラグイン『Smart Text Changer』</li><li>管理用の目次自動生成プラグイン『ToC Builder』</li></ul></li><li>セクションを使って資料のグルーピング</li><li>プラグインを探すポイント</li></ul><h2 id="h790212019e">画像内の見せたくない情報をぼかす</h2>

<ol><li>ぼかしたい箇所にグレーの長方形を配置</li><li>透明度を1%に変更（1%じゃなくてもOK）</li><li>エフェクトの＋をクリック</li><li>背景のぼかしに変更</li><li>ぼかしの値を適当に変更</li></ol><p><strong>ポイント</strong><br>ぼかしの値は入力でも変更ができますが、↔カーソルで左右に移動するとぼかし具合を確認しながら調整ができるので便利です。レイヤーはずれないように画像とグループしておきます。</p><p><strong>補足</strong><br>グループ化やレイヤーのロックでずれを防ぐことは可能ですが、何かの拍子にずれて情報が見える状態になってしまう可能性もあるため、絶対見せてはいけない情報が画像に含まれている場合は、貼り付ける前に元画像を加工しておくことをおすすめします。</p><h2 id="h45e36384ff">キャプチャが長いときや情報を途中で区切るときの表現（省略波線）</h2><p>白背景レイヤーの透明度を下から上にかけて100％→0％にして省略しているように見せる方法もありますが、今回は波線を使った省略表現です。</p><p>Figmaのプラグイン「<a href="https://www.figma.com/community/plugin/745971189153303901/wave-urve">Wave &amp; Curve</a>」を使います。</p>

<ol><li>プラグイン「Wave &amp; Curve」を実行</li><li>Height（波の高さ）、Distance（波の間隔）、Number waves（波の数）を指定</li><li>Createで生成</li><li>生成した波線を複製したレイヤーを下に移動して波を二重にする</li></ol><p><strong>ポイント</strong><br>波の間隔を10にしておくと、波の数に10を指定で幅100pxの波線。20を指定で幅200pxの波線…と<u>波の数×10=波線の幅</u>になるため、生成したい幅が決まっているとき波の数を変化させるだけで同じ形状の波線を作ることが可能です。</p><p><strong>補足</strong><br>線の細さや太さは、線プロパティで変更が可能です。</p><h2 id="he7db56600b">よく使う文章を共通管理する（改行なしテキストのみ）</h2><p><a href="https://help.figma.com/hc/ja/articles/14506821864087-%E3%83%90%E3%83%AA%E3%82%A2%E3%83%96%E3%83%AB-%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3-%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AE%E6%A6%82%E8%A6%81" target="_blank" rel="noopener noreferrer nofollow">バリアブル、コレクション、モードの概要</a>（Figma Learnより）<br>🚧 バリアブルは現在オープンベータ版です。<br><span class="txt-small">2024/3/29時点</span></p><p>資料の中で同じ文章を使いまわすことは結構多いと思います。あとからテキストの変更が発生したときは、どうしましょう。</p><p><strong>方法１.置換</strong><br>該当テキストを一括で置換することが可能です。ただし、<u>変更したくない箇所</u>が含まれているかもしれません。</p><p><strong>方法２.コンポーネント化</strong><br>同じコンポーネントであれば変更することが可能です。ただし、コンポーネントのコピーであるインスタンスのテキストを変更している場合、メインコンポーネントのテキストを変更しても<u>置き換わりません</u>。</p><p>方法１・２でも可能ですが、思い通りにならない場合がありそうです。そこで<strong>バリアブル機能</strong>を使います。</p>

<ol><li>ローカルバリアブルからバリアブルを作成</li><li>文字列を選択</li><li>名前（＝注釈）、値（＝この文章は注釈のダミーテキストです。）を設定</li></ol>

<ol><li>テキストを選択</li><li>テキストパネルのバリアブルを適用（六角形の中に・があるアイコン）</li><li>（先ほど作成したバリアブル）注釈を選択</li><li>選択したテキストレイヤーに適用されます</li></ol><p>動画ではインスタンス内のテキストにも適用しています。異なるインスタンスやただのテキストレイヤーにも適用ができます。</p><p>あとからバリアブルのテキストを変更するとバリアブルを適用した箇所がすべて置き換わります。異なるコンポーネント（インスタンス）をまたいで変更ができるので便利です。</p><p><strong>補足</strong><br>（設定方法があるのかもしれませんが）テキストの改行はできませんでした。</p><h2 id="hb3b98af234">画面説明書やマニュアルの説明箇所に連番をふる</h2><p>画面説明書やマニュアルなど説明書を作成するとき、該当箇所を分かりやすくするために連番を簡単に設定する方法です。</p><p>手動で設定したり途中で説明が増えたとき、いちいちすべて番号を入れ替えるのは大変です。</p><p>コンポーネントとFigmaのプラグインを駆使して楽しましょう🎉</p><h3 id="h7326793069">ⅰ. 番号コンポーネントの作成</h3>

<ol><li>テキストレイヤーに00を設定（2桁で崩れないようにするため）</li><li>テキストレイヤーをグループ化しオートレイアウト化して配置を中央揃えにする</li><li>幅と高さを同じ値にして正方形を作る（形は自由）</li><li>コンポーネント化する</li></ol><h3 id="hced7c04455">ⅱ. 番号と線を組み合わせたコンポーネントの作成</h3>

<ol><li>作成して番号のインスタンスの横に矢印を配置</li><li>番号と矢印を選択しオートレイアウト化</li><li>コンポーネント化</li><li>矢印レイヤーを選択し水平方向のサイズ調整の&lt;&gt;コンテナに合わせて拡大を選択</li><li>上・下・左向きのバリアントを作成</li></ol><p><strong>ポイント<br></strong>幅や高さを変えたときに矢印を伸縮するため<u>コンテナに合わせて拡大</u>させることで、複数のインスタンスを配置したときに例えば番号の左位置は揃えるけど、矢印はそれぞれ該当箇所まで伸ばすといったことが可能です。</p><h3 id="hdd366f7aff">ⅲ. 連番を自動で割り当てる</h3><p>Figmaのプラグイン「<a href="https://www.figma.com/community/plugin/805217025770129636/paginate" target="_blank" rel="noopener noreferrer nofollow">Paginate</a>」を利用します。</p><p>ⅱで作成したコンポーネントを画像に配置したところから始めます。</p>

<ol><li>プラグイン「Paginate」を実行</li><li>番号のインスタンスを選択</li><li>Paginateボタンをクリック</li><li>自動で連番が割り当てられました</li></ol><p><strong>ポイント</strong><br>番号と矢印がセットになったインスタンスを選択すると、選択したバリアントと<u>同じインスタンスのみ対象</u>となります。番号だけのインスタンスを選択することですべてのインスタンスに番号が割り当てられます。</p><p><strong>補足</strong><br>連番の割り当て順は「Top to bottom／Bottom to top」「Left to right／Right to left」から選択可能です。</p><p>フレームを分けると<u>フレームの並びが優先</u>されるため１つ目のフレームが1～10を割り当てた場合、２つ目のフレームは11～割り当てられます。</p><h4 id="h82a5316c83">１フレームだけに連番を割り当てたい場合</h4><p>ページ内にあるすべてのインスタンスが対象になるため、対象のフレームを別のページに移動しましょう。移動してから実行し、元のページに戻します。<br>元の位置にセクションが配置されます。</p><h2 id="hebd5ac5302">部分的にプラグインを使って目次ページを作成</h2><p>仕様書や画面定義書、マニュアルを作成するなら目次ページは必須です。</p><p>１つの内容に対して説明が数ページにわたる場合もあるため連番割り当ては使えません。ひとつずつ入力すればいいのですが、地味に面倒くさいです。</p><p>流し込むデータを Google スプレッドシート で管理して連携できる「<a href="https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync" target="_blank" rel="noopener noreferrer nofollow">Google Sheets Sync</a>」もありますが、今回は複数のプラグインを使って目次を作成します。</p><h3 id="hd42b3216c2">ⅰ. 目次コンポーネントの作成</h3>

<ol><li>ページ名、ページ番号、ページ名とページ番号をつなぐドットのテキストを配置</li><li>あと検索しやすいように各レイヤーに一意の名前を付ける<ol><li>ページ名＝pageName</li><li>ドット＝dot</li><li>ページ番号＝tocNumber</li></ol></li><li>幅500pxを設定（幅は任意）</li><li>アイテムの左右の間隔8pxを設定（間隔は任意）</li><li>ドットをオートレイアウト化しコンテンツを隠すを有効、水平方向のサイズ調整の&lt;&gt;コンテナに合わせて拡大を選択</li><li>ドットのテキストレイヤーを選択し「･･･」を目次の幅くらいまで増やす</li><li>ドットのテキストレイヤーをテキストパネルで↔幅の自動調整に変更</li></ol><p><strong>ポイント</strong><br>ドットをコンテナに合わせて拡大することで、ドット部分の見える範囲がページ名の<u>文字量によって変動</u>します。</p>

<h3 id="h9107c15696">ⅱ. 各ページのタイトルを取得する</h3><p>まとめてページタイトルのテキストを取得するためFigmaのプラグイン「<a href="https://www.figma.com/community/plugin/899501266127939530/text-utilities" target="_blank" rel="noopener noreferrer nofollow">Text Utilities</a>」を利用します。</p><p>各ページタイトルはページタイトル用のコンポーネントを使用していることとします。コンポーネント内のテキストレイヤーには<u>一意の名前</u>を付けておくことをおすすめします。</p><ol><li>Figmaの検索機能で取得したいページタイトルのレイヤーを検索</li><li>ページタイトルを取得したいレイヤーを複数選択</li><li>Text Utilities＞Bulk Copy Textをクリック</li><li>メモ帳などに貼り付けておく</li></ol><h3 id="h1ad944e8a3">ⅲ. 目次コンポーネントにページタイトルを貼り付ける</h3><p>コピーしたテキストをまとめて目次コンポーネントに貼り付けるためFigmaのプラグイン「<a href="https://www.figma.com/community/plugin/831936445397604629/many-paster" target="_blank" rel="noopener noreferrer nofollow">Many Paster</a>」を利用します。</p>

<ol><li>レイヤーを選択（量が多い場合は検索パネルから検索してまとめて選択が簡単）</li><li>Many Pasterを実行</li><li>「Enter your data to paste...」に取得したページタイトルを貼り付ける</li><li>Paste dataをクリックで置き換え</li></ol><h2 id="h23a6e3f9d9">活躍する場面が多そうなプラグイン</h2><h3 id="hf723bbc257">テキスト変更をしやすくするためのプラグイン『<a href="https://www.figma.com/community/plugin/1147396612884363588/smart-text-changer" target="_blank" rel="noopener noreferrer nofollow">Smart Text Changer</a>』</h3><p>選択した要素に含まれるテキストだけをまとめた画面を表示してくれます。同じレイヤー名でのグループ表示ができテキストの変更に集中できます。ダミーデータを入れてくれる機能もあるので、他の用途でも活躍しそうです。</p>

<h3 id="hf66f049c16">管理用の目次自動生成プラグイン『<a href="https://www.figma.com/community/plugin/971347067329627666/toc-builder" target="_blank" rel="noopener noreferrer nofollow">ToC Builder</a>』</h3><p>「フレームへのリンク」リストの作成で生成してくれる便利なプラグインもあります。</p><p>制作者さんの記事：<a href="https://zenn.dev/hiloki/articles/7e088d864cbaafc47ae0" target="_blank" rel="noopener noreferrer nofollow">Figmaファイルの目次作成を楽にするToC Helperの使い方</a></p>

<h2 id="hc9153641e8">セクションを使って資料のグルーピング</h2><p>画面定義書などページが多くなりがちな資料は、フレームをセクションで囲ってグループ化し色分けをしておくと管理がしやすくなります。セクションごとの移動も簡単です。</p><p><strong>補足</strong><br>セクションは入れ子が可能です。</p>

<h2 id="h67271467b3">プラグインを探すポイント</h2><p>こんなことできないかな‥面倒だな‥と思うことは、先人たちがすでにプラグイン化してくれていることが多いです。（ありがたい🎉）</p><p>大量にあるプラグインの中から解決できるプラグインを見つけるには片っ端から探す‥というわけにはいきません。おすすめプラグインの記事をあさったり、カテゴリから探したり、キーワードで検索したり。</p><p>キーワードで検索するときは、<u>Figmaのツール名</u>と<u>動詞の英単語</u>を掛け合わせて検索すると見つかりやすいように思います。</p><p>例）レイヤーを並び替える → layer sort</p><table><tbody><tr><th colspan="1" rowspan="1"><p>複数</p></th><td colspan="1" rowspan="1"><p>mltiple/multi　many</p></td></tr><tr><th colspan="1" rowspan="1"><p>置き換え</p></th><td colspan="1" rowspan="1"><p>replace　switch　change</p></td></tr><tr><th colspan="1" rowspan="1"><p>貼り付け</p></th><td colspan="1" rowspan="1"><p>paste</p></td></tr><tr><th colspan="1" rowspan="1"><p>並び替え</p></th><td colspan="1" rowspan="1"><p>sort　random</p></td></tr><tr><th colspan="1" rowspan="1"><p>連結・つなぐ</p></th><td colspan="1" rowspan="1"><p>connect　join</p></td></tr><tr><th colspan="1" rowspan="1"><p>区切る</p></th><td colspan="1" rowspan="1"><p>split　cut</p></td></tr><tr><th colspan="1" rowspan="1"><p>合算</p></th><td colspan="1" rowspan="1"><p>marge</p></td></tr></tbody></table><h2 id="h1afe451c43">さいごに</h2><p>自分のやりたかったことにマッチしたプラグインを見つけると、資料作成も一段と楽しめるような気持になります！とにかくプラグインを使いまくって楽にできる方法をこれからも探求します💪</p>

《エンジニア向け》エンジニアのためのFigma資料作成術

<p>Figmaのすごさ・便利さは、ボタンやカードなどシンプルなコンポーネント作成でも十分実感できますが、今回はより多くの要素が詰まったヘッダーを作りながらFigmaの機能を学びます。</p><p>模写元は<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer nofollow">Next.js公式サイト</a>のヘッダーです。</p>

<h2 id="he4b3e1366a">作成する前にグルーピングして整理</h2><p>ピンク・・・１番小さい要素<br>みどり・・・２番目に小さい要素<br>あお・・・グループ</p>

<h2 id="h34ae222ad6">パーツを作る</h2><h3 id="h1c7428c339">ロゴ</h3><p>今回は、Figmaのプラグイン「<a href="https://www.figma.com/community/plugin/1048610713268120902" target="_blank" rel="noopener noreferrer nofollow">Logoipsm</a>」から適当にロゴを選択します。シンボルマークとロゴタイプを分けてそれぞれコンポーネント化しておきます。</p><h3 id="h0fb95c369d">グローバルナビゲーション</h3><p>テキストと↗アイコンを作成します。アイコンはFigmaプラグイン「<a href="https://www.figma.com/community/plugin/740272380439725040" target="_blank" rel="noopener noreferrer nofollow">Material Design Icons</a>」のArrow outwardを使用します。</p><p>テキストとアイコンをグループ化し、オートレイアウトを有効にし上揃え（上）を選択。コンポーネント化します。</p><h4 id="hbc49831296">📌コンポーネントプロパティで↗アイコンをON/OFF切り替え</h4><p>↗アイコンを選択した状態で、レイヤーパネルの「ブール値プロパティを適用」をクリックすると「コンポーネントプロパティを作成」パネルが表示されます。</p><p>名前を「アイコンを表示」値を「true」でプロパティを作成しました。</p>

<p>インスタンスを挿入して、選択した状態にするとインスタンスオプションパネルに「アイコンを表示」とトグルボタンが表示されるようになりました。</p><p>これでアイコンの表示切替が簡単に！</p><p>メニュー分のインスタンスを挿入し、テキストの変更、アイコンの表示・非表示設定ができたら、オートレイアウト設定をしてグローバルナビゲーションは完成です。</p>

<h3 id="h4e737f7759">ボタン</h3><p>まずはベースとなるボタンを作成します。<br>アイコン（シンボルマーク）とテキストを配置しグループ化。続いてオートレイアウト化し「水平パディング」「垂直パディング」を設定。背景と線を設定したらコンポーネント化します。</p><p>グローバルナビゲーションと同様にアイコンに対して、レイヤーパネルで表示・非表示用のブール値を設定します。</p><h4 id="h748323c7c6">📌バリアントの作成</h4><p>作成したボタンコンポーネントから黒背景のボタンを展開。</p><p>プロパティ選択するとバリアントグループが作成されます。（点線で囲まれた部分）</p><p>＋（バリアントの追加）するとボタンが追加されます。</p><p>追加したボタンは、以下のように変更しました。</p><ul><li>背景色を黒</li><li>テキストとアイコンを白</li><li>バリアント名「背景色」値「黒」</li></ul>

<h3 id="h6da8c72ca2">検索バー</h3><p>画面サイズによって中の要素と検索バー自体の幅が変わります。</p><p>「CtrlK」の部分は、テキストを用意し以下のように設定しました。</p><ul><li>グループ化</li><li>オートレイアウト化し水平パディング・垂直パディングの設定</li><li>背景色と線を設定</li></ul><p>Search documentation...のテキストと作成した「CtrlK」をグループ化しオートレイアウト化。項目の上下の間隔は「自動」とし、他と同様に余白や背景色など調整します。</p><h4 id="h9ee226b0a5">📌幅の最小値・最大値設定</h4><p>今回は、要素の幅を広げたり狭めたりしたときに表示崩れを防ぐため幅の最小値・最大値を設定しました。</p><p>コンポーネント化し、バリアントを追加。</p><p>ここで幅の最小値が役立ちます。幅を狭めると最低幅で止まります。文字が折り返されてしまうので、テキストパネルの･･･からテキストを省略を設定して末尾に...が付き、2行目以降が非表示になります。「CtrlK」のテキストを「⌘K」に変更して検索バーは完成です。</p>

<h2 id="h4016544e95">作成したパーツのグループ化・オートレイアウト化</h2><ul><li>シンボルマーク、斜め線、ロゴタイプ（A）</li><li>検索バー、Deployボタン、Learnボタン（B）</li></ul><p>あとから変更することを考えてコンポーネント化しておくでもいいと思います。</p><h3 id="hea2bd8d5f6">全部を組み合わせて１つにする</h3><p>（A）、グローバルナビゲーション、（B）をグループ化・オートレイアウト化します。</p><ul><li>オートレイアウトの項目の上下の間隔を自動</li><li>幅を1400、最小値325、最大値1400</li></ul><p>グローバルナビゲーションが中央に配置されているので、選択してフレームパネル「水平方向のサイズ調整」のコンテナに合わせて拡大を選択すると自動でコンテンツ幅に合わせて要素が広がります。</p>

<h3 id="h7c9bda7836">ヘッダーを作成する</h3><p>1400px以上のデバイスではヘッダーを中央に配置します。</p><p>ヘッダーを選択した状態でグループ化＝wrap（ヘッダーwrap）しオートレイアウトを設定します。このままだとグループの幅を変えたとき、ヘッダー部分が左寄せのままです。オートレイアウトの中央揃えを設定するとヘッダー部分が常に中央配置されるようになります。</p><p>ヘッダーwrapは1400px以上のデバイス幅で利用する際、最大幅に制限は必要ないので最大値は設定せず、最小値のみ325を設定します。</p><p>幅を狭めたときヘッダーの両サイドがはみ出てしまうので、ヘッダーの「水平方向のサイズ調整」をコンテナに合わせて拡大に変更してヘッダーwrap内に収まるようにしました。</p>

<h2 id="h287f12badd">デバイスごとのヘッダーを展開</h2><p>ヘッダーはコンポーネント化し以下のバリアントを作成します。</p><ul><li>&lt;768px</li><li>≥1024px</li><li>≥1150px</li><li>≥1400px</li></ul><p>バリアントごとに要素を非表示にするか削除します。あとは、「水平方向のサイズ調整」やオートレイアウトの設定を個別に設定したら完成です。</p>

<h4 id="hb11a154d44">📌検索とメニューアイコン</h4><p>&lt;768pxでは検索とメニューアイコンを表示します。今回は、バリアント展開後に後付けでヘッダーへ組み込みました。ヘッダーコンポーネント作成時にアイコンも含めて作成するでもいいと思います。</p><h4 style="text-align: start" id="h2252f46c2a">📌プロトタイプの設定</h4><p>プレビュー表示したときヘッダーを上部に固定にするため、プロトタイプの「スクロールの動作」位置＝固定を設定しました。</p>

<h2 id="h1afe451c43">さいごに</h2><p>要素が多くなったり組み合わせていくとフレームの可変設定でつまずくこともありますが、行き届いた設計・設定のコンポーネントを作ることができると、そのあとの作業がとてもスムーズに進みます。</p><p>今回はヘッダーを作りましたが、パーツごとにより最適な作り方・設定がありそうだな・・🤔？と思いつつ、パーツごとにFigmaの機能を使うことで展開がとても簡単にできました。</p><p>Figmaはたのしい・おもしろい🎉</p><p><strong>📝参考サイト</strong></p><ul><li><a href="https://iret.media/70651" target="_blank" rel="noopener noreferrer nofollow">知らずに損したFigmaの機能</a></li></ul>