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