Design
sketch
prototype
AdobeXD
figma

Sketch はもういらない? デザインツール Figma の紹介

TopImageFigma.png
(Figma:https://www.figma.com/

はじめに

いきなりですが、デザインツールのFigmaをご存知でしょうか。
Adobe XDが正式リリースされてから『Sketch vs Adobe XD』のような記事をネットやSNSでしばしば見かけますが、そういった議論ができる最先端のデザイナーでも、ご存知ない方もいらっしゃるかもしれません。試しにSketchとXD、そしてFigmaをGoogleトレンドで見てみました。

Googleトレンド.png

Sketchは別の意図もあるので純粋には比較できませんが、SketchとFigmaでは約25倍も開きがあります。これではアフィリエイターも紹介記事を書かないわけですね。
気になって知人に聞いてみたところ、初期フェーズではXD、UIフェーズでSketchのように使い分けたり、XDが成長してくれることを望みながら、またはInVision StudioがリリースされるまではSketchとInVision、Abstractを使うなど会社の規模やエンジニアとデザイナーの住み分け方などを判断軸にしているようでした。

しかし大したトレードオフはないのにも関わらず、ツールの議論が生まれるということは決定打がないとも言えそうです。そのような状況にあるからこそ本記事では、私なりの理想的デザインプロセスが実行でき、純粋にデザイナーが使いやすい点にフォーカスして、Figmaをご紹介したいと思います。

Figma とは

一言で表すならば、コラボレーション機能満載のSketch、です。ショートカットもなんとなく似ており、できることの違いはほぼありません。むしろ「Sketch + InVision(の一部)+ Abstract(の一部)」な印象です。
リリース初期にあった「どうやって使うの?」という意見をきちんと汲み取ってくれていてチュートリアル (youtube)ヘルプブログが充実してきています。

動作環境について

ブラウザベースなため、幅広い環境で同様に使えます。なんならChromeだけインストールすれば使えてしまいます。デスクトップ版もあります。

  • ブラウザ
  • Windows
  • Mac
  • Linux

値段について

小規模で使うなら編集、閲覧は無料です。
すべての機能を使うなら、編集者ごとに$15/月、年間払いなら$12/月になります。
買い切りのSketchと比較すると高い印象ですが、InVisionやAbstract(最低$9/月)の合算や、ツールを行き来する時間を鑑みればROIは高いと思います。念のため検討する際のURLを残しておきます。
Figma:https://www.figma.com/pricing
Sketch:https://www.sketchapp.com/pricing/
Abstract:https://www.goabstract.com/pricing/
Adobe XD:https://www.adobe.com/

コラボレーション

collaboration.gif

Figmaの設計思想を強烈に表しています。
Google スプレッドシートを想像してみてください。ShareされたURLにアクセスした瞬間、同時に確認&編集しながら作業ができます。おかげで進捗の確認、バージョン管理、イントラを使ったデータのやり取りはほぼなくなりました。これがデザインでも可能なのです。ガチガチの縦社会的組織なら常に監視されているようでいい気はしないでしょうが、そんな会社はやめてグロービスに入りましょう(Wantedlyやってます笑)

冗談はさておき、複数人でデザインを分担していても、全体の文脈を理解しながらデザインが可能です。ファイルを横断した結果、バージョンが崩壊した、なんてことは起きません。デザイナーなら、Abstractでコミットしたり、マージしてファイル管理する、何手かの手数が減ることが、どれほどの事かすぐ検討がつくでしょう。

コンフリクトなど存在しない美しい世界が構築できるのです。イマイチ体系化されていないためCo-デザイニングと仮称しますが、エンジニアさんのペアプログラミング同様に、複数人の力を掛け合わせた方がクリエイティビティは自然に高まるはずです。

CSS / iOS / Android のコード出力

CSS.gif

WEBデザイナーのみなさん、CSSはどうしてるでしょうか?
あいにく私はマークアップもやらない強気デザイナー(白目)なので、SketchをZeplinにあげて共有していました。

その程度ならFigmaにもできます。
しかもiOSとAndroidのコードもプルダウンから選択するだけで、同様に出力することが可能です。(当然全てではないのですが・・・)
iOSAndroid.gif

コンポーネント指向の優秀なエンジニアさんがいれば、デザイナーが糞コードを量産しなくてもいい時代になったということです。フルスタックデザイナーを求められる環境でない限り、必要最低限なコードはFigmaが出力してくれます。
無論書けるに越したことはありませんしご本人の生き方があるのですが、ただでさえデザイナーが少ない採れないと言ってる時代に、なぜ質&スピードともに劣るデザイナーがコードをいじってるのでしょうか?
すべてを網羅するというPhotoshop的な生存戦略でもない限り、あった方がいい機能はなかった方がいいだったこと、多くないですか?

そもそも、そんな暇があるならUX改善の1つや2つ考えて後述のプロトタイプを作るなり、数値には表れないインサイトからビジネスモデルを考えてエンジニアさんの仕事(雑務ではない)を増やす方が喜ばれる組織に身を置くべきだし、デザイナーとしての能力をフルに活かせるのではないかと思います。

プロトタイプ

prototype.gif

昨今のデザイン作業では動くプロトタイプは必須と言えるでしょう。(やっとsketchにも同等の機能がつきましたね)
できることが同じでもちょっとした導線設計や雰囲気の違いで、住み着くユーザが変わり彼らの文化が変わっていく。それらを口だけではなく、共感してもらうためには導線とインターフェイスを並行してブラッシュアップし、他の人に意見をもらうのが手っ取り早いです。

prototype2.gif

それらにおいてFigmaなら意識の分断なく、Prototypeボタンを押すだけでオブジェクトと画面をつなげ、気に食わないところを見つけたらすぐにUIの微調整に戻ることが可能です。
プロトタイプを表示してる時に誰かがアイコンをずらすと謎の移動が始まるくらいリアルタイムです。
Shareしたプロトタイプはアカウントがなくてもアクセスできます。直接コメントを残してもらいたい場合はアカウントを作ってもらいましょう。またiframeで埋め込めるので、仕様書をQiita:Team等でまとめている方におすすめです。

ただし、Fixedヘッダーやフローティングボタンなどレイヤー感あるプロトタイプやトランジションは作れないので、そういったものを表現するには別のツールを使う必要があります。どうしても、と言うならより強力なFramerを使ってください。なんとクリスマスまでに大きなアップデートを控えています。それでも足りないスーパーデザイナーさん、Kite CompositorかAffter Effectsでどうぞ。

コメント

Comment.gif

デザイナーを苦しめるコミュニケーションの1つに、修正依頼があります。指摘なのかコメントなのかポエムなのかわからないExcelとデザインを左右のディスプレイに表示しながら、精神と首の骨を消耗するひどい状況に悩むこともあるでしょう。

InVisionのコメントのようなやりかたですが、Figmaはデザイン中のモノのにもコメントを残せます。
もちろん、作ってるときに言われても困るので無視できるように、Commentボタンを押すと初めて吹き出しが表示される親切設計です。

コンポーネント

Instance.gif

SketchにはSymbolとOverrideによる強力なコンポーネント操作が可能です。アトミックデザインやデザインガイドライン作成で非常に重宝する機能です。公式がiOS UI Kit Elementsを出して、より話題になりましたね。

お察しの通りFigmaでもそれ、できます。
FigmaではOverrideのことをINSTANCEと呼びます。試しにコンポーネントとして作っていない色に変えたい? たとえINSTANCEを使用中でも変えられますし、任意のタイミングで戻せます。
より直感的にTHINK BY HANDSして議論しながらガイドラインを更新できます。
またTeam Librariesを使えば、別のファイルにコンポーネントを使えます。アップデートがあった場合は理由を書いて残しておけば、開いた人が適応するかどうか選択できます。デザインガイドラインファイルと、サービスのデザインファイルは分けられます。
InstanceChange.gif

ヒストリー

History.gif

チームメンバーが誤ってオブジェクトを消してしまった? 
視野の狭い謎の修正依頼のせいで昨日のデザインに戻したい?

Historyを使いましょう。コラボレーションしていると意図せず図形をずらしてしまったり、こだわりのアイコンを誰かが勝手にいじってしまったりするものです。過去の履歴に戻る以外にも別ファイルを作成することも可能です。(Historyに追加されるルールが謎ですので詳しい方教えてください。)
たしかにAbstractほどのファイル管理機能はありませんが、Figmaを使用中であれば本質的には、新しいブランチを作ることや、差分をマージする必要性もありません。Git管理がしたいわけではなく同時並列的な作業分担がしたいだけ、ということを思い出しましょう。

レスポンシブ?対応

Responsive.gif

STUDIOFramerにもある機能ですが、アートボード(画面サイズ)を変更した際にどこを固定して拡縮するか決められます。WEBほどの動的な設定はできないっぽいので、主にiOSやAndroidで使用するような機能ではありますが作るときに設定しておけば、ある程度の解像度変更、画面比率変更に対応できます。

新しいベクターツール

vector.gif

Illustratorのベクター操作を忘れてしまった人や、そんなもの最初から知らない人、どうしてもAdobe税を払いたくない人に朗報です。Figmaにはユニークなベクターツールが存在します。慣れたらAdobe Illustratorも不要になるかもしれません。本機能に関しては奥が深いので詳細は省きます。

おわりに

いかがでしょうか。従来のパーソナルなコンピュータに縛られた、閉鎖的な分業は終りを迎えています。他のデザイナーさんが具体的にどうやってデザインするかだって、勉強しながら開発ができるのです。ツールによってデザインが良くなることはありませんが、Figmaからはチームの力を最大化したいという願いを感じます。

一方でデザインツールとしてのFigmaは発展途上だと思います。日本人ユーザが少なく教わることができない、サードパーティ製のプラグインがない、実績としてFigmaの良さが伝わってこないなどまだまだ懸念点もありますが、これを機会に何らかのプロジェクトで、ご使用いただく一つの選択肢になれば幸いです。なんなら一緒に使いましょう!

おまけ

本記事用に作ったグロービス学び放題 のパクリサービスをシェアしておきます。
もしよければコメントでデザインレビューしちゃってくださいな:heart:
GLOBIS manahoプロトタイプ