SketchからFigmaへ移行してみた話

現在関わっている業務ではデザインツールとしてをSketchが使われていましたが、諸事情によりFigmaに移行する必要が出てきたので、SketchデータをFigmaにインポートする方法とFigmaを使ってみて良いと思った機能の一部をご紹介したいと思います。

尚、本記事は、すでにSketchを使ったことがある人で今後Figmaへ移行する予定のある人、もしくはFigmaをこれから使ってみようと思っている人向けの記事となります。

Sketchで作成したファイルをFigmaに取り込む方法

SketchファイルをFigmaにインポートすること自体はとても簡単です。
手順は以下の通り。

1 . Figmaを起動
2 . 「ファイルをインポート」をクリック

3 . インポート対象のSketchファイルを選択

以上でSketchで作成したファイルをFigmaに取り込むことができます。

取り込み自体は簡単ですが、Sketchファイルの作り方によってはインポート後に調整が必要になってくるケースがありますので、実際に遭遇した問題と解決方法について解説したいと思います。

取り込み後の問題点

サムネイルが正常に表示されない

インポートしたファイルを見てください。なにやら状況が思わしくありません。。。
今回のケースでは文字が表示されていないのが問題となります。

早速、クリックして取り込んだデータを確認してみましょう。

ホーム画面のサムネイルが正常に表示されないのは指定フォントが存在しないことが原因でした。

代替フォントの適用

こちらはSketchで作成していた際に指定フォントがインポート先のPCに存在しない、または名称が違うため発生する物なので、代わりのフォントを指定しましょう。

これでテキスト部分が表示される様になったかと思います。

サムネイルも問題なく表示されました。

取り込み後に気がついたこと

スライスの表示について

画像の書き出し設定を行う「スライス」機能について、Figmaではスライス設定の表示がデフォルトで「有効」になっているため、スライス設定がされているSketchファイルをFigmaにインポートすると以下の様に表示されます。赤線で囲った部分にグレーの点線が描画されているのがスライス設定している領域になります。

Sketchではこの様な描画がされていないので一瞬戸惑ってしまいましたが、レイアウトによっては見難いことがあるのでその場合はメニュー「表示 > スライスの表示」のチェックを外しましょう。

これですっきりしました！

コンポーネントについて

再利用できるデザイン要素を効率的に管理する機能としてコンポーネントがあります。
Sketchでは「シンボル」として設定していたコンポーネントですが、インポート後のFigmaでもしっかりとコンポーネントとして引き継がれています。またSketchにはシンボル名に「半角スラッシュ（/）」を入れることで階層表現することができるのですが、Figmaにインポート後も問題なく引き継がれています。

以下はボタンのコンポーネントの定義になります。

ボタンの階層化例

btn/                         ボタン
 └ large/                    ラージサイズ
    ├ primary                プライマリーボタン
    └ secondary              セカンダリーボタン

例えばサインアップボタンで使用しているコンポーネントprimaryをsecondaryに変更してみましょう。

すると以下の様にテキストは「サインアップ」と保持されたまま外観だけ変更されました。

Figmaの便利な機能 Variants（バリアント）について

Figmaにはさらにコンポーネントを効率よく管理する Variants（バリアント） という機能があります。
Variantsを使用しない場合では、上記でも説明した様に複数のコンポーネントを階層表現で管理しているため、コンポーネントの外観の切り替えは上位階層から順に下位階層まで選択することになりますが、Variantsを使用すると複数のコンポーネントを一つにまとめることでき、属性（プロパティ）を定義することでダイレクトに外観を切り替えることができます。

例えば以下の種類があったとします。

ボタンの階層化例

btn/                         ボタン
 ├ type/                     種類
 │  ├ primary               プライマリーボタン
 │  └ secondary             セカンダリーボタン
 └ state/                    状態
    ├ basic                  通常
    ├ push                   押下
    └ disable                非活性

全てのボタンパターンを作成して、全てを選択、右側の「バリアントとして結合」をクリックします。

するとプロパティパネルが表示されます。ボタンの階層の深さに応じてプロパティが設定されますので、ダブルクリックするとプロパティ名を変更することができます。

ボタンの階層化例に従い、プロパティ1を「種類」、プロパティ2を「状態」にしてみます。

それでは作成したコンポーネントを画面に配置してみましょう。
「アセット」の「ローカルコンポーネント」に作成したコンポーネントがありますので、画面領域にドラッグ・アンド・ドロップします。

配置したコンポーネントはデフォルトでは種類は「プライマリーボタン（primary）」、状態は「通常（basic）」となっていますが、ボタンのデザインを変更する場合はプロパティパネルの種類、状態を変更するだけでボタンのデザインを変えることができます。

まとめ

今回SketchからFigmaへの移行を通して、SketchデータをFigmaに取り込むこと自体はデータの作りにもよりますが比較的容易でした。
また、他の方の事例を見るとデザイン崩れが起きるケースも多く見られたので覚悟していましたが意外とすんなり取り込めたので安心しました。
FigmaにはVariantsなどの便利な機能があるので、これらの機能を利用して効率の良いUIデザインを作成していければと思います。