Sketch + CraftにiOS10のGUIを突っ込んで爆速でデザイン作る方法

更新日:2017年1月27日

Facebookがデザイナー向けに無料で公開しているデザインリソースにiOS10のGUIパーツがあるのですが、SketchやPSDのファイル形式以外にCraftのLibraryに対応したものがリリースされたので試してみました。

iOS 10 GUIのファイルをダウンロード


iOS 10 GUI (iPhone)のDownloadボタンからCraftを選択してファイルをダウンロードします。

ダウンロードしたファイルをLibraryに追加する

SketchとCraftを起動し、Craftのタブの中からLibraryをクリック。

Import Libraryをクリックして、先程ダウンロードしたファイルの中から「Facebook iOS 10 iPhone.library」というフォルダを選択します。

Libraryから追加したいパーツを追加する

Importが成功すると、GUIパーツの一覧が表示されます。カテゴリを選択して追加したいパーツを探して、ドラッグアンドドロップでキャンバスにパーツを配置します。

簡単。
GUIパーツを組み合わせると簡単にアプリのデザインが作成できます。
こんな感じ。

InVisionが開発するSketchプラグイン「Craft」ですが、Facebook Designにこのフォーマットが追加されたということはFacebook内でもかなり活用されているのかも?便利なLibrary機能、ガンガン使ってみてください。

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji