目次1 Sketch データから、Photoshop や XD に変換できる「Photopea」を試してみた1
こんにちは!デザイナーの熊野です。
弊社では業務の効率化のため、SketchをメインのUIデザインツールとして利用しています。
Sketchに移行してからの体感的な作業速度は1.5倍ほど上がったのですが、まだまだ納品はPSDで行う事が多いのが実情です。
そこで今回はPhotopeaというツールを使って効率化できないか検証してみました。
SketchはMacのみに対応しているデザインツールでWindowsではAdobe製品を使うのが一般的です。
また、クライアント側ではPhotoshopでの編集を想定しているケースがあります。
前提としてSketchはUIデザインに特化したツールであり、AtomicDesignの構造化的な思想を元に設計されています。AtomicDesignの思想は既に一般的にも知られていますが、こういった思想を概念として置きながらUIをデザインしていく事で制作効率もあがり、より頑丈なデザインデータの作成が可能となります。
Sketchの代表的な機能としては、下記のようなものがあります。
(こちらに関しては、また別の記事で詳しく書きたいと思います!)
まずPhotopeaにアクセスしましょう。
左上の「File」→「Open」から対象のSketchデータを選択します。
「Ctrl」+「O」のショートカットキーで開く事もできます。
この時点では文字化けしていますが、慌てず次のステップへ進みましょう。
右上の「File」→「Save as PSD」から保存します。
変換完了!後はPhotoshopで開いて必要な修正を加えて完成です。
Photopeaにアップロードした時点でフォントが文字化けしています。
Photoshopで開いた時に適切なフォントに置き換えましょう。
上部ツールの「More」→「Language」→「日本語」で日本語表示に変更できます。
SVGで書き出す事により、Photoshop上で編集できなくなってしまいました。
読み込みはされるものの、Ps上で直編集はできませんでした。
いかがだったでしょうか?Sketchでデザインをして、PSDで納品できるなんて作業効率も上がるし理想的ですよね。
体感、軽微な修正はかかるものの、PSD納品を指定された場合、この方法が一番効率が良いのではないかと思います。(2019年3月現在)
XDのアップデートでSketchデータをそのまま読み込めるようになったものの、XDファイル→PSDへの変換はまだサポートされていないようなので、PSD納品形式の際はぜひPhotopeaを試してみてください!