最近、カスタム 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 分のコードとすべてのアニメーションが機能し、将来の作業が完了しました。 結論： 興味深いタスクが見つからない場合は、タスクがあなたを見つけます。すべてを自動化しましょう :)

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

コメント

ラベル

この記事は

Related Stories

Telegram: クリプト島と本土を結ぶ橋

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

ユニークなエコシステムを支えるビットコインUTXOのモデル

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Telegram: クリプト島と本土を結ぶ橋

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

ユニークなエコシステムを支えるビットコインUTXOのモデル

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps