fujiken design blog

でざいんをやっていく

開発スピードを上げるため、Sketchを辞めてFigmaに移行した話

UI デザインツール

f:id:kenshir0f:20180713002356p:plain

こんにちは、ふじけん (@kenshir0f) です。
普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。

業務ではSketchを使ってアプリのUIを組んでいるのですが、 先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。
Figmaに乗り換えるに至った経緯やプロコンなど、ざっくりまとめてみます。  

なぜsketchから乗り換えたのか

今まで他の人と共同で同じsketchデータを作業することがなかったのですが、メンバーが増えてからはabstractで共同で作業していました。
ライブラリを分けたりbranchを切ったりしながらデザインを行っていたのですが、しばらく経つと不満点がいくつか見えてきます。

  • 影響範囲がでかいライブラリを更新するとコンフリクトしやすい
  • branchを切って作業してマージするなどスピードが遅くなりやすい
  • デザイナーにbranchの概念を説明するところから始まるので理解が難しい
  • sketchをもっていない人がデザインデータを見れない

特にデザイナーが増えてくるとデザインスピードが落ちる傾向にあって、これはチームとして良くないためなんとかしたいなー。。。なんて思っているときに見つけたのがFigmaです。
いまのところ開発の中で一番スピードを出せるデザインツールだと感じています。

Figmaに決めた理由

Figmaはweb上でデザインデータを作成することが出来るサービスです。
google docs や spread sheetみたいに共同で編集できるイメージですね。

基本的なことはSketchと同じですが、Figmaならではの圧倒的に強い点がありました。

  1. 同期的に作業ができる
  2. webから(招待すれば)誰でもデザインデータを見れる
  3. 誰でもコメントを付けられる
  4. 相手の作業状況やマウスカーソルを視認できる
  5. sketchのデータをそのままインポートできる

特に 1. 同期的に作業ができる が優れていて、
一つのデザインデータを全員で同時に作業できるため、誰かのデザインデータのアップロードを待つ必要がありません。
また 5. sketchのデータをそのままインポートできる が文字通りライブラリや継承されているsymbolなどのデータをそのままインポートすることができます。

しばらく使ってみて致命的な問題はなかったどころか、sketchにはない機能で前よりも作業スピードが早くなったのを実感したので、そのままFigmaに移行完了しました。  

移行するときに注意したこと

Figmaは業界で標準的なsketchと比べて比較的新しいサービスなため、いくつか懸念点を考慮した上で移行しました。
移行するときに判断基準とした項目はこちら。

  1. 今よりもチームとしてスピードを出してデザイン出来ること
  2. 僕が突然いなくなっても誰かが運用できること
  3. コストがかかりすぎない
  4. 数年後にデザインデータを移行できること

1, 2, 3は触っているうちにクリアになりました。
ただ4に関しては不安が残ります。というのも、Figmaがサービスを停止した場合はデザインデータがまるっと消えてしまうためです。また新たに使いやすいデザインツールが出たときに移行できるか、という点でも疑念が残ります。
しかし、sketchもデザインデータをエクスポートする機能はないにも関わらず丸っと移行することができたので、先のことを意識しすぎて現状を放置するよりも改善して先に進むことにしました。

実際に開発スピードが上がったと感じるところ

  • エンジニアがデザインデータを直接見て、マージンやフォントサイズなどを確認できる
  • デザイナーはデザインデータの持ち方を気にせず、デザインに集中できる
  • ディレクターがデザインデータに気になった箇所や仕様に関する疑問を直接コメントできる
  • デザインの変更がリアルタイムで変わるので、コミュニケーションの待ち時間が発生しない
  • プロジェクト、ファイルごとに細かくデザインデータを分割できるためAtomicDesignと相性がよい && デザインデータを管理しやすい
  • ライブラリの参照データを選択して見れるため、コンポーネントを選びやすい

Figmaのまだまだな点

  • 英字フォントだと日本語が表示されない
  • プロジェクト(ファイル)をまたいでコンポーネントをコピーできない(うまくやらないと再設定がしんどい)
  • プラグインがない
  • レイヤーでの操作がたまにこちらの期待している動作をしないことがある(sketchに慣れているせいもある)

特に英字フォントだと日本語が表示されないはiOSの場合辛くて、SF Pro Textで日本語が打てないためHiragino Kaku Gothic Stdにして英数字もそれで許容する、みたいなことしないといけません。
合成フォントで解決するか、英数字だけの部分はSF Pro使うなど解決方法はいくつかありますが、僕はしばらく様子見でアップデートに期待ということにしました。
本当に辛くなったら合成フォントでカバーします。

移行した感想

実は最初、Figmaに移るつもりは全くありませんでした。
sketchに慣れていましたし、Figmaに移行するコストもでかいし、、、みたいに思っていたのですが、「あれ、考えが保守的になってるのでは？？新しい技術を採用してスピードを上げ、成長する機会を無意識に失ってないか？」など冷静に振り返ってみて、メリット・デメリットを洗い出したあとに移行の決断をしました。

安全地帯から飛び出てトライするのは、やはり勇気がいることだと思います。
今回は大胆に挑戦してよかったと思っていますが、運用でなにか知見を得られたらまたブログにまとめてみます。

ではでは👋