PhotoshopでデザインしていたのをこれからはSketchでデザインするぞ〜！となったのが、2018年2月。
そして、Sketchにも慣れてきた2019年9月。
また鶴の一声で今度はSketchからAdobeXDに移行することになりました。。。
SketchからAdobeXDへの移行
SketchのデータはAdobeXDで開く事ができるので元のデータを開くのは何の問題もありませんでした。
が、画像に関しては部分的なサポートのみなので、崩れているものもありました。
崩れたもの
・アイコン：SVGで書き出すとネガポジが逆転しているものがあった。
・シャドウ：シャドウが別レイヤーになっていた。
▽ Sketchで作成していたデータをAdobeXDで開く方法
https://helpx.adobe.com/jp/xd/help/working-with-external-assets.html#sketch
▽ Sketch ファイルを XD で開くときにサポートされる機能一覧
https://helpx.adobe.com/jp/xd/kb/open-sketch-files-in-xd.html
SketchとAdobeXDの違いを知る
SymbolsとMaster Componentsの違い
まず、SketchのデータをAdobeXDで開いた時に戸惑ったのは、Sketchではレイヤーで分かれていたアートボードとSymbolsが同じ画面に表示されていたことです。Sketchで「Symbols」だったものは「Master Components」になっていました。
-
複製したパーツの色を一括で変更する
Symbols：可能
Master Components：可能 -
複製した３つのパーツのうち１つだけ色を変えたい
Symbols：Symbolsを階層分けし、変更したい色のパーツを作成して変更。
Master Components：方法は２種類。１つ目はパーツを選択し個別に変更する方法。ただし、例えば複製したパーツの色を変更した場合、Master Componentsにしたパーツの色を変更しても反映されない。２つ目はコンポーネントのステート編集機能で新規ステータスに色を変更したものを追加する方法。 -
パーツの管理
Symbols：シンボル化したものはSymbolsレイヤーに複製される。
Master Components：アートボードで選択したパーツがそのままMaster Componentsになりそのままにしてしまうと、取れがマスターかわからなくなるため、自分で管理する必要がある。
プラグイン
Sketch：サードパーティー製のプラグインマネージャーを使わないとインストールできない
AdobeXD：直接インストール
プロトタイプ
Sketch：prottのプラグインをインストールし同期させて使用していましたが、同期させないと変更されないのでオンタイムの情報ではなくなってしまう。
AdobeXD：最新の状態のものを常に見る事ができる。
共同編集（2019年11月時点）
Sketch：不可能
AdobeXD：可能！！
最後に
正直なところ、せっかく使い慣れてきたSketchをAdobeXDに切り替えるのは少々抵抗がありましたが、切り替えて正解だったと思います。
なんといっても11月のアップデートはすごかった！
AdobeXDで11月にアップデートされたもの
- リアルタイム共同編集
- バージョン管理機能
- コンポーネントのステート編集機能
- ホバートリガー
これがなされたことによって、Sketchの一歩先行くツールになったように思います。
11月にアップデートされた機能はまだちょっと不安定な部分もありますが、それは今後のアップデートに期待です。
機能的にもサポート面的にもオススメなのはAdobeXDです。
一度試してみてはいかがでしょうか？