841-biborokuWebフロントエンドの備忘録

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

Figma作ってみた

Reset Corner Radius

作成したプラグインは下記のURLをご覧ください。

https://www.figma.com/community/plugin/1478812638940260555/reset-corner-radius

選択したレイヤーのすべての角丸をワンクリックで0にリセットできます。個々のレイヤーだけでなく、グループやコンポーネント内のネストされたレイヤーにも対応しています。

なぜ角丸をなし・解除するプラグインを作ろうと思ったか

1. コーディングでの画像書き出しの地味なつらさ😭

Figmaでデザインされた画像を書き出す際、角丸が設定されていると、そのままでは角丸付きの画像としてエクスポートされてしまいます。

角丸なしで書き出したい場合、設定によっては一度角丸を解除しないといけません。複数選択すればまとめて角丸を0に変更もできますが、グループレイヤーや中のレイヤーをひとつひとつ選択するのは面倒です。

また多数のデザイナーが関わるプロジェクトでは、デザインルールが完全に統一されるとは限らず、どこかで設定がずれてしまうこともあります。

ルールで縛るのではなく、書き出すときにどうにかできないかと思ったのがきっかけです。

2. プラグイン作成に興味があった

以前からFigmaのプラグイン作成に興味があり、関連する記事や動画を見て簡単な機能なら作れそうかな🤔と。

また、Figmaには多くのプラグインがありますが、自分が求めるピンポイントな機能のプラグインが見つけられなかった（もしかすると存在するかもしれませんが…）。そこで、自分で作ってみることにしました。

普段どのように角丸画像・レイヤーをエクスポートしている？

書き出すときだけ一時的に角丸を0にするか、レイヤーを複製・コピーして角丸を無い状態にしてエクスポートしています。

デザインあるある

いろいろ作り方はあると思いますが、下記のような作りが多いのではないでしょうか。

  • レイヤーの塗りに対して画像が設定されていて、レイヤーに角丸
  • マスクした画像
    • マスクグループレイヤーを角丸
    • マスクレイヤーを角丸　など

書き出しするためにエクスポート設定をしてプレビューを確認してみます。

角丸が設定されているレイヤーと選択するレイヤーによって、角丸がある状態とない状態になることがわかります。

マスクした画像の画像レイヤーを直接選択すると角丸の設定を変更せずに角丸なしでエクスポートすることができます。

数が多いと地味に面倒です。

みんなはどうしてるのだろう？

コーディングをする人たちは、角丸の画像エクスポートをどうしているのか気になり調べてみると、同じような問題を感じている人がいるようでした・

以下のページでも関連する話題が挙がっています。

書き出しで困った：シャドウ・角丸の値が、画像レイヤーに直接設定されている
シャドウや角丸の値は、画像そのものに設定したほうがデザインデータ作成時は楽な場合がありますね。しかし、何も知らないエンジニアが画像をつかんで書き出しを行うと、シャドウや角丸付きの画像が書き出されてしまいます。エンジニアが書き出しのたびにレイヤーを確認・調整せねばならず、数が多いと大変です。

引用元: Grow Group

注意① 画像の装飾は含めずに書き出す
画像に付いている角丸やドロップシャドウなどの装飾は書き出す画像には含めず、CSSで実装することを推奨します。書き出す要素のレイヤーを確認し、エフェクトが付いた要素を含めて書き出さないように注意しましょう。

引用元: WebSpe

Dev export without rounded corners
It would be great if dev could export without rounded corners applied and or have some export flexibilities
角丸を適用せずに開発用エクスポートができると便利です。 または、エクスポートの柔軟性があると助かります。
引用元: Figma Forum

使い方

  1. 書き出したいレイヤーのエクスポート設定をする
    1. レイヤーにエクスポートファイル名を設定
    2. 倍率を設定
    3. 拡張子を設定
    4. （サフィックスを設定）
  2. 書き出し用のレイヤーまたはフレームをコピーして複製
  3. 複製したレイヤーを選択する
  4. プラグインとウィジェットで「Reset Corner Radius」を検索
  5. 該当プラグインをクリックで実行

実行すると、選択範囲の角丸がすべて解除されます。

適用範囲

  • 単一レイヤー
  • グループ化したレイヤー
  • グループ化したレイヤー内のレイヤー
  • インスタンス内のレイヤー
  • フレーム内のレイヤー
  • すべてのレイヤー

⚠️注意事項

  • 選択している中のレイヤーもすべて角丸の設定を0にします。
  • メインコンポーネントを選択した状態で実行すると、インスタンスにも適用されるため注意してください。

プラグインの仕組みと作成・公開

Figmaのプラグインは公式の手順に沿って作成しました。特に難しい処理はなく、選択したレイヤーやその中のすべてのレイヤーの角丸を「0」にするだけのシンプルな仕組みです。

  1. Figmaの開発者向けドキュメントを参考に、プラグインの基本セットアップを実施
  1. manifest.json を作成
  2. 選択したレイヤーとその子レイヤーの cornerRadius を 0 にする処理を実装
if ("cornerRadius" in node) {
  (node as RectangleNode).cornerRadius = 0;
}
  1. 動作確認
  2. プラグインの公開申請
  3. Figmaのサポートチームから承認の通知で公開

まとめ

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

シェア

Category