Sketch + Zeplin から Figma に移行したら快適だった!!

株式会社hokan 代表取締役の尾花政篤(@ShigeObana)と申します。現在は保険業界特化型のSaaS、hokan®を開発しています。

hokanではデザインツールとしてSketch + Zeplin を使っていましたが、Figmaに移行しました。
Figmaへの移行を迷われている方も多いのではないかと思い、「なぜ移行したのか、移行する際にどのような負担が発生したか、移行して何が良かったか」などをシェアしたいと思います。


移行したキッカケ

hokanには最新のツールに関心があるメンバーが多いです。
その中で、とあるエンジニアに「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にアップロードする手間が減りました。
もちろんプラグインを使うだけですが、塵も積もれば山となる、毎回アップロードしなくてよいのは助かります。

また、Zeplinでアイコンなどの画像を共有するときは、Sketch側でスライスを切っておく必要がありますが、Figmaだと不要になりました。
もし、画像が必要であれば、エンジニア側で勝手にダウンロードすれば済むようになりました。

また、Sketchでアートボードの名前を変更すると、以下の画像のようにZeplinでは違う画面がつくられたと見なされてしまいます。

そのため、Zeplinで1つの画面が複数できてしまい、「どっちが最新?!」という混乱を招くこともありました。
Figmaではその混乱はなくなりましたし、混乱を防ぐために定期的にZeplinをキレイにする作業も不要になりました。


2. 同時編集、閲覧
ビジネス側、システム側合わせて10名ぐらいのメンバーが集まる会議を開くことがあります。
Figmaでは同時編集・同時閲覧ができ、更に同時に見ている人のカーソルの位置も共有されます。
そのため、各々のPCでデザインを確認しつつ、カーソルを見ながらどこの話をしているのかを指し示すことができます。


3. コメント付与
コメントも任意の場所に設定できます。
デザイナーとエンジニアでコメントを共有することができます。
デザイナーとエンジニアがリモートで電話会議をしながら、打ち合わせで詰めた内容をその場でコメントに残していく、というようなことも可能です。


移行して気になったこと

気になったことは大きく4つありました。
しかし、hokanではそこまで気にならないことなので、Figmaを継続しています。

1. 日本語フォントのテキストボックスの余白が変
SketchではAlignmentをAutoに設定すると、テキストボックス内の余白をキレイに削除することができます。

しかし、Figmaでは日本語フォントによっては余白がおかしくなります。。
下の画像はHiragino Sansのフォントを使った場合ですが、下の余白だけが大きく取られてしまっています。

Noto Sans CJK JPですとHiraginoの時よりはマシになりますが、SketchのAlignmentをAutoにしたときほどはキレイになりません。

この問題は解決不可のため、デザイナーとエンジニアがテキストの位置を話し合うことで解決しています。


2. メニューのプルダウンがズレる
Google ChromeでFigmaを開くと、以下の画像のようにメニューバーの下三角マークが少しズレいます。

ピクセル単位で調整作業をしたりしている時に、このズレは気になりますw
このズレは、FigmaのDesktop版では発生しませんので、Desktop版を使うようにしたら気にならなくなりました。


3. pdf出力ができない
Figmaではpng・jpg・svgの出力のみに対応しており、pdf出力ができません。

pdfファイルで出力される方は気になるようです。hokanにおいては、画像はpngで共有するので気になりませんでした。


4. Sketchアセット・プラグイン利用不可
Sketchのアセットやプラグインは数多く提供されていますが、Figmaでは使えません
例えば、hokanではサービスのUIが埋め込まれたスマホの画像をつくるときに、AngleというSketchプラグインを使っていました。
もちろんFigmaでは使えなくなりましたので、Sketchでプラグインをつくって画像をつくってから、Figmaにその画像をインポートするという一手間が必要になっています。
ただ、そこまで頻度も多くないため、あまり気になっていません。


移行の思わぬ効果w

Figmaには同時編集機能があるため、チームメンバーの誰がどのページを見ているか、どこにカーソルを置いているか、どのようにカーソルを動かしているか、等をリアルタイムに知ることができます。

そのため、作業中にデザイナーとエンジニアがばったり遭遇する時があります。
特に深夜に作業しているときに、たまたまFigma上で遭遇すると「お前もがんばってるな!」と妙な親近感を感じてテンションが上りますww

思わず、相手のカーソルのあるところで、カーソル動かしまくったりしてしまいますww


最後に

さて、Figmaを導入したりと、チャレンジをしているhokanですが、実はデザイナーがおりません。。(上記文中のデザイナーはPMが兼ねています)

これから、メインプロダクトであるhokan™の機能拡張はもちろんのこと、保険会社や保険事業を運営する事業会社との提携プロジェクトが走り始めます。

そんな中で、デザインの力で保険業界をアップデートしていただけるデザイナーを探しております!

ご興味持っていただけた方は、こちら↑から、お気軽にご連絡いただけるとありがたいです。


Twitterのフォローもぜひお願いします! Twitter:尾花政篤

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

ありがとうございます!もっと良い記事書けるよう、がんばります!
78

Masashige Obana

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
5つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。