SketchからFigmaへデザインデータを移行する方法

弊社セブンデックスでは、デザインツールをSketchからFigmaへ移行するプロジェクトを行いました。

それに伴い、私が担当している2年以上の継続案件で、ずっとSketchで管理してきたデザインデータをfigmaへ移行することに。新機能の発表やプラン変更などで、今後は本格的にFigmaで運用していくチームも増るのではないでしょうか？

そこで、Figma移行の流れや、Figma運用でつまづきやすいSketchとの違いをまとめたので、今後Figmaを使い始める方の参考になればと思います！

なぜFigmaへ移行したのか？
いざデザインデータを引越し！
Figma運用でつまづきやすいSketchとの違い
さいご

なぜFigmaへ移行したのか？

①学習コストの低減

今までのセブンデックスは主にSketch（複数のデザイナーで管理する場合はAbstractも）を使っていて、案件によってはFigmaを使うこともありました。
使用しているデザインツールが複数ある場合、デザイナーやデザインを確認する人の学習コストが発生してしまいます。

学習コストを減らし、作業の効率化をするため、デザインツールをFigmaに統一しました。

②デザインデータのファインダビリティ担保

デザインデータがバラバラだと、最新データの場所がGoogle DriveなのかAbstractなのか、アサインされていた人しかわからないという状態になってしまいます。

Figmaで制作したものだけでなく、Figma以外で制作したものもチーム内にファイルを作成し、そこに格納場所をリンクさせておくなどの対応をすることで、全てのデザインデータをFigmaのチーム内に格納し、誰でも最新データに辿り着けるようにしました。

③フィードバック方法の統一

デザインデータのファインダビリティ担保同様、デザインに対するフィードバックも全てFigma上で管理することで、FIXしたデザインがどういった文脈で着地したのかなど、後から振り返りやすくなりました。

いざデザインデータを引越し！

データを移行する際の流れは、大きく分けて4つのステップで行いました。

SketchデータをFigmaへエクスポート
テキスト/カラースタイルを作成
コンポーネントを改修
データの崩れを修正

データのインポートはSketchファイルをそのままFigmaへドラッグ&ドロップで簡単にできます。
（今回はAbstractで管理していたので、一度複製し、PC版Googleドライブに保存してからインポートしました。）

しかし、開いてみるとかなりデータが崩れていました…

崩れの原因として、今回確認できたものはこちら↓
・テキスト崩れ
・グループ（一部グループでなくフレームになってしまう）

そして、残念ながらデータが保持されていなかったものがこちら↓
・スマートレイアウト
・アピアランス
・カラーバリアブル

運用していく上でこの3つは必要不可欠なものです。
なので、まずはテキスト・カラーのスタイルとコンポーネントを全て作り直すことから取り掛かりました。

そして、それらをデザインに適用しながらデータの崩れを直していきました。
プロジェクト進行中の場合は、画面に優先順位をつけて順次対応すると良いと思います！

Figma運用でつまづきやすいSketchとの違い

移行の流れについてサラッと書きましたが、FigmaとSketchでは機能や名称が異なる点も多く、地味に大変な作業でした。

データを整えていくうえで必要なFigmaとSketchの違いをを3つ解説します。

Figma:Frame vs Sketch:Artboard

Sketchのアートボードに当たるものが、Figmaではフレームと呼ばれます。フレーム作成のショートカットキーはアートボードと同じく「A」でできます！
一見同じものですが、フレームは単なるアートボードではなく、より強力なグループという認識です。
フレーム内で複数のレイアウトグリッドを組んだり、フレーム同士でネスト（入れ子）することができます。

Figma:Components vs Sketch:Symbol

Sketchのシンボルに当たるものが、Figmaではコンポーネント、コンポーネントをコピーしたものはインスタンスと呼ばれます。
また、インスタンスはカラーやテキストを変更することができ、シンボルよりもかなり自由度が高いです。
インスタンスをいじりすぎるとコンポーネントの役割が曖昧になってしまうので、どこまで変えて良いか、チーム内でちゃんとルールを決めた方が良さそうです。