Sketch + Zeplin から Figma に移行したら快適だった！！
デザインツールをSketch + ZeplinからFigmaに移行しました。
Figmaへの移行を迷われている方も多いのではないかと思い、「なぜ移行したのか、移行する際にどのような負担が発生したか、移行して何が良かったか」などをシェアしたいと思います。
移行したキッカケ
移行したキッカケは、とあるエンジニアに「Figma絶対にイイですよ！導入しましょう！！」と力強い意志をもってゴリ推しされましたw
その強い熱意が移行を検討するキッカケになりました。
とある大手EC事業者では、最近Figmaを全社導入した、というような話も聞いており、Figmaに注目が集まっていることは知っていました。
その後、実際にFigmaをつかって業務をしたことがあるPM/デザイナーの方にFigmaの使い勝手を聞きました。
すると、「めっちゃ使いやすいです」「Figma良すぎて、Sketchの使い方忘れつつあります」と言われたため、Figmaへの移行を行うことにしました。
移行の概要
<移行前>
・デザインツール
→Sketch + Zeplin
・デザインファイルの共有
→SketchファイルをSlackで共有
→複数人で編集する際はPageやArtboard単位で誰かがマージ
・エンジニアへの共有
→SketchファイルをプラグインでZeplinにアップロードして共有
<移行後>
・デザインツール
→Figma
・デザインファイルの共有
→Figmaでリアルタイムに共有
→複数人で同時編集
・エンジニアへの共有
→Figmaにviewerとしてアクセスしてもらう
移行時の負荷
FigmaはSketchファイルのインポートに対応しているため、インポート自体は直ぐに終わります。
しかしインポートの際に、文字の位置がずれたり、画像が一部バグったりしました。
ただ、我々hokanは2018/6/23にサービスをリリースしたばかりで、デザイン資産が少なかったため、修正作業も最小限で済みました。
もし、Sketchファイルで大量のデザイン資産をお持ちの会社ですと、移行が大変かと思います。
移行して良かったこと
移行して良かったことは大きく分けて3つあります。
1. 共有作業の削減
Figmaだと、共有のための作業を実施する必要がないため、SketchのデータをZeplinにアップロードする手間が減りました。
もちろんSketchからZeplinへのアップロードはプラグインを使うだけですが、塵も積もれば山となる、毎回アップロードしているとかなりの工数になります。
また、Zeplinでアイコンなどの画像を共有するときは、Sketch側でスライスを切っておく必要がありますが、Figmaだと不要になりました。
もし、画像が必要であれば、エンジニアがViewerとしてアクセスして、自分でダウンロードすれば済むようになりました。
また、Sketchでアートボードの名前を変更すると、Zeplinでは違う画面がつくられたと見なされてしまいます。
そのため、Zeplinで1つの画面が複数できてしまい、「どっちが最新？！」という混乱を招くこともありました。
Figmaではその混乱はなくなりましたし、混乱を防ぐために定期的にZeplinをキレイにする作業も不要になりました。
2. 同時編集、閲覧
ビジネス側、システム側合わせて10名ぐらいのメンバーが集まる会議を開くことがあります。
Figmaでは同時編集・同時閲覧ができ、更に同時に見ている人のカーソルの位置も共有されます。
そのため、各々のPCでデザインを確認しつつ、どこの話をしているのかをカーソルで指し示すことができます。
3. コメント付与
コメントも任意の場所に設定でき、デザイナーとエンジニアでコメントを共有することもできます。
デザイナーとエンジニアがリモートで電話会議をしながら、打ち合わせで詰めた内容をその場でコメントに残していく、というようなことも可能です。
移行して気になったこと
気になったことは大きく4つありましたが、そこまで気にならないためFigmaを継続しています。
----2019/09/02追記----
本記事は、2018/09/17にリリースしたのですが、それから1年が経ち、下記にあげるFigmaの問題のほとんどが解決しています。
Figmaのアップデートのスピードも魅力と言えるかもしれませんね！
1. 日本語フォントのテキストボックスの余白が変
SketchではAlignmentをAutoに設定すると、テキストボックス内の余白をキレイに削除することができます。
しかし、Figmaでは日本語フォントによっては余白がおかしくなります。。
下の画像はHiragino Sansのフォントを使った場合ですが、下の余白だけが大きく取られてしまっています。
Noto Sans CJK JPですとHiraginoの時よりはマシになりますが、SketchのAlignmentをAutoにしたときほどはキレイになりません。
この問題は解決不可のため、デザイナーとエンジニアがテキストの位置を話し合うことで解決しています。
2. メニューのプルダウンがズレる
----2019/09/02追記----
この問題は2019/09/02現在、Figmaのアップデートによって解消されています。
Google ChromeでFigmaを開くと、以下の画像のようにメニューバーの下三角マークが少しズレいます。
ピクセル単位で調整作業をしたりしている時に、このズレは気になりますw
このズレは、FigmaのDesktop版では発生しませんので、Desktop版を使うようにしたら気にならなくなりました。
3. pdf出力ができない
----2019/09/02追記----
この問題は2019/09/02現在、Figmaのアップデートによって解消されています。
Figmaではpng・jpg・svgの出力のみに対応しており、pdf出力ができません。
pdfファイルで出力される方は気になるようです。hokanにおいては、画像はpngで共有するので気になりませんでした。
4. Sketchアセット・プラグイン利用不可
----2019/09/02追記----
2019/09/02現在、以下のFigma公式サイトを筆頭に多くのアセットがWEB上に公開されています。
https://www.figma.com/resources/assets/
また、Figmaでもプラグインがつかえるようになっています。
https://www.figma.com/c
Sketchのアセットやプラグインは数多く提供されていますが、Figmaでは使えません。
例えば、hokanではサービスのUIが埋め込まれたスマホの画像をつくるときに、AngleというSketchプラグインを使っていました。
もちろんFigmaでは使えなくなりましたので、Sketchでプラグインをつくって画像をつくってから、Figmaにその画像をインポートするという一手間が必要になっています。
ただ、そこまで頻度も多くないため、あまり気になっていません。
移行の思わぬ効果w
Figmaには同時編集機能があるため、チームメンバーの誰がどのページを見ているか、どこにカーソルを置いているか、どのようにカーソルを動かしているか、等をリアルタイムに知ることができます。
そのため、作業中にデザイナーとエンジニアがばったり遭遇する時があります。
特に深夜に作業しているときに、たまたまFigma上で遭遇すると「お前もがんばってるな！」と妙な親近感を感じてテンションが上りますww
思わず、相手のカーソルのあるところで、カーソル動かしまくったりしてしまいますww
