Figmaで9スライスをつくる方法
本日は2022年12月11日ですが、この記事は🗓クラスター Advent Calendar 2022 10日目の記事です。遅刻！
前回は@toyakunさんによる“クラフトアイテム制作Tips＆公式アイテムの話”でした。
最初に知っておきたいつまづきポイントや、制作でのテクニックが詰まったクラフトアイテム制作のお供に最適な記事でした。
こんにちは。クラスター株式会社でデザイナーとして働いているよしおか こうです。
ソフトウェア開発の世界では定番のデザインツールFigmaを日々使い倒し、メタバースプラットフォーム clusterのUIデザインに勤しむ毎日です。
今回は、Figmaで9スライスをつくるHow toなお話をします。
9スライスとは
9スライスとは画像を9つのグリッド状に分割し、コーナーにあたるグリッド部分はサイズを維持、それらの間にある他のグリッド部分は伸縮させ、画像の形状を歪ませることなくスケーリングさせる手法のことを言います。
Unity開発ではスプライトの設定にあたる9-slicing Sprites、Android開発では9-Patch……と、呼び方は環境によって様々ですが、大体は何かしら実装方法の用意されていることが多いのではないでしょうか。
clusterでの9スライス使いどころ
大昔は角丸のある背景をつくるのに定番だった9スライスですが、デザインツールやプラットフォームの進歩により、角丸程度であれば現在は画像無しで簡単に実装できるケースが多いように感じます。
現在9スライスが必要な場面は、コーナーが普通の角丸ではなく、歪みなく変形する必要のあるグラフィックを使用する場合です。clusterでは“Cluster Round”と呼ばれる特別な角丸を使用したグラフィックがこれに該当します。
Cluster Round はclusterロゴの「c」からインスピレーションを受けたスーパー楕円で、clusterのデザイン原則に基づいた「人間が好ましく感じる手触り」の表現のひとつです。 - clusterv1.112アップデート記事より引用
9スライスの作り方
作り方はやろうと思えば様々な方法がありますが、今回は9スライスの伸縮の特徴に加え以下の2点の条件も満たしたいと思います。
- 色や線を変更できること
- コーナーのサイズを変更・バリエーションを出せること
なお、説明をわかりやすくするためグラフィックの形状はCluster Roundではなく、四隅が円で削られたような形のものにしたいと思います。
1.コーナーをつくる
まず左上のコーナーにあたるグラフィックをつくります。ここでさっそくポイントです。コーナーはそのままの形状をつくるのではなく、反転した塗りを残さない部分の形状をつくります。
図の左ではなく、右のような塗りを反転した形でつくる
これはコーナーのグラフィックをそのまま並べるのではなく、長方形を型抜きして1つのシェイプとして取り扱うようにするためです。
コーナーのグラフィックが出来たらコンポーネントにして完了です。つくったグラフィックは左上にあたるものなので、Constraintsの設定はLeft、Topのままで大丈夫です。
2.コーナーを使ってシェイプをつくる
前述した通り型抜きして1つのシェイプをつくっていきます。シェイプツールを使って長方形をつくり、その四隅に先ほどつくったコーナーのコンポーネントを回転してフィットさせます。
終わったらすべてのオブジェクトを選択し、Boolean groupsからSubtract selectionを選択すれば四隅の形状が歪まずスケーリングするグラフィックの完成です。
こういったシンプルな形状のものであれば、中間にあたる残り5つのグラフィックをわざわざ用意せずとも9スライスのような挙動をするグラフィックの作成が可能です。
3.コーナーのサイズを変更可能にする
最後にコーナーのサイズを変更できるようにします。四隅の型抜きの部分はコンポーネントになっているので差し替えが可能になっています。PropertiesからVariantを追加して新たなサイズのコーナーをつくりましょう。
新しいサイズが出来たなら、型抜きしたグラフィックにもVariantを追加して、2つ目のVariantのコーナーをすべて新しいサイズに変更します。これにて歪まず簡単にスケーリングでき、コーナーのサイズも調整できるようになりました。
終わりに
最初は9つすべてのパーツを用意して組み合わせていたのですが、要素が多くてメンテナンスしづらい……と思い考えていたら型抜きでいいじゃん！と気付いて、シンプルなデータ構造になったのでした。
9スライスの意匠や形状によってはこの方法ではつくれません。きっちり9つのパーツを用意する方法はComponentの仕様にやや苦戦させられたので、気が向いたら書いてみようかなと思います。
ここまで読んでいただきありがとうございました。次回……もとい本日の🗓クラスター Advent Calendar 2022はRDAGさんの“MToonをフル活用して動くアクセサリーで優勝する”です。是非読んで一味違うアクセサリーで優勝しちゃいましょう！
Discussion