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

※本noteはQiitaの記事をデザイナー向けに編集した転載です。
https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d
(QiitaではGIFをつけていますのでGIFだけそっちで見てください。)

はじめに

デザイナーのみなさん、わりと海外では話題(のはず)のFigmaをご存知でしょうか。昨日チームメンバーにnoteで紹介している人がいるよと共有されて『 Figmaというデザインツールがすごい 』を拝読し、嬉しくなりました。
noteで検索してもフィギュアばかりで上記以外ぱっと見当たりません。

Adobe XDが正式リリースされてから『 比べてわかったSketchとAdobe XDの違い 最高のUIデザインツールはどっち? 』や『 XD vs Sketch みたいな比較は意味がない理由 』のような良記事をネットやSNSでしばしば見かけますが、Figmaはデザインツールまとめにも、プロトタイプツールまとめにもあまり顔を出しません。試しにSketchとXD、そしてFigmaをGoogleトレンドで見てみました。

Sketchは別の意図もあるので純粋には比較できませんが、SketchとFigmaでは約25倍も開きがあります。これではアフィリエイターも紹介記事を書かないわけですね。そのような状況にあるからこそ本記事では、数多くのツールの1つとして、なぜ使っているか、どの機能を使っているかという点にフォーカスして、Figmaをご紹介したいと思います。


Figma とは

一言で表すならば、コラボレーション機能満載のSketch です。むしろ「Sketch + InVision(の一部)+ Abstract(の一部)」な印象です。リリース初期にあった「どうやって使うの?」という意見をきちんと汲み取ってくれていてチュートリアル (youtube) や ヘルプ 、ブログ が充実してきています。
余談になりますが、FigmaブログにてGoogleやTwitter、Airbnbなどの著名なデザイナーに2018年のトレンドを聞いているため、これから積極的にアップデートがされるでしょう。(Figmaユーザなら言ってる事は規模の大小はあれど、やろうとしてるか出来てるかもしれませんね)

動作環境について
劣悪な環境で虐げられているインハウスデザイナーの方、朗報です。
SketchのようにMacだけではなく、Windowsでも使えます
Googleアカウントさえあれば、どの端末でもアクセスしやすいのもメリットかもしれません。(退勤後の自宅勤務はバレるのでやめましょう笑)
なお毎回ではないのですがWEBだと初期ロードがめちゃくちゃ長い時があります。そんなときはインジケータを無視してリロードすると表示されることがあります。宗教上の理由がなければデスクトップアプリを使うと幸せになります。

値段について
小規模で使うなら編集、閲覧は無料です。
すべての機能を使うなら、編集者ごとに$15/月、年間払いなら$12/月になります。買い切りのSketchと比較すると高い印象ですが、InVisionやAbstract(最低$9/月)の合算や、ツールを行き来する時間を鑑みれば費用対効果は高いと思います。

Figma:https://www.figma.com/pricing
Sketch:https://www.sketchapp.com/pricing/
Abstract:https://www.goabstract.com/pricing/
Adobe XD:https://www.adobe.com/


コラボレーション

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

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

コンフリクトなど存在しない美しい世界が構築できるのです。
ペアデザ/モブデザ(と呼ばれているらしい)のnoteでもあるように、複数人の力を掛け合わせた方がクリエイティビティは自然に高まるはずです。でかいディスプレイがなくても同時に編集できるのですから、首が痛くならなくていいですね。


CSS / iOS / Android のコード出力

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

その程度ならFigmaにもできます。
しかもiOSとAndroidのコードもプルダウンから選択するだけで、同様に出力することが可能です。(当然全てではないのですが・・・)データドリブンUI/UXデザイナーさんも多少使えるのではないでしょうか。

ちょっとエモくなりますが、そもそもコンポーネント指向の優秀なエンジニアさんがいれば、デザイナーが糞コードを量産しなくても仕事は終わります。某fやGで始まるようなスーパーデザイナーの集まりでない限り、プロダクトオーナーやスクラムマスターとの密なコミュニケーションをした上で共同作業や調整役をしたほうが建設的だと思います。というかデザイナーが思っているよりエンジニアリングは広大です。とがる方向合ってますか?笑
無論書けるに越したことはありませんし、ご本人の生き方があるのですが、ただでさえデザイナーが少ない採れないと言ってる時代です。優秀なデザイナーさんにはKPIを設定しそこに目指して動くのではなく、KPIそのものを考え、再設定しながら解決できる手段を探すナラティブなデザインをしていただきたい。
なぜならKPI達成が前提の分析的デザインは、ユーザビリティやCVRの改善など最善の方法論が存在する(数値で測れる)場合非常に役立つでしょう。しかし多くのアプリ/WEBデザインが収束しつつあるように、それらにデザイナーが貢献できることはガワのグラフィック調整か、ちょっとしたインタクションの再設定です。
対して個人の感覚の総体である価値の創造や新しいビジネス領域の構築という数値化が難しいものに、イノベーションを起こす確実な方法論は存在しません。

だからこそ既存の目標や常識自体を疑い、正しさの方向性と解決策をセットで提供し続け、検証の結果ピボットする。そうしたことにGRITを持つことが、クリエイティブなのではないでしょうか。


プロトタイプ

プロトタイプツールはとても進化してきました。(やっとSketchにもプラグインを使用しなくてもよくなりましたね)日本では2強だったInVisonとPrott以外にもMarvelCanvasFlipFramerOrigami Studio・・・挙げればキリがないくらいのツールが出てきています。

Figmaでも遷移をつけることが出来ますが、おもしろいのはプロトタイプを表示してる時に誰かがアイコンをずらすと謎の移動が始まるくらいリアルタイムなことです。
通常の遷移型プロトタイプツールはオブジェクトと画面をつなげ、プロトタイプを表示し、気に食わないところを見つけたらUIの微調整をして同期、またはpngの差し替えを繰り返しますが、Figmaはプロトタイプを作りながら拡縮や位置の変更など、ある程度のUIの編集は出来るため、遷移を確認中に誰かにお願いして、ボタンの位置やサイズを変更できます。(1人でもタブわけられます笑)

ただし、Fixedヘッダーやフローティングボタンなどレイヤー感あるプロトタイプやトランジションは作れないので、そういったものを表現するには別のツールを使う必要があります。


コメント

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

InVisionのコメントのようなやりかたですが、Figmaは作業中のモノのにもコメントを残せます。
もちろん、作ってるときに言われても困るので無視できるように、Commentボタンを押すと初めて吹き出しが表示される親切設計です。これらはプロトタイプで遷移を確認してる時でも使えますので、デザイナーがこういうことですか?とその場でUIを調整、プロダクトオーナーが喋っているときにスクラムマスターが別のコメントを入れておく・・・と言ったような共同作業も可能です。
また差分をエンジニアさんに伝えるときも重宝します。彼らからしてみれば、デザイン変更とは難易度が高い間違い探しでしょうから、変更点を伝えるためにコメントを残しておくと良いでしょう。


コンポーネント

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

お察しの通りFigmaでもそれ、できます。
FigmaではOverrideのことをINSTANCEと呼びます。試しにコンポーネントとして作っていない色に変えたい? たとえINSTANCEを使用中でも変えられますし、任意のタイミングで戻せます。
より直感的にTHINK BY HANDSして議論しながらガイドラインを更新できます。

またTeam Librariesを使えば、別のファイルにコンポーネントを使えます。アップデートがあった場合は理由を書いて残しておけば、開いた人が適応するかどうか選択できます。デザインガイドラインファイルと、サービスのデザインファイルは分けられます。


ヒストリー

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

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

一方で差分が出せないのが本機能の残念ポイントです。


レスポンシブ?対応

※画像では伝わらないのでQiitaのGIFを見てくださいmm

STUDIOやFramerにもある機能ですが、アートボード(画面サイズ)を変更した際にどこを固定して拡縮するか決められます。WEBほどの動的な設定はできないっぽいので、主にiOSやAndroidのアプリを2種作る際のオートレイアウトのように解像度変更、画面比率変更に対応できます。またカードデザインやタイルを作るときもイチイチ隙間の調整をしなくて済むので楽です。


新しいベクターツール

※画像では伝わらないのでQiitaのGIFを見てくださいmm

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


おわりに

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

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

おまけ

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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます!
101

hikarutayama

Figmaのまとめ

デザインツール Figma に関してのまとめマガジンです。
3つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。