チュートリアル: 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();

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

結果：

30 分のコードとすべてのアニメーションが機能し、明年の作業が结束しました。

結論：

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