🚀 Figma 2023の「Variables機能」がもたらすデザイナーとエンジニア協業の新たな時代 🎨👨‍💻

プロトタイプから完成品へ 「10倍の法則」

新しいプロダクトをスタートするとき、プロトタイプを作成することから始めます。
短時間でFigmaでざっと作ったプロトタイプは、
アイデアの妥当性を確かめるための大切な第一歩です。

しかし、その次のステップ、プロトタイプを完成品に持っていく下流工程の作業が、想像するよりもはるかに難しい世界です。

プロトタイプを完成品のレベルまで持ち上げるためには、10倍の時間が必要と言われています。
プロトタイプから完成品への移行は、案外地味で大変な作業です。

Figma 2023はエンジニア向けツールになった

従来、Figmaはデザイナー向けのツールとして知られていました。
しかし、2023年のこのアップデートで、Figmaはエンジニア向けの機能も強化。
特にフロントエンドエンジニアにとっては、新たな可能性が広がりました。

役割分担がどう変わったか

作業効率観点からすると、作業場所と責任分担がこれまでと変わります。

🌟 これまでのデザインプロセス

1. クリエイティブデザイン

絶対配置を用いて、まず画面を自由自在にデザインする🖌️

責任分担: 🎨 デザイナーがやるべき作業。

2. 実装しやすいデザイン

その次、実装しやすくするために、この辺りの作業を行います。

• Auto Layout （オートレイアウト化）
• Constraints（制約）
• Components（UIパーツを再利用可能に）
• Variants（状態管理）

役割分担: 🎨 デザイナーがやった方が良い作業。
必要に応じて、👨‍💻 フロントエンドエンジニアがアシストしても良い作業。

🚀 これからのデザインプロセス

Single Source of Truthの世界

Figmaの「Variables機能」の登場で、デザインとコードの間の壁がどんどん低くなってきました。

Variables機能を使うと、デザイナーと開発者の連携を効率化する長年デザイントークンで盛り上がっていたSSOTの世界観が現実的になりました。

• Single Source of Truth (SSOT): デザイナーとエンジニアの間の真実の唯一の情報源

要するに、デザインを変えると（レビュー過程を通して）すぐそのまま本番のコードに反映することが可能になり、働き方を大きく変化させます。🔥

3. Variables機能を用いたデザイン

次に、Figma 2023の新機能で新たに必要になった作業。

• Variables Setting（変数化の設定）
• Variables Naming （適切な命名規則）
• Variables Scope（変数のスコープ限定）
• Variables Mode (変数のモード切替)
• Variables REST API（変数を自動的にコードに変換）
• Figma to Code Plugins（デザインをそのままコードに書き出す）

責任分担: 👨‍💻 フロントエンドエンジニアがやった方が良い作業。

総論

「Figmaは全部デザイナーに任せておけば良い」 の時代が終わりました！

フロントエンドエンジニア がガッツリFigmaをいじる必要性が生まれたので、仕事が増えました🤔
ただ、すり合わせのミーティング、ミス率、更新作業が減り、総合作業時間が減るので、実際仕事が減ります。 😄

もう、デザイナーとエンジニアの間の壁なんてないと言っても過言ではないのかもしれません。