デザインツールの革命と言っていいかも!サイズ指定を「%」でできるSketchのプラグイン -Fluid
Post on:2015年11月11日
普通のデザインツールだと、サイズ指定は「px」を使用している人がほとんどでしょう。固定値のデザインをするのであれば、ピクセルで何も困りませんが、レスポンシブの相対値のデザインに適しているとは言えません。
Sketchでサイズ指定を「%」でできるプラグインを紹介します。
キャンバス・グループ・兄弟要素に対して、相対的にサイズを指定できます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111101.png)
Fluid for Sketchを使ってみた
まずは「Fluid for Sketch」がどんな感じなのか、Fluidのデモファイルを使って紹介します。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111103-01.png)
デモファイルを開いたところ
Fluidは、さまざまな要素をキャンバス全体・グループ・兄弟要素に対して「%」でサイズを指定できます。分かりやすい例として、ボタンで試してみます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111103-02.png)
3つのボタン
メニューから「Fluid」を選択します。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111102.png)
Fluidの起動
サイズ指定する要素を選択し、「Edit Constraints」でFluidのパネルを表示します。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111103-03.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111103-03.png)
Fluidのパネル
一番目のグリーンのボタンを選択し、サイズ「50%」を指定し、「Update Layout」で適用されます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111103-04.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111103-04.png)
ボタンのサイズをキャンバスの「50%」に指定
プレビューで見ると、ボタンのサイズがキャンバスに対して50%になっているのが分かります。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111104.gif)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111104.gif)
スマフォ・タブレット・デスクトップでの表示
相対時の元は、キャンバス・グループ・兄弟要素を選択できます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111106-01.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111106-01.png)
Fluidのパネル: 相対元を指定
「Canvas」はキャンバス全体を元にサイズを定義します。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111106-02.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111106-02.png)
ボタンのサイズは、キャンバス全体の50%
「Previous Sibling」は兄弟要素を元にサイズを定義します。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111106-03.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111106-03.png)
ボタンのサイズは、兄弟要素の50%
Fluid for Sketchのインストール
インストールは、簡単です。
下記ページの「Download Plugin」から、プラグインをダウンロードします。
※上記で使用したデモファイルもダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111105.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111105.png)
ダウンロードしたファイルを解凍し、「Fluid.sketchplugin」をダブルクリックするだけで、インストールは完了です。これで、Sketchのメニューに登録されます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111102.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111102.png)
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015111102.png)
Plugins:: Fluid
sponsors