FigmaでUIキットを使ってみたものの、
- フォントサイズが変更できない
- 色を変えたいだけなのに触れない
- 自由度が低くて使いにくい
と感じたことはないでしょうか。
実はこれ、UIキットの不具合ではなく、「設計思想を知らないと起きやすい誤解」です。
この記事では、UIキットが編集しづらく感じる理由と、実務での正しい向き合い方を整理します。
UIキットが「編集できない」ように見える理由
多くのUIキットは、次の仕組みで作られています。
- コンポーネント
- Text Style
- Auto Layout
- Variant
これらはデザインを統一し、破綻を防ぐための仕組みです。
そのため、フォントサイズや行間、余白などはインスタンス側で自由に変更することを想定していません。
「変更できない」のではなく「変更方法が決まっている」
UIキットを使う際、まず確認すべきポイントは以下です。
- Text Style が指定されていないか
- Variant（Size / Type / State など）が用意されていないか
多くの場合、「編集できない」のではなく「選択式で切り替える設計」になっているだけです。
UIキットは“そのまま使うもの”ではない
ここで大事な考え方があります。
UIキットは正解ではない。あくまで叩き台。
- 思想が合わなければ複製して調整してOK
- プロジェクトに合わなければ作り替えてOK
UIキットは効率化のための素材であり、縛りではありません。
実務での現実的な付き合い方
特にLPやWordPress前提の制作では、
- UIキットをそのまま使わない
- 必要な部分だけ取り込む
- 最終的には自分用に整理する
このくらいの距離感がちょうど良いです。
まとめ
UIキットが使いづらく感じる原因は、
- ツールの問題ではない
- 設計思想を知らないことが原因
というケースがほとんどです。
「自由に編集できない＝不便」ではなく、「破綻しないための設計」だと理解すると、UIキットとの付き合い方が変わります。
ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。
- 選考ではありません
- 履歴書不要
- 技術の話が中心
- 所要時間30分程度
- オンラインOK
