デザインツールの革命と言っていいかも!サイズ指定を「%」でできるSketchのプラグイン -Fluid

普通のデザインツールだと、サイズ指定は「px」を使用している人がほとんどでしょう。固定値のデザインをするのであれば、ピクセルで何も困りませんが、レスポンシブの相対値のデザインに適しているとは言えません。

Sketchでサイズ指定を「%」でできるプラグインを紹介します。
キャンバス・グループ・兄弟要素に対して、相対的にサイズを指定できます。

Sketchのキャプチャ

Fluid for Sketch -GitHub

Fluid for Sketchを使ってみた

まずは「Fluid for Sketch」がどんな感じなのか、Fluidのデモファイルを使って紹介します。

Sketchのキャプチャ

デモファイルを開いたところ

Fluidは、さまざまな要素をキャンバス全体・グループ・兄弟要素に対して「%」でサイズを指定できます。分かりやすい例として、ボタンで試してみます。

Sketchのキャプチャ

3つのボタン

メニューから「Fluid」を選択します。

Sketchのキャプチャ

Fluidの起動

サイズ指定する要素を選択し、「Edit Constraints」でFluidのパネルを表示します。

Sketchのキャプチャ

Fluidのパネル

一番目のグリーンのボタンを選択し、サイズ「50%」を指定し、「Update Layout」で適用されます。

Sketchのキャプチャ

ボタンのサイズをキャンバスの「50%」に指定

プレビューで見ると、ボタンのサイズがキャンバスに対して50%になっているのが分かります。

Sketchのキャプチャ

スマフォ・タブレット・デスクトップでの表示

相対時の元は、キャンバス・グループ・兄弟要素を選択できます。

Sketchのキャプチャ

Fluidのパネル: 相対元を指定

「Canvas」はキャンバス全体を元にサイズを定義します。

Sketchのキャプチャ

ボタンのサイズは、キャンバス全体の50%

「Previous Sibling」は兄弟要素を元にサイズを定義します。

Sketchのキャプチャ

ボタンのサイズは、兄弟要素の50%

Fluid for Sketchのインストール

インストールは、簡単です。
下記ページの「Download Plugin」から、プラグインをダウンロードします。
※上記で使用したデモファイルもダウンロードできます。

サイトのキャプチャ

ダウンロードしたファイルを解凍し、「Fluid.sketchplugin」をダブルクリックするだけで、インストールは完了です。これで、Sketchのメニューに登録されます。

Sketchのキャプチャ

Plugins:: Fluid

top of page

©2017 coliss