見出し画像

Figmaで捗る！デザインプロセスとチーム開発

hrtk441

こんにちは、株式会社トクバイでデザイナーをしている吉井(@hrtk441)と申します。
普段は全国のチラシ情報をお届けする「トクバイ」のアプリ/WEBのサービスデザインのお仕事をしています。

最近noteでもFigma関連の記事がバンバン出てきますね。
これを読んでいる方のなかには、またかよと思っておられたり、Figmaってそんなにいいの？SketchとかXDでいいじゃん…と感じられている方がいらっしゃるかもしれません。

何を隠そう、ちょっと前までの僕自身もその一人で

・Sketchに過去運用してきた資産がいっぱいある
・どんどん増えるデザインツール・プロトタイプツールに対するためらいと謎の様子見感
・Figmaの売りの一つが共同編集なのは知っているが、日常業務でそれをするシーンがあまり思いつかない

などなど、いくつかの紹介記事には以前から目を通していたものの、正直積極的にFigmaを使うメリットやイメージをあまり具体的に持てていませんでした。

そんな折、トクバイではデザイン業務改善の一貫でチームメンバーの提案からFigmaを使い始めてみたのですが、今ではその有用さに感動するあまり、早いとこFigmaの国内シェアが伸びてほしいという思いにすら駆られています。

◆ 2018年のデザインツール利用調査(世界/国内)
※出典:  http://uxtools.co/survey-2018
(今年はもっと伸びてほしい...)

そこで今日は機能の紹介や個別のTipsというより、弊社で導入しているデザインプロセスや、開発チーム観点でFigmaに移行して捗っていると感じる点をいくつかご紹介したいと思います。

まだ本格導入して間もなくもあるのですが、チームでの導入を考えている、徐々に導入し始めている皆さんの何かの参考になれば幸いです。
※こちらの坪田さんの記事も参考にさせていただきました

・Figmaを使って開発チームの生産性をあげるプロダクトマネジメント
https://blog.tsubotax.com/n/n58b33cceee9e?magazine_key=m0c9f372ae915

デザイナーのコミュニケーションが捗る

トクバイではデザイナーが全員で、自社プロダクトが向かう状態やデザインのアップデートについて確認する、という目的のもと各担当案件の進捗共有を行うようにしています。
これまでは互いのデザインを見せ合うとき、GitHub IssuesやInVisionを参照する、自分のSketchの画面を直接見せる、それをMTG等で大きなプロジェクタに投影するetc…などの方法で共有を行っていました。

しかし、この方法だとどうしてもレビュワーはレビュイーから提示されている限定的な領域しか見ることができません。
そのため局所的な理解に留まってしまうことも多々あり、本質的な議論の手前の質疑やコミュニケーションが増えてしまうなど、やりにくさも感じることもちょくちょくありました。

そこでもっとうまい方法ないかな〜と思っていたところに、ちょうど重なったのがFigmaへの移行です。各々のFigma上のファイルを共有するだけで、全員が同じデザインデータにリアルタイムにアクセスできるようになりました。

その効用として、

・施策の全体像としてどういうデザインを検討しているか
・変更が及ぼしそうな範囲を考慮できているか
・他にどういうデザインパターンを検討したか
・行き詰まっているところがどのあたりか
・細かいところでいけば利用コンポーネントなどファイルの構成

これらの透明性や理解度、共有のしやすさがグンとあがったなと感じています。

名前の通り「共同編集」として使わなくとも、「共同で(編集が可能な)デザインファイルを閲覧できる」ことによるメリットは予想より遥かに大きいです(個人的感覚)。これにより従来に比べて、デザイナー間のコミュニケーションがかなり進めやすくなりました。

また共同編集的な側面で言えば、「こ、ここの数pxが気になる…！」のような細かすぎて躊躇しがちな指摘・やり取りについても、お互いの「ちょっと調整していいですか」「やっておきますね」の一言で即座に解決します。
細部のこだわりも品質を上げていくために重要なポイントだとは思いつつ、ややもすると疲弊するようなやり取りをグッと減らせるのも、捗っているポイントのひとつです。

なお過去の状態に遡りたい場合にも、個人的には今のところFigmaのHistory機能で必要十分だなと感じています。トクバイが比較的スモールチームというのもあるかもしれませんが、正直Abstractのようにブランチを切って作業するほどのニーズは特段発生していません。

デザイナー同士の分業も捗る

もうひとつ、デザインの分業においてもFigmaを活用しています。
トクバイにはデザイナーアシスタントとして、週3〜4程度、学生一名にアルバイトに来てもらっています。
そのような導入間もなかったり、経験の少ないメンバーに普段のサービス開発業務のサイクルに入ってもらうに当たって、

1. ラフなイメージを手書きで描く(メインデザイナー)
2. Figmaでデータ化 & 派生パターンの検討など(アシスタント)
3. 2についてFigmaを見ながらフィードバック・デザイン調整(アシスタント + メインデザイナー)
4. 最終ブラッシュアップ(メインデザイナー)

上記のようなワークフローを最近導入してみました。(内容的には少し前に上がっていたペアデザイン革命に近いところかもしれません)

このようにいきなり一人にまるっと任せるには少し荷が重かったり、作業プロセスを分担したいようなタスクも、Figmaなら効率的に業務分担することが可能です。
まだ実際に試行してみた回数は多くないものの、複数人で一つのファイルを見ながらデザインを共創していける便利さ、効率性の高いデザインプロセスとしての手応えも感じ始めています。

エンジニアとのコミュニケーションが捗る

作業プロセスを公開できる、ということはエンジニアとのコミュニケーションにも有用です。
社内の事例でいくと、デザインは作業途中であっても大枠の骨子さえできていれば

ざっくり今のFigmaの感じで実装してみます〜

という会話も生まれたりしていて、デザインが決まらないとエンジニアの手が動かせない、といったプレッシャーからも多少解放されて地味に助かっています。(勿論エンジニアさんの理解があってこそ、とも言えます)

逆に言えば複雑な機能においては、デザインやプロトタイプを事前にガチガチに固めておくのもあまり効率的とは言えません。
動作するものを見てみたら「思ってたのと違う」であったり「この箇所は少し練り直したほうがいい」という理由でデザインを変更することも往々にしてあるからです。

Figmaの途中経過でざっくり実装 → 検証 → 口頭レベルで修正 → 検証... → 最後にまたFigmaで細かいデザイン調整

不確実性が高いサービス開発において、上記のように細かなイテレーションを重ねるのにもFigmaが便利で助かっています。

また同時にこれまでありがちだった「もうデザインってZeplinにあがってますか？」というエンジニアの無駄な待ち時間もなくなるので、そのあたりもFigmaがデザイナー、エンジニア双方をストレスフリーにしてくれているところだと感じます。

開発チーム全体でのコミュニケーションが捗る

他の多くの記事でも述べられている通り、Figmaはデザインプロセスをこれまで以上にオープンにします。
前述のデザイナー間の項でも少し触れましたが、共有のためにいちいち範囲を気にしながらキャプチャを撮りまくったり、複数のプロトタイプを作成する必要がありません。
トクバイではFigmaの作業ファイル上にいくつかのデザインパターンを残しておくことで、「これは確かにあまり良くないね」や「この良い部分をこっちに取り入れたら？」などを周囲の開発メンバーとも会話しつつ、多くの意見を取り入れたうえでデザインをアップデートしていっています。

またコメント機能を使った非同期的なコミュニケーションも併用するのもオススメです。社内でもFigmaにつけられたコメントは専用のSlackチャンネルに流すようにしていて、デザインの議論について会話のやり取りを増やし、また後からでもそれが振り返りやすい状態を作っています。

まとめ

ここまでFigmaを結構ヨイショしてきましたが、他の記事にかかれているような不具合や、あ〜それできないのか〜というところもあるのも事実です。
ただ、個人的にはそのあたりを差し置いてもSketchからFigmaに移行する価値は大きい(不具合は今後のアップデートに期待...)と思っており、何ならもっと早くから使っておけば良かったとさえ感じています。

これまでのデザインツールは、例えるならデザイナーだけの閉じられた世界でした。しかしFigmaの導入により、デザイン資産はますますデザイナーだけのものではなくなってきています。実際にトクバイでもディレクターがComponentを使ってデザインモックを作るという事例も出始めており、会社全体のデザインレベルや、デザインの透明性を上げるものとして、Figmaをこれからも活用していきたい気持ちです。

そして冒頭にも書きましたが、国内のFigmaシェアも今後もっともっと上がっていって欲しい(そして日本のサポート手厚くしてほしい…)ので、この記事もFigmaを使い始めてみようかな、と思ってもらえる一助になればいいなと思います。
また既に導入されているところについては、Figmaが大小さまざまなチーム規模感でどのように取り入れられているか興味があるので、ぜひ教えていただけると嬉しいです。

最後に

トクバイではともに毎日の買い物をかしこく、楽しくしていけるデザイナーを募集しています。
少しでも興味を持っていただけた方、ちょっと話を聞いてみたい、情報交換したい〜ぐらいでも構いません。是非こちらからお気軽にご連絡ください。

いいなと思ったら応援しよう！