Sketch ファイルを Figma にインポートしてみた

古すぎる記事なので、よりオススメの記事を貼っておきます。

----- 以下読まなくて大丈夫です -----

Figmaの主な弱点をあげるなら、プラグインやUI kitが少ない点でしょう。
いくら同時編集機能がすごいとはいえ、実際Figmaを使おうと思ったら
「iOSの標準パーツ使いたいだけなのにイチイチ書きたくない」とか
「仮にSketchから移行したら、昔のファイル使いたい時トレースするの？」
というようなUI作成時の効率性や互換性に不満/疑問が残ります。

一方Sketchには世界中の有志が作ったUI Kitが数え切れない程あります。
必要以上にデザイン？したダイアログ等を見て「これ実装するほどの優位性があったのか？」と発狂する私にとって、そのようなOS UI KitがあるSketchは最高でした。

しかし後になって知ったのですが、
実はFigma、Sketchファイルのインポートをサポートしています。
プラグインに関してはどうしようもありませんが、Sketchのファイルを
インポートできれば随分と楽になりそうですよね。
そこで同様の悩みをお持ちの方向けに、かの有名なElements UI Kitを使ってOverrideやSymbolが適切にインポートできるのかまとめてみます。

インポートはドラック&ドロップのみ

まずはFigmaを開き、Sketchファイルをドラック&ドロップします。

ローディングダイアログが出てから、少し待つとインポートが完了したことを教えてくれます。簡単ですね。
（余談ですがこのダイアログのDone、いるのかなあ・・・）

インポートファイルを開いてみる

ぱっと見そのままインポート成功しています。
画像や色情報、ボタンの形状、それからレイヤーなど基本的なものはもちろん編集することが出来ました。
SymbolもしっかりComponent化されていて、オリジナルの色を変えると
全てのパーツ色が変わります。
なんだFigmaやるじゃん、と思いきや、よくみると謎の黒いバーが・・・

なんだこれ。

どうやらSymbolのBackgroundがそのまま出てしまっているようです。
面倒ですがFigma上で背景色を非表示にすると正常になりました。
なお作り上の問題なのでSketchの構成によっては不要な手順です。

アイコンのOverrideやTintによる色変更はマスクを使って無理やり変換しているようです。構造的にはPhotoshopの調整レイヤー（色）をベクトルマスクして変えているような感じでした。ベクトルマスク・・・懐かしい・・・。

また命名規則からなるメニュー化？も引き継いでおり、
Bars/Navigation Bar/Transparentとネスト化されています。

ただし、Tintを使ったボタン類への全体色変更はうまく行っていません。
今後に期待ですね。

その他にもSymbolの変形（カードやボタン）もうまく行ってない様子。Sketchほどリッチなリサイズができないせいかひっくり返ったりサイズが変わってしまった部分もあって崩壊しています。

まとめ

できること
・画像、パス、カラー、テキスト、それらの透明度など基礎情報のインポート
・Symbolの構造は割合とそのまま
・単純なOverrideやTintはマスクなどを駆使して無理やりコンポーネント化

できないこと
・OverrideのTint変更機能の保持（オーバーレイ機能）
・Sketch上でのSymbolの変形

終わりに

Sketchの便利機能がそのままではないのが残念ですが、
インポート機能を使えば、頑張ってFigmaのUI Kitを探すことや、スクリーンショットをイチイチ貼ってトレースする作業もしなくて済みます。
デザインシステム自体はFigmaが話題になる前から議論があったので、今後アップデートが来ると妄想してしまいます。（そのまえにInVision Studioか？）
本まとめがFigma移行の検討材料になれば幸いです。

おまけ

FigmaのUI kit、検索すると意外と出てきます。神。
http://freebiesui.com/figma-freebies/
http://figmafinder.com/
https://www.figmaresources.com/