INTERFACE DESIGN — 03
Figma UI
Design
Design — 木下スタジオ / 木下貴博（滋賀・琵琶湖）
再現性のある設計を、Figmaで構築する
INTERFACE DESIGN — 03
Design — 木下スタジオ / 木下貴博（滋賀・琵琶湖）
再現性のある設計を、Figmaで構築する
— Overview
デザインは一度きりでなく、繰り返し使われる。
Figmaを用いたインターフェース設計の制作実例。レイヤー構造とコンポーネント設計を通じて、再現性のあるデザインシステムを構築。個別のUIを作るのではなく、UIを生み出す「仕組み」を設計することで、開発・更新・拡張のコストを最小化する。
— 01 課題
多くのUIプロジェクトで繰り返される問題がある。デザインは完成したが、開発実装と乖離する。修正のたびに全体が崩れる。次のデザイナーが引き継げない。これらはツールの問題ではなく、設計思想の問題だ。Figmaを「作るツール」ではなく「設計するツール」として使うことから始めた。
UIではなく、
UIを生む仕組みを設計する。
デザインと実装の乖離を構造から防ぐコンポーネント設計
修正コストを最小化するレイヤー命名規則とグループ構造
引き継ぎ・拡張を前提とした持続可能なデザインシステムの構築
— 02 設計
Figmaの機能をすべて目的のために使う。Variablesでデザイントークンを管理、Auto Layoutで余白を構造化、Componentでパターンを再利用可能にする。「画面を作る」から「画面が生まれる仕組みを作る」へ——その転換がプロジェクト全体のスピードと品質を決める。
① トークン設計
Variables で管理
カラー・タイポグラフィ・スペーシングをVariablesに定義。一箇所変更で全体に反映される構造。
② Auto Layout
余白を構造化する
固定値ではなくAuto Layoutで余白を定義。コンテンツが増えても崩れない柔軟な構造。
③ コンポーネント
パターンを資産化
Button・Input・Card等の基本UIをコンポーネント化。Propで状態管理し、再利用コストをゼロに。
④ レイヤー命名
開発者が読めるFigma
BEM準拠の命名規則を適用。デザインファイルをそのまま仕様書として機能させる。
⑤ ドキュメント
Figma内に設計意図を
各コンポーネントに使用ガイドをAnnotation。設計意図が引き継がれる仕組みを内蔵。
— 核心
設計が自走する
良いデザインシステムは、デザイナーがいなくても正しい判断を促す。仕組みが思想を運ぶ。
— 03 成果
構築したデザインシステムにより、新規画面の設計時間を大幅に短縮。既存コンポーネントの組み合わせで80%以上の画面が構成可能になり、デザイナーはシステム設計ではなく体験設計に集中できる環境が整った。
コンポーネント化により新規画面の設計コストを大幅削減
デザイン・開発間の仕様認識ズレをゼロに近づけた
引き継ぎ可能な持続するデザイン資産としてクライアントに納品
— Studio
木下スタジオ（Kinoshita Studio）は、滋賀県・琵琶湖を拠点に活動するデザイナー木下貴博のスタジオです。Webデザイン・UX/UIデザイン・アートディレクション・グラフィックデザインまで、一人で設計から制作・ディレクションを一貫して担当します。
本案件は UIデザイン · コンポーネント設計 の仕事です。「届けたい体験と届いている体験のズレを揃える」を核心に、地域の企業・全国のクライアントのビジョンを体験に翻訳しています。