はじめに

6月4日(水)に行われたFigmaが主催するセミナー「Maker Collective Tokyo」に参加してきました！

今回行われた7つのセッションでは「個人だけでなく、多様な視点から『ともに創るデザイン』を実現する」というテーマに焦点が当てられました。
最近のConfigでのアップデート内容もしっかり踏襲されていて、とても満足度の高い内容でした！

今回はオンラインで視聴したのですが、会場参加者にはFigmaのロゴが入ったペンライトが配られていたそうです。
セッションのたびにペンライトが振られていて、登壇者の方はみんな「アイドルライブみたいで嬉しい！」と喜ばれていました☺️

https://platform.twitter.com/widgets.js

では内容について早速紹介していきます！

キーノート

はじめのセッションではFigma社のYuhkiさんによるキーノートが紹介されました。

Figmaではなんと最近だけでも56件ものアップデートが実施されました。

これらはFigmaが「デザイナーがツールに煩わされず、本来のクリエイティブな作業に集中してほしい」という思いから生まれたそうです。
Configで発表された新サービスも含めて、これらはアイデアが生まれてから世に出るまで、デザインの全プロセスをしっかりとサポートしてくれると話されていました。

Figmaが考える”デザイン”とは、「好奇心を持って可能性を問い続け、細部にこだわり、人々の心を動かし、そして可能性の境界線を塗り替える営みである」という言葉がとても印象的でした。

またFigmaの新機能を活用した事例も複数紹介されました。
中でも特に印象的だったのがKeita Saitoさんが『Figma Make』で作成したこちらのゲーム。

https://platform.twitter.com/widgets.js

『Figma Make』でこんなこともできるんだ！という衝撃を受けました…！
(私もプレイしてみましたが、25万点がやっとでした)

Figmaを活用した共創デザインの実践 ～理想と現実のギャップをどう埋めるか？～

2回目のセッションでは、TOYOTAのMurayama Taichiさんが登壇。
社内でFigmaを使ってどのように「共創デザイン」を進めているのかをお話しいただきました。

TOYOTAは今、車だけでなく移動サービス全般を担う「モビリティカンパニー」へ進化中。
バラバラだったサービスを統一するため、Figmaを使った「共創デザイン」に挑戦していると話されていました。

ただFigma導入により、企画担当者やエンジニアもデザインについて話しえるようになった一方で、かえってデザイナーの負担が増えてしまうという困りごとも。

共創デザインのカギは「人との関係性」

TOYOTAのMurayamaさん曰く、大切なのは「ツールを使う人たちの関係性をどう作るか」。
そのための秘訣として次の4つが挙げられました。

  • 役割をはっきりさせる: 誰が何を担当するかを明確に
  • みんなで目標を決める: 最初からゴールを共有する
  • データで判断する: 意見だけでなく数字で決める
  • 試作品で確認する: 早めに試して意見をもらって改善

Figmaは強力なツールですが、本当に良いデザインは「チームがお互いを理解し、同じ目標に向かって協力し合うことで生まれる」とのこと。
デザインの見た目を整えることにばかり意識が向きがちですが、「関係性をどう作るか」という視点もしっかり意識していきたいなと思いました。

Dev Modeから始まるデザインとエンジニアリングの融合

3回目のセッションでは、株式会社ゆめみのGaku Takedaさん、Kazutaka Ikemuraさんが登壇。
FigmaのDev Modeを使って、デザイナーとエンジニアの連携をスムーズにする工夫が紹介されました。

デザイナーとエンジニア間のよくある課題として「デザインと実装がずれる」「お互いの考えていることがうまく伝わらない」ことなどが挙げられます。
これらは「同じゴールを目指していても、見ている方向が違う」のが原因と話されていました。

Dev Modeが橋渡しになる！

そこで紹介されたのがFigmaのDev Mode機能。
Dev Modeは、単なるエンジニア向けの機能ではなく、デザイナーが情報を正しくわかりやすく届けるための“橋渡し”のツールとして活用できるそうです。

✅ 「アノテーション」で実装のための情報を書き込む
Dev Modeには「アノテーション」という注釈を加えることができる機能があります。

  • このボタンはどんな部品（コンポーネント）なのか。
  • ここに入る文字は、プログラムでどういう名前で管理されているのか。
  • ボタンを押した時にどう動くのか。

といったように、エンジニアがプログラムを作るために必要な情報をアノテーションとして明示しておくことで、エンジニアが後から見ても意図が伝わりやすくなります。

またコメント機能の使い分けについても紹介されました。

アノテーション：エンジニアが後から見ても分かるように、詳しい説明や決まった情報を残すときに使用
コメント：デザインのレビューや、その場での話し合いで使用

✅ 「開発準備完了」でステータス管理
Dev Modeではセクションに「開発準備完了」のステータスを付けることができます。
これにより「実装してもOK！」という状態になったことを、分かりやすく示すことができます。
また、「開発準備完了」になったデザインが変更されたら、その変更内容をメモに残したり、変更前と変更後を比べたりもできると話されていました。

Takedaさん曰く、「デザインはデザイナーだけのものではない」とのこと。
Dev Modeを使って、デザイナーとエンジニアがもっと協力し、お互いの仕事の境界線を曖昧にしていくことが大切という言葉が印象的でした。

13部署をつなぐ、Figma Slidesの力

4回目のセッションでは、株式会社セールスマーカのNaoya Okaさんが登壇。
資料作成の課題を『Figma Slides』で解決した事例について紹介されました。

スライド資料もこちらから確認することができます。

https://platform.twitter.com/widgets.js

株式会社セールスマーカが13部署に拡大する中で課題となったのが、スライド作成の非効率さと、デザインの一貫性の欠如でした。
そこで『Figma Slides』を試してみたところ、全社導入を即決するほどの手応えを感じたそうです。

『Figma Slides』が解決した3つの課題

  • 連携の手間と工数：同時編集が可能になったことで「依頼→修正→再提出」の往復が不要に
  • デザイン崩れや統一感の欠如：Web用素材をそのまま貼れる・ブランドトーンが維持できる
  • 属人化の防止とナレッジ共有：他部署の資料を参考にし合う“資料文化”が生まれた

社内報告会の資料や登壇資料も全て『Figma Slides』で統一。
良いスライドのデザインや構成がお互いに共有され、情報の透明性が増し、コミュニケーションの活性化につながったとのことです。

今後はスライド専用のコンポーネントライブラリを整備し、デザイナー以外も効率よく使える環境を目指すとのこと。
これはかなり使いやすそうなので、ぜひ私も取り入れてみたいなと思いました！

「ともに創るデザイン」を加速させるFigma Buzz

5回目のセッションでは、ファインディ株式会社のAkihiro Mukaiさんが登壇。
Config2025で発表された新機能『Figma Buzz』の活用事例が紹介されました。

ファインディでは、非デザイナーもFigmaのコンポーネント機能を積極的に活用し、2024年には社内で制作されたクリエイティブが1万点を突破したとのこと。
しかしその一方で、「コンポーネントがいつの間にか消えてしまう」「使い方が伝わりにくい」といった課題もあったそうです。

こうした問題を解決するにあたりMukaiさんが注目したのが、Figmaの新機能『Figma Buzz』です。

『Figma Buzz』は、豊富なテンプレートを使って誰でも簡単にデザインが作れる機能です。
Mukaiさんは、次の3つのポイントを特に高く評価していました。

  • 非デザイナーでも使いやすい
    編集可能な範囲が明確に設定されており、デザインの専門知識がなくても迷わず操作できる
  • 複数のデザインをまとめて作れる（バルク作成）
    ExcelやCSVデータを元に、似たようなデザインを一度に大量に生成できる
  • AIによる画像生成機能
    プロンプトを入力するだけで、背景画像などを自動生成可能

Figma Buzzの処理速度はとても早く、「待ってる間にコーヒーでも飲もうかな」と立ち上がった瞬間、すでにすべての処理が完了していたということもあったそうです。
バナーや議事録の作成以外にも、市場の反応を見るためのデザイン案を素早く用意するためにも活用できるとの話もあり、非常に参考になりました！

「描く」という衝動に立ち返る 〜Figma Drawがひらく思考のかたち〜

6回目のセッションでは、デザインスタジオ「KRAFTS&Co.」の代表をされているMiwa Kuramitsuさんが登壇。
Config2025で発表された新機能『Figma Draw』の活用事例が紹介されました。

スライド資料&デモデータもこちらから確認することができます。

https://platform.twitter.com/widgets.js

こちらのセッションで紹介されたFigmaの新機能『Figma Draw』はイラストや視覚的な表現に特化した描画ツールで、数値調整が主体だったFigmaに直感的な表現力をもたらす機能です。

Figma Drawの主な機能

  • シェイプビルダー：図形の合成や切り抜きが直感操作で可能
  • 複数ポイント編集：複数の線や点を一括で調整
  • リピート機能：図形を自動的に放射状・直線状に繰り返して配置可能
  • パターン：図形の中に模様を繰り返し表示する「パターン」を、実際に適用された状態を見ながら編集可能
  • テクスチャ/ノイズ：ざらつきや凹凸の質感を追加可能
  • プログレッシブブラー：ぼかし強度を部分ごとに調整し、立体感を演出

これらの機能により、Figmaでも “描く”という創造的行為に立ち返ることができ、感情やニュアンスを含んだビジュアルデザインが可能になります。

セッションでは、Kuramitsuさんの6歳のお子さんが『Figma Draw』を使って描いたすごく可愛い絵も紹介されていました。
またKuramitsuさん自身も、Figma Drawを使って卒園アルバムを制作したとのこと。
仕事だけでなく、旅行のしおりやアルバム作成など日常にFigmaを使用していくのもすごく楽しそうだな〜と思いました。

Connecting the Dots: Figmaで想像から創造へ

7回目のセッションでは、Figma社のHiroki Taniさん、Corey Leeさんが登壇。
Figmaを使って、アイデアを考える段階から実際に製品やサービスとして世に出すまで、どんなことができるのかが紹介されました。

  1. アイデア出し
    ホワイトボードツール『FigJam』を使ってチームでアイデアを出し合い、付箋や画像を活用して発想を広げる。
  2. アイデアを形に
    『FigJam』のアイデアはFigmaのAI機能でスライド化が可能。
    さらに画面デザインやプロトタイプもAIが補助し、スムーズに形に。
  3. 高度なプロトタイプ
    『Figma Make』を使えば、入力、ドラッグ、背景動画など複雑なインタラクションも再現可能。
    実装に近い形のプロトタイプが作れる。
  4. 世に出す
    開発準備ができたことを伝える「ハンドオフ」を行ったり、『Figma Sites』でLPを自動生成し、『Figma Buzz』でSNS素材を量産することもFigmaだけで可能。

このようにデザインから公開・拡散まで、一連のプロセスをFigma上で完結することができます。

セッションでは、Figmaはアイデアを「想像」する段階から、実際にサービスとして「創造」し
世の中に広めていくまで、全てをつなぐことができるツールであると述べられていました。

このセッションでは、Figmaの機能を活用しつつアイデア出しから世に出すまでの流れをデモンストレーションで見ることができました。
Figmaの新機能について断片的にしか追えていなかった自分にとってはものすごくありがたかったです！

まとめ

今回の「Maker Collective Tokyo」では、Figmaが単なるデザインツールにとどまらず、「想像から創造へ」、さらにその先の発信・共有までを一貫して支えるプラットフォームへと進化していることが、セッションを通して実感できました。

また、「関係性をつくる」といった言葉が繰り返し登場したのも印象的でした。
Figmaの進化は、ツールの進化であると同時に、チームや組織の文化そのものをデザインする手助けにもなっているのだと強く感じました。

ここまで読んでいただきありがとうございました！