illustratorでUIデザイン：属性抽出スクリプト

文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してくれるスクリプトを作成しました。

<a href="https://www.dropbox.com/s/3hzj41o32aak41b/getProperties.zip?dl=0">getProperties.zip</a>ダウンロード

基本的な使い方

要素を選択してスクリプトを実行するだけです。

f:id:two-hats:20141003020629g:plain

属性ごとに色分け＋レイヤー分けしているので区別がつきやすいようにしています。

絶対座標・縦横サイズも併せて抽出

f:id:two-hats:20141003021547g:plain

「Shiftキー」を押しながら実行すると絶対座標・縦横サイズも併せて抽出できます。

テキストとパス以外の要素（ex.画像、グループ、グラフなど）や、スライスが切ってあるものは画像部品であると見なし、画像エリアを表すマゼンダの半透明も併せて表示します。

抽出した属性をアートボード外に表示

上記の表示だと複雑なUIの場合にごちゃごちゃしてしまうので、アートボードの外側に表示できるオプションも用意しています。Ctrlキー（ or Commandキー）を押しながら実行してください。
その後、アートボードのサイズを大きくすることで指示書として作成することができます。

f:id:two-hats:20141003023059g:plain

Ctrlキー（ or Commandキー）+ Shiftキーを両方押しながら実行することも可能です。

実例

試しに下図のデザインにこのスクリプトを用いてみます。
f:id:two-hats:20141003023445g:plain

アートボードの大きさを広げ、属性の位置を調整してしてあげるだけで下図のような指示書を作成することができます。

f:id:two-hats:20141003023739g:plain

他のスクリプトと組み合わせて

以前作成したスクリプトと併用することで、相対座標指定の指示書を短時間で作成することができます。

<a href="http://2-hats.hateblo.jp/entry/2014/08/30/055457">llustratorでUIデザイン：相対座標書出しスクリプト - Two hats</a><a href="http://2-hats.hateblo.jp/entry/2014/09/02/225106">llustratorでUIデザイン：縦横サイズ書出しスクリプト - Two hats</a>

illustratorの設定

参考ですが、UIデザインにillustratorを使うときの設定は下記の記事を参照して下さい。<a href="http://2-hats.hateblo.jp/entry/2014/08/14/091440">illustratorでUIデザイン：設定編 - Two hats</a><a href="http://2-hats.hateblo.jp/entry/2014/08/23/001125">illustratorでUIデザイン：基本編 - Two hats</a><a href="http://2-hats.hateblo.jp/entry/2014/08/30/055435">llustratorでUIデザイン：応用編 - Two hats</a>

私がいつも作っている指示書に似た感じの表示形式にしてみたので、ここをこうして欲しいなど要望があったら連絡いただけるとうれしいです。