22時に寝ようと思って2時に寝る。

備忘録や日記を書いてます。きょうは早く寝よう。

Sketch - データ構造

これまでSketchを「雰囲気で」使ってきた部分が大きく、実際にSketchを使いこなせていない感がありました。 そこで、Sketch入門書を手に取りながら、実践し、記事にまとめていきたいと思います。 まずは、Sketchのシステムがどういったデータ構造でデータが格納されているのかを知りたいと思います。

Sketchのデータ構造

Sketchはどのようにしてデータ構造を保っているのかを、概念的に理解していきます。

最初に大きくどういった構造になっているのかを図で説明したいと思います。

f:id:azuuun:20171116141422p:plain

  • まず、Sketchにて新規ファイルを作成するとsample.sketchというように拡張子「.sketch」でファイルが保存されます。
  • その下に「Page」があります。実質的な最上位の概念です。目に見えるものではなく、次の概念である「アートボード」をまとめるためのものです。
  • 次に「アートボード」があり、これが作業スペースとなり、例えば「iPhone 8 plus」のサイズであったり、「A4用紙」であったりサイズも任意のものに設定できます。
  • 次にあるのが「レイヤー」です。これはテキスト、画像、シェイプ(円形や四角などの部品)などのオブジェクトの重なりを制御できたりする概念です。
  • そして、UIを形作る各オブジェクトがあります。

Sketchの特徴的な部分は、アプリであれば、「ホーム画面」「マイページ画面」「設定画面」などのアートボードに相当する単位のものを、「ページ」としてまとめられるところにあります。

参考

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド