<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" rel="noopener noreferrer nofollow">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" rel="noopener noreferrer nofollow">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>シャドウ<br>https://getcssscan.com/css-box-shadow-examples<br>アイコン<br>https://iconoir.com/<br><br>cssを外部ファイル化する<br>https://tonari-it.com/gas-html-css/#toc4<br>https://qiita.com/dadadaiiiiiii/items/beb33b838d0516cade05</p>

<p>Google スプレッドシートやドキュメントを開いているとき、今開いている資料がドライブのどのフォルダに入っているのか知りたいことがあります。</p><p>毎回移動アイコンをクリックして現在の場所を新しいタブで開くのは面倒です・・。特に、フォルダのURLが共有されておらず、資料のURLだけが共有された場合や、同じフォルダに新たな資料を追加したい場合には不便です。</p><p>そこで、今開いている資料のディレクトリを簡単に見えるようにするGoogle Apps Script (GAS)を作成しました。</p><p><span class="txt-small">※このページで紹介しているスクリプトは自己責任でお使い下さい。</span></p><p><span class="txt-small">※CSSや（一部）見た目のための処理は記載のコードに含まれていません。</span></p>

<h2 id="h11dda479b2">完成したGAS</h2>

<h3 id="ha6ef7803ed">コード.gsの解説</h3><ul><li><code>doGet(e)</code><strong> 関数</strong>:<ul><li>HTTP GET リクエストを処理し、<code>index.html</code> ファイルを表示します。</li></ul></li><li><code>getParentFolders(url)</code><strong> 関数</strong>:<ul><li>渡されたURLから、Google Drive上のファイルまたはフォルダの親フォルダを取得します。</li><li>渡されたURLからファイルまたはフォルダのIDを抽出し、そのIDを使用して対象のファイルまたはフォルダを特定します。</li><li>対象のファイルまたはフォルダの親フォルダを取得し、それらの情報を配列に格納します。</li><li>最終的に、親フォルダの情報、ファイルまたはフォルダの名前、およびそのタイプ（ファイルまたはフォルダ）を含むオブジェクトを返します。</li><li>例外が発生した場合、エラーメッセージを含むオブジェクトを返します。</li></ul></li></ul>

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <style>
    /* スタイル */
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="form">
      <input type="text" id="url" name="url">
      <button onclick="getParentFolders()">実行</button>
    </div>
    <div id="result"></div>
  </div>

  <script>
    const getParentFolders = () => {
      const url = document.getElementById('url').value;
      google.script.run.withSuccessHandler(result => {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '';

        if (result.error) {
          resultDiv.innerHTML = `<p class="error">Error: ${result.error}</p>`;
        } else {
          // ファイル名を表示
          const nameParagraph = document.createElement('p');
          nameParagraph.textContent = result.name;
          resultDiv.appendChild(nameParagraph);

          // 親フォルダのリストを表示
          const list = document.createElement('ul');
          result.parents.forEach(folder => {
            const listItem = document.createElement('li');
            const folderLink = document.createElement('a');
            folderLink.href = folder.url;
            folderLink.target = '_blank';
            folderLink.textContent = folder.name;
            listItem.appendChild(folderLink);
            list.appendChild(listItem);
          });
          resultDiv.appendChild(list);
        }
      }).getParentFolders(url);
    }
  </script>

</body>

</html>

<h3 id="hdd96d86586">index.htmlの解説</h3><ul><li><strong>実行ボタンのクリック時の処理</strong>:<ul><li>ユーザーが実行ボタンをクリックすると、<code>getParentFolders()</code> 関数が呼び出されます。</li></ul></li><li><code>getParentFolders()</code><strong> 関数の処理</strong>:<ul><li>入力されたURLを取得します。</li><li>Google Apps Scriptの <code>getParentFolders()</code> 関数を呼び出します。これは、指定されたURLの親フォルダを取得するサーバー側の関数です。</li><li><code>withSuccessHandler()</code> メソッドを使用して、サーバーからのレスポンスを処理します。</li><li>レスポンスがエラーを含む場合は、エラーメッセージを表示します。</li><li>エラーがない場合は、次の処理を行います：<ul><li>取得したファイルの名前を表示します。</li><li>ファイルの親フォルダのリンクをリスト表示します。リンクは新しいタブで開きます。</li></ul></li></ul></li></ul>

<h2 id="h5342a01a7e">完成までの流れ</h2><h3 id="h84cc25af71">Google Apps Scriptファイルの作成</h3><ol><li>Google Apps Scriptにアクセス</li><li>新しいプロジェクトをクリック</li><li>コード.gsの画面が開く<ol><li>コード.gsに処理を書く</li></ol></li><li>ファイルを追加で「HTML」を選択<ol><li>名前をindexにする（別のファイル名でもOK）</li><li>URLを入力する&lt;input&gt;と実行する&lt;button&gt;を書く</li><li>実行結果を出力する処理を書く</li><li>CSSで見た目を調整</li></ol></li></ol>

<h3 id="hbcdff16b33">OAuthのScopeの設定</h3><p>作成したGASには、スコープによる承認が必要なメソッドが含まれています。ここではスコープを設定するためのマニュフェストの編集手順を記載します。</p><h4 id="hf909dc458f">スコープによる承認が必要なメソッド</h4><ul><li><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja#getname" target="_blank" rel="noopener noreferrer nofollow">getName()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja#getparents" target="_blank" rel="noopener noreferrer nofollow">getParents()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/folder?hl=ja#getid" target="_blank" rel="noopener noreferrer nofollow">getId()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/folder?hl=ja#geturl" target="_blank" rel="noopener noreferrer nofollow">getUrl()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/drive-app?hl=ja#getfolderbyidid" target="_blank" rel="noopener noreferrer nofollow">getFolderById()</a></li></ul><blockquote><p>この方法を使用するスクリプトには、次の 1 つ以上のスコープによる承認が必要です。<br>https://www.googleapis.com/auth/drive.readonly<br>https://www.googleapis.com/auth/drive</p><p><span class="txt-small">引用元：</span><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">https://developers.google.com/apps-script/reference/drive/file?hl=ja</span></a></p></blockquote><p>「<a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google Drive API のスコープを選択する</a>」ページにスコープの説明が記載されています。今回はドライブのディレクトリを辿りたいだけなので、<strong>drive.readonly</strong>のスコープを指定します。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>スコープコード（省略）</p></th><th colspan="1" rowspan="1"><p>説明</p></th><th colspan="1" rowspan="1"><p>使用量</p></th></tr><tr><td colspan="1" rowspan="1"><p>drive.readonly</p></td><td colspan="1" rowspan="1"><p>ドライブのファイルを表示、ダウンロードする。</p></td><td colspan="1" rowspan="1"><p>制限付き</p></td></tr><tr><td colspan="1" rowspan="1"><p>drive</p></td><td colspan="1" rowspan="1"><p>ドライブのファイルの表示と管理を行います。</p></td><td colspan="1" rowspan="1"><p>制限付き</p></td></tr></tbody></table><ol><li>編集画面の左にあるプロジェクト設定（⚙アイコン）に移動</li><li>全般設定の「「appsscript.json」マニフェスト ファイルをエディタで表示する」を有効にする</li><li>エディタに移動<ol><li>appsscript.jsonに移動</li><li>oauthScopesを追記</li></ol></li></ol><pre><code>&quot;oauthScopes&quot;: [
  &quot;https://www.googleapis.com/auth/drive.readonly&quot;
]</code></pre><h4 id="hb40d397465">使用量：制限付きとは？</h4><blockquote><p>「使用量」列は、各スコープの機密性を示しています。定義は次のとおりです。</p><p><strong>制限付き</strong>: このスコープでは、Google ユーザーデータに幅広くアクセスできます。制限付きのスコープの検証プロセスを行う必要があります。この要件については、<a href="https://developers.google.com/terms/api-services-user-data-policy?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google API サービスのユーザーデータに関するポリシー</a>と<a href="https://developers.google.com/terms/api-services-user-data-policy?hl=ja#additional_requirements_for_specific_api_scopes" target="_blank" rel="noopener noreferrer nofollow">特定の API スコープの追加要件</a>をご覧ください。制限付きのスコープのデータをサーバーに保存（または送信）する場合は、セキュリティ評価を行う必要があります。: このスコープでは、Google ユーザーデータに幅広くアクセスできます。制限付きのスコープの検証プロセスを行う必要があります。この要件については、Google API サービスのユーザーデータに関するポリシーと特定の API スコープの追加要件をご覧ください。制限付きのスコープのデータをサーバーに保存（または送信）する場合は、セキュリティ評価を行う必要があります。</p><p><span class="txt-small">引用元：</span><a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja#drive-scopes" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja#drive-scopes</span></a></p></blockquote><h4 id="hde6b25aa3e">drive.readonlyとdriveの認証画面はどう違う？</h4><p>初回実行時に、このアプリがあなたのGoogleアカウントのデータにアクセスすることを許可するかどうかを確認する認証・承認画面が表示されます。スコープの設定によって、リクエストされるアクセス権の内容が変わります。</p>

<p>左）drive.readonly・・・表示、ダウンロード<br>右）drive・・・表示、編集、作成、削除</p>

<h3 id="h9dcc071ccd">デプロイ</h3><ol><li>デプロイボタンをクリックして「新しいデプロイ」を選択<ol><li>種類の選択で「ウェブアプリ」を選択</li><li>説明（任意）、次のユーザーとして実行を「ウェブアプリケーションにアクセスしているユーザー」、アクセスできるユーザー「自分のみ」を設定する</li></ol></li><li>デプロイ</li><li>ウェブアプリのURLが発行される</li><li>URLにアクセスすると、作成したindex.htmlの内容が表示される</li></ol><p><span class="txt-small">※制限付きのスコープのため、アクセスできるユーザーは自分のみにしておくのが安心かと思います。不安な点がある場合は、ご自身で詳細を調べて設定してください。</span></p>

<h2 id="ha214098e44">まとめ</h2><p>今回Googleフォルダに関するGASを作成し、数多くのメソッドが用意されているということを知ることができました。</p><p>またスコープの設定について学んで、データへのアクセスと許可について考えさせられました。特に制限付きスコープを扱う際は、データの適切な使用や第三者への転送制限、広告目的でのデータ使用の禁止などに留意する必要があります。これらのポイントを考えると、作成者としてはデータの取り扱いに慎重さが求められることがわかります。</p><p>同時に、実行者としても、自身のデータにアクセスされる範囲を理解し、プライバシーを守るために注意が必要だと感じました。個人情報や機密データが含まれる場合には、特に慎重にならなければなりません。情報を守るために、正確な設定と適切なリクエスト許可が重要だと感じました。</p><p>アイコンは、<a href="https://iconoir.com/" target="_blank" rel="noopener noreferrer nofollow">Iconoir | Free Icons</a>のSVGを利用しました。</p>

効率アップ！GASで Google ドライブ 内の資料ディレクトリを見える化

<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>

Figmaで可変幅に対応したヘッダーコンポーネントを作ってみた

<p>「<a href="https://gigazine.net/news/20240130-vidnoz-ai/" target="_blank" rel="noopener noreferrer nofollow">無料で300以上のAIアバターやAI音声を使って超絶簡単に動画作成ができる「Vidnoz AI」を使ってみたレビュー - GIGAZINE</a>」で紹介されていた<a href="https://jp.vidnoz.com/" target="_blank" rel="noopener noreferrer nofollow">Vidnoz AI</a>が面白そうだったので、ためしに動画を作ってみました。</p><h2 id="h7bd5592baa">用意されたパーツを組み合わせて作成した動画</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/8536fdbf6e4f41cca9ae1e70f0436048/rapture_20240215222156.png?w=750&amp;h=384" alt="" width="750" height="384"></figure><p>無料版は、720pのエクスポート解像度の動画ファイルをダウンロードするか、共有リンクが発行可能です。</p><p><a href="https://share.vidnoz.com/aishare-xV8OBr5uTZwc5fQ2P5kRvwG717079292291900300" target="_blank" rel="noopener noreferrer nofollow">作成した動画</a></p><p>PRO版なら埋め込みコードの利用が可能です。</p>

<h2 id="h459262a7d2">作成した動画にはどんな設定をした？</h2><p>テンプレートの横型動画から作成したいイメージのテンプレートを選択。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/dca42f4e61d14a5bbbe4965301aa89f3/image.png?w=850&amp;h=458" alt="" width="850" height="458"><figcaption>使ったのはこのテンプレート</figcaption></figure><p>左上のロゴやテキスト、アバターの後ろにある薄い円や丸いあしらい、右側のテキスト部分も全部書き換えや削除や色の変更ができるパーツです。</p><h3 id="h16da3c81c8">いらないパーツを削除</h3><p>アバター部分とThank you!の文字、丸いあしらい以外を削除しました。<br>選択して消すだけ。簡単です。</p><h3 id="h8c22435f53">背景を変えてみる</h3><p>背景のパターンも豊富。黒ベースで角にあしらいのある背景に変更しました。</p><p>アバター周りの薄い円が青色で変更した背景に合わないので、薄い円を選択してゴールド系の色に変更してなじませました。丸いあしらいもちょっとビビッドカラーだったので、彩度を落としてなじませる・。</p><h3 id="he82c51bad2">アバターを変える</h3><p>「アバターPro」と「喋れる顔写真」のカテゴリから適当にアバターを選択。今回は「喋れる顔写真」のEllaを選びました。</p><h3 id="hf85e2afa3e">テキストの色を変更してアニメーションをつける</h3><p>色は単色だけでなくグラデーションや影の設定もできます。背景に合わせてゴールド系のグラデーションにしました。出現のタイミングはシーンが開始したら３秒後に２秒かけてその場でフェードインを設定しています。</p><h3 id="h0dac37aa5d">ステッカーも使ってみる</h3><p>右上に配置しているキラキラした星は、アニメーションのステッカーを配置しただけです。</p>

<h2 id="h09660816fd">音声読み上げの設定</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/2b296e122ec64cfdac0e735a7f655423/image.png?w=850&amp;h=190" alt="" width="850" height="190"></figure><p>アバターに読み上げてもらう文章を入力します。スピードはx0.9でほんの少しゆっくりにしました。</p><p>文章と文章のあいだに少し間をもたせたかったのですが、スペース・改行では調整できず・・他に方法があるかもしれません。</p><p>全体調整したらあとは生成するだけです。</p><h2 id="h8d78e14043">感想</h2><p>用意されてるテンプレートやパーツが充実しているので簡単にできるのはもちろんスゴイ！ですが、編集画面のUIが直感的でわかりやすい！と感じました。</p><p>あと各パーツに対してカスタマイズの自由度が高くて、え、ここまで無料できるの👀？と驚きです。</p>