チュートリアル: Figma ファイルを Rect 要素付きの SVG に変換する方法

最近、カスタム SVG をアニメーション用の Webflow プロジェクトに変更するという興味深いタスクが発生しました。

大したことないと思って、Figma を開いて、SVG のソースコードを取得して、それを挿入したのですが、うまくいきませんでした😔

この問題を調査したところ、SVG をアニメーション化するライブラリは、同じ SVG 内のrect要素を直接操作することがわかりました。これも問題ないと思いました :)、すべてのレイヤーの名前を Rect に変更すれば、満足です。

名前を変更しました。SVG ソース コードを確認しましたが、 rect表示されません :(

それから、私は椅子にずっと快適に座り、より効率的に調査を始めました。

SVG がrecrとしてアニメーション化したい要素を理解するには、それらを描画する必要があることがわかりました... ドラムロール - フレームを通して。

テストを開始しましたが、すべて正常に動作しています。

しかし、ここで別の問題が発生します。

このプロセスを自動化するにはどうすればよいでしょうか?

すでに描いたイラストがたくさんあるので、やり直したくないんです。

さて、私たちはフレームで作業しているので、フレーム内のすべての要素をラップするプラグインを作成するという解決策を見つけました。

プラグインのソースコード:

 const selectedNodes = figma.currentPage.selection; if (selectedNodes.length === 0) { figma.notify("Please select at least one layer."); } else { selectedNodes.forEach(node => { const frame = figma.createFrame(); frame.resize(node.width, node.height); frame.x = node.x; frame.y = node.y; frame.appendChild(node); node.x = 0; node.y = 0; }); figma.notify("All selected layers are wrapped in frames!"); } figma.closePlugin();

または、 GitHubからプロジェクトをダウンロードしてください :-)

結果：

30 分のコードとすべてのアニメーションが機能し、将来の作業が完了しました。

結論：

興味深いタスクが見つからない場合は、タスクがあなたを見つけます。すべてを自動化しましょう :)