UI/UXデザインツール『Sketch』入門

2-3. データ機能を活用する

  • UIデザイン
  • UXデザイン
  • プロトタイピング

オブジェクトの基本操作の応用編として、シェイプやテキストへデータの流し込みができる便利な機能を紹介します。

公開日:2019/04/25最終更新日:2019/04/25

1.シェイプオブジェクトにデータを流し込む

データ機能を使うことでシェイプに指定の画像を流し込むことができます。オブジェクトを選択した状態で、メニューバーより[Layer]→[Data]→[Sketch Data]の順に選び、[face]だと人物のポートレイトが、[Tile]だとパターンがランダムでオブジェクトにマスクが適用された状態でイメージが埋め込まれます。

オブジェクトにすでにイメージがあたっている状態で[command]+[shift]+[D]を押すと再度ランダムで画像が適応されるリフレッシュ機能が利用できます。後のレッスンで解説するプラグインやデータセットを利用することで、より効率的にUIデザインやプロトタイピングをすることができますので是非試してみましょう。

図:データを適用したいオブジェクトを複数選択した状態

 

図:オブジェクトにデータが適用された状態。

自分で用意した画像を使いたい場合は、環境設定から追加できます。

2.テキストオブジェクトにデータを流し込む

データ機能を使うことでテキストオブジェクトに用意されたテキストを流し込むことができます。デザインを作成する際にダミー(仮)のデータを用意しておくと、効率よく作業を進めることができます。

リアルなデータを流し込むときは注意が必要ですが、テキストの分量や、デザインの評価の際に現物に近いデータを利用することは重要です。

[Layer]→[Data]→[Sketch Data][Names]の場合はランダムな人物名[World Cities]では都市名が入ります。日本語圏でこのままでは使いづらいシーンも多いので、後のレッスンでカスタマイズする方法を紹介します。

図:ダミーテキストの適用前と適用後

シェイプオブジェクト同様、自分で用意したテキストを使いたい場合は環境設定から追加できます。長文テキストや詳細文、市町村名など日本語用のプリセットも多く配布されています。

理解度チェック





UI/UXデザインツール『Sketch』入門

1. Sketchの概要とインストール

2. Sketchの基本操作

3. レイヤーリストの操作

4. ツールバーの操作

5. インスペクタの操作

6. シンボル・オーバーライド・ライブラリーの使い方

7. プロトタイプの作り方

8. Sketchをチームで使う

9. 料理写真投稿アプリを作ってみよう



このレッスンの著者