《綿貫佳祐のFigma思考ラボ｜Vol.1》Figmaを“使う”から“考える”へ──UIデザイナーが見た進化の7年間

Web制作に携わる人にとって、いまや日々の業務に欠かせない存在となったコラボレーションプラットフォーム「Figma」。一方で、「もっと使いこなしたい」「ほかの人はどう活用しているのだろう」と感じている方も多いのではないでしょうか。

本連載では、Figmaの使い方や、Figmaを軸にしたワークフローを紹介します。ただし、単なる機能解説ではありません。各機能をどう捉え、どんな思考で使いこなしていくのか–––––その“思考”に焦点を当ててお届けします。ときには1人のUIデザイナーとして、ときにはチームの一員として、私がどのようにFigmaと向き合っているのかを共有していきます。

著者プロフィール

自己紹介

私は2017年に株式会社エイチームホールディングス（旧 株式会社エイチーム）に新卒で入社し、以来UIデザイナーとして在籍しています。 現在はグループ会社のQiita株式会社にてQiitaやQiita Job Changeなどのサービスの開発に携わっています。

社外の取り組みとしては、2023年2月に技術評論社より『Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで⁠〜』というFigma書籍を出版しました。

制作スキルとしてはUIデザイン、フロントエンド、グラフィックデザインなど幅広くカバーしています。 また、プロジェクトマネジメントや組織マネジメントも経験しています。 こうしたバックグラウンドを踏まえ、単なるデザイン観点にとどまらず、実装者との連携やチーム全体でのFigma活用のヒントも交えながら、お伝えしていくつもりです。

Figmaとの出会い

私がFigmaに出会ったのは2018年、バージョンが3.0になった頃でした。

当時はAdobe XDをメインで使用しながら、ときどきSketchを使っていました。 どちらのツールも、1人で制作する分には大きな不満はなかったのですが、他者とのコラボレーションには苦労していました。 デザイナー同士ですらスムーズにいかない場面があり、エンジニアやマーケターなど他職種とのやりとりとなれば、なおさらハードルが高かったのです。

そんな折Figmaに出会い、コラボレーションのしやすさに驚いたのを覚えています。 まだオートレイアウトすら存在せず、今と比べれば機能は決して多くはありません。しかし、それでもメインツールをFigmaに切り替える決断に時間はかかりませんでした。

一番大きかったのは、「デザインをデザイナーのパソコンの中だけで完結させない」という理想が実現できたことです。

それまでは、制作途中のデザインデータはデザイナーのローカル環境にしか存在せず、他職種のメンバーが制作プロセスに参加することは困難でした。私は個人的な信条として「デザインをデザイナーに閉じない」を大切にしています。意識的にキリの良いタイミングで書き出してチームに共有していましたが、それでも手間がかかり、リアルタイムなコラボレーションには程遠い状態でした。

Figmaがブラウザだけで動き、誰もが常に最新版のデータへアクセスできるようになったことで、デザイナー以外のメンバーも制作の早い段階から参加できるようになりました。エンジニアやマーケターなどの方々が、制作途中のデータを見ながら議論できるようになり、これまでより遥かに早く、密なやりとりができるようになったのです。

また、副次的な効果として「デザインってこんなふうに作るんだ」と興味を持ってもらえるようになり、デザインプロセスへの理解を深めてもらうきっかけにもなりました。

Figmaと共に歩んだ制作スタイルの変化

その後、私が日頃「こんなデザイン制作ができたらいいな」と思っていたことが、Figmaによって次々と実現されていきました。まるで自分の気持ちが伝わっているかのように、欲しかった機能が次々とリリースされていったのです。

その中には、例えば次のような変化がありました。

• 要素の追加や並び替えを、コードのように効率的に実現したい
  → オートレイアウトによって、手動調整の手間が劇的に減少
  
• コンポーネントのバリエーション管理を、UIデザインツール上とコード上で統一したい
  → バリアントによってデザインと実装の乖離が解消
  
• プロトタイピング専用のデータを別途作りたくない
  → インタラクティブコンポーネントで効率的なプロトタイプ作成が可能に
  
• チーム全体に導入するなら英語のUIは難しい
  → 日本語対応によって組織への展開がスムーズに
  
• Figmaに詳しくない実装者へのハンドオフを簡単にしたい
  → Dev modeで開発者向けの機能が強化

このように、自分が抱えていた課題や「こうあるべき」と考えていたワークフローが、Figmaのアップデートによって次々と形になっていきました。これが、私が早い段階からFigmaをメインツールに据えた大きな理由です。

少なくとも私のようにWebを中心としたUIデザイナーにとっては、心地よいアップデートが続き、利用シーンも着実に広がっていきました。

7年間で見えてきたFigmaの成長フェーズ

2018年から現在まで、Figmaと共に歩んできた約7年間を振り返ると、私自身の使い方も、Figmaというツールの立ち位置も大きく変化してきました。

フェーズ1：コラボレーションツールとして（2018–2019年頃）

この時期のFigmaは、何より「ブラウザで動く」「リアルタイムで共同編集できる」という点が最大の価値でした。オートレイアウトもバリアントも存在せず、今から思えばデザイン制作機能としては決して充実していたわけではありません。

それでも私がFigmaを選んだのは、「デザインを共有する」という根本的な課題を解決してくれたからです。当時の私にとってFigmaは“コラボレーションツール”であり、組織でデザインを進めるために選んだ存在でした。

フェーズ2：本格的なデザインツールへの進化（2019〜2021年頃）

オートレイアウト（2019年）やバリアント（2020年）といった機能が次々とリリースされ、Figmaはコラボレーションツールから「本格的なデザイン制作ツール」へと進化していきました。

この時期、私の使い方も大きく変わりました。単に「デザインを共有する」に留まらず、「実装まで見据えて効果的にデザインする」ことが可能になったのです。

また、私自身も全社にFigmaを積極的に導入する立場へと変わっていきました。

フェーズ3：デザイン組織の標準ツールへ（2022年〜2025年）

日本語対応（2022年）、Dev mode（2023年）といった機能により、Figmaは個人やチームを超えて「組織全体で使う標準ツール」としての地位を確立していきました。

この頃になると、私の関心は「個人として効率的にデザインする」から、「デザイン組織全体でどのようにデザインシステムを構築し、スケールさせるか」へと移っていきました。Figmaは組織のデザインプロセスの基盤となり、デザイナーだけでなくエンジニアも日常的に触れるツールへと変わっていったのです。

フェーズ4：制作フローのすべてを担うツールへ？（2025年〜）

FigJamにはじまり、Figma Make、Figma Site、Figma Buzzなど、Figmaはもはや制作職だけが使うツールではなくなりつつあります。もちろん現時点では、Figmaだけですべてが完結するとは言えませんが、あと数年後にはどうなっているかわかりません。

恐らく今後もFigmaは、デザイナー向けにとどまらず、全方位的にプロダクトを広げていくのだと思います。

Figmaと共に変化し続ける自分の立ち位置

振り返ってみると、Figmaの成長と共に、私自身の立ち位置も変化してきました。

• 初期：便利なコラボレーションツールを見つけた1人のデザイナー
• 中期：チームでの導入を推進し、効率的なワークフローを構築する立場
• 現在：組織のデザインシステムの基盤としてFigmaを活用し、より多くの人を巻き込んでいく役割

Figmaは単なるデザインツールではなく、デザインに関わる多くの人をつなぐプラットフォームへと進化しました。そしてその進化に合わせて、私たちデザイナーの役割も「デザインを作る人」から、「デザインを通じてチーム全体の価値創造を促進する人」へと変わってきたように感じています。

次回以降に向けて

冒頭でも紹介したように、本連載ではFigmaの機能をただ紹介するのではなく、「なぜその機能が存在するのか」「どう考えて使いこなすのか」という思考プロセスに焦点を当てていきます。

具体的には、未来を見据えたデータ作成、チーム全体の視点で構築するライブラリ、UIデータとコードを両立させる考え方など、プロの現場で実際に役立つ内容をお届けする予定です。

Figmaの理解を深め、より効率的で質の高いデザイン制作を実現するためのヒントになれば幸いです。

文：綿貫佳祐