Figmaを通じたデザインと開発の橋渡し -チーム連携強化のための勉強会レポート

Figmaをはじめとするデザインツールの進化により、UI設計とフロントエンド開発の連携はこれまで以上に密接になっています。特にFigmaの「Devモード」やAI支援の普及により、効率的な連携が進む一方で、設計思想や情報整理のばらつきから、コミュニケーションコストなど課題も見られます。

そこで私たちは「デザインとフロントエンドの橋渡し」をテーマに、約25名が参加する部署横断型のFigma勉強会を開催し、普段共有しづらい設計や運用の考え方を議論し、共通認識を深めました。

この記事では、その勉強会の様子を振り返りながら、私たちがどのようにチーム連携を深化させているのかをご紹介します！

部署横断で課題に向き合うこと

今回の勉強会は、以下の2つの目的を軸に企画されました。

１.相互理解の促進
デザイナーとフロントエンド、それぞれの立場からFigmaファイルに対する期待や課題を言語化し、相手の視点を理解することで、日々のやり取りの質を高める。

２.開発連携の効率化
Figmaや補助ツールを活用し、実装につながる設計情報の伝達精度を上げることで、チーム全体としての生産性を高める。

今回の勉強会は「設計の統一」や「命名ルールの標準化」といった具体的なルールを決める場ではなく、共通の課題を認識し、今後の連携改善に向けたスタートラインを整えるという意味で、チームにとって大きな意義のある場となりました。

プロジェクトを通じた実例

勉強会の中では、実際のプロジェクトを題材としたケーススタディが行われました。

まずはデザイナーから、対象プロジェクトの概要や画面設計の狙い、どのような意図でデザインシステムを設計・整理してきたかが説明されました。構成のルール、コンポーネントの粒度、バリアントの使い分けなど、細かな設計思想も共有され、Figmaの設計がどのようなプロセスで作られているのかが可視化されました。

続いて、フロントエンド側からは、そのFigmaデータをどう読み解き、どのように実装へとつなげていったのかが紹介されました。 具体的には、「デザイナーが用意したデザインデータをどのような手順で実装しているか」、「デザインデータの確認しているポイント」といった、実装現場ならではの視点からのフィードバックが飛び交いました。

特に印象的だったのは、「デザインデータの変更頻度が高く、変更履歴を追いにくい」といった課題を指摘していただいたり、「デザイナーがFigma上でデザインルールを設定していても、実装するメンバーによってはFigmaの細かい機能まで使えていない」など、Figma機能の使い方、コミュニケーションの必要性について、両チームから具体的な議論が生まれたことです。これにより、「Figmaファイルは単なるビジュアルデザインの場所ではなく、開発連携の起点である」という共通認識が改めて生まれました。

連携の文化を育てる第一歩として

勉強会の終盤では、参加メンバーから次のような声が上がりました。

• デザイナーが何を考えてコンポーネントを設計しているのか、初めて体系的に聞けた。
• 実装する立場からのフィードバックがあったことで、自分のFigmaデータの作り方、連携方法に気づきがあった。
• Figmaツールに対する理解が人によってバラツキがあるため勉強したい。

今回の取り組みは単発の勉強会にとどまらず、日々の業務フローそのものをアップデートするための第一歩として大きな意味を持ちます。 特定のツールを扱う勉強会でありながら、その先にある“協働のあり方”に踏み込んだことで、プロセスと人の両方にアプローチする貴重な機会となりました。

一貫したものづくりの強みを活かすために

私たちは、デザインから実装までを同じ会社・同じチーム内で完結できる体制を構築しています。これは、他社では開発部分を外注してしまうケースも多い中で、私たちの大きな特徴であり強みの一つです。 その強みをより活かすためには、単に「作業を渡す」のではなく、「互いの考え方を理解し、より良い形を一緒に模索する」姿勢が不可欠です。

今回の勉強会は、まさにその姿勢を体現するような場となりました。 今後もこうした活動を継続しながら、社内外に向けて連携力・組織力を強みにしたものづくりを発信していきます。

• #デザイン
• #イベントレポート
• #企業カルチャー
• #デザイナー