【学習記録】Figmaでひたすらアイコンを作り、コンポーネント化する
記録のきっかけ
Daily UI の4日目課題「計算機」に取り組んでいます。
ボタンをひとつずつ作ると、それぞれ余白設定を変更したりが大変だろうな…と思ったので、下記の通り効率化を図りたいと思います。
ボタンの内容（数字やアイコン）をすべてコンポーネント化
オートレイアウトを使い、ボタンの内容を決まった位置に来るように設定
2を更にコンポーネント化し、大量作成することで後はポチポチボタンを作ればOKの状態にする
やりたかったこと
ボタンの中身に当たる数字やアイコンそれぞれは、縦も横もサイズが異なる。これらをクリアにし、要素の配置（整列）を容易にしたい。
アイコン＋テキストのコンポーネントを作成した上で、アイコンだけ容易にタブから切り替え出来れば、コンポーネント自体は1つ作るだけで良い、という状態を目指したい。
作業手順
まずは利用するアイコンをずらっと並べ、コンポーネント化する
（マテリアルデザイン以外のアイコンなど、アイコンごとに横幅縦幅が異なるものを利用する場合）
正方形の箱の中に入れることで整列をしやすくする。そのために、フレーム3階層のミルフィーユを作る第一階層：外枠の箱
第二階層：アイコンを正方形内に収めるための箱
第三階層：アイコンの要素（長方形・直線）をまとめた箱
より詳細な手順（階層の順番が前後する）
第三階層
フレーム化されているアイコンの青枠を、Commandを押しながら調整し、なるべく形に沿うようにする。
※コンポーネント化されているアイコンなどの場合は、この作業の前に一度コンポーネント化を解除する。
第二階層
第三階層のアイコンを、第二階層の正方形フレームにはまるようにサイズ調整/上下左右中央に配置されるよう整列をかける。
上下左右中央揃えがうまく行かない場合は、直接X/Y軸を指定する（.5単位でOK）
発生した問題 ※未解決
自作したアイコンをフレーム化すると、アイコンの拡大／縮小が想定通りの動きをしない。。（周りのフレームだけ大きくなり、中身のアイコンは小さいまま／大きいままという現象が起こる）
→「制約」という機能の設定が原因ということが判明。
デフォルトの「上」「左」の設定の場合、フレームに対して上と左に固定されたままの状態となる＝フレームサイズを変更しても拡大／縮小されない。ただし、動画のとおり三階層でアイコンを作ってしまうと、拡大縮小の修正がかなり難しい。。（解決のために試したことは後述あり）
問題に対する解決策
※一度記載の方法で上手くいったのですが、再度試したところ想定通りの動きをしなかったため、再度検討中・・・。
考え方としては、「制約の設定で上左固定が問題なのであれば、拡大縮小が効くようにすればよい。」という発想。第三階層要素（直線や円）のすべてを、制約の「拡大縮小」にする第三階層のフレーム自体も、制約の「拡大縮小」にする
※ただし、これだけでは外側の箱（第一階層）を拡大縮小しても、第二階層のフレームが拡大縮小されない。従って、第二階層も拡大縮小するような設定が必要。
第二階層水平／垂直のサイズ設定を「拡大」にする
※この状態で外側の箱（第一階層）を拡大縮小すると、アイコンが上下左右中央に配置されない。従って、第一階層にてオートレイアウトを設定。
第一階層オートレイアウトを設定し、子要素が上下左右中央に配置されるように設定必要に応じてパディングを設定
所感など
マテリアルデザインのアイコンKitやラジオボタンなどのコンポーネントを使用していると、階層が複雑になっていて使いにくいな…と思っていました。（要素に対して余白を取りたいのに、その周りですでに余白を持っているから計算狂うな…と思ったり。）
しかし、この階層の複雑さは「きれいに要素を整列させたい」という意図によるものだ、ということが理解出来てスッキリしました💡一方で、今回のように「アイコンそのものの縦横幅が違うから、正方形に収めたい」という意図で自分でアイコンを一から作ったときの拡大縮小がうまく行かないなど、つまづきポイントが多かったです。。
動画を見ると「こういう操作をすれば、これが出来る」ということは理解出来ますが、原理原則を知らないとこうして躓いた時に「何が原因だから、どうすれば良い」の仮説立てが上手く行かないなと感じました。
原理原則を理解しながらツール操作も覚えていきたいです。
参考にしたもの
この記事が気に入ったらサポートをしてみませんか？