Affinity Designerの使い方-v1.5.1 新機能レスポンシブデザイン制約編１

まず、上部メニューで【表示】→【スタジオ】→【制約】をクリック。

制約表示

制約パレットが表示されます。
内側の四角が、オブジェクトを、外側の四角がアートボードを指します。
四方を指している矢印は、クリックすると消え（無効）、もう一度クリックすると、表示（有効）されます。
これを、オブジェクトごとに設定していきます。

制約パレット

アートボードに作成したメニューバーを選択して、ダブルクリック。
もしくは、スタジオのiPhone6(アートボード)オブジェクトを展開して長方形オブジェクトを選択。

制約パレットの外側の左右の線の部分をクリックします。

スタジオ（右側のプロパティを表示しているパネル群）のレイヤータブのアートボードのところを選択して横のサイズを変えてみてください。

制約アートボードリサイズ前

横幅を広げてみました。

制約アートボードリサイズ後

メニューバーのボタンの３本線も一緒に広がりました。
そのままだと小要素まで一緒に変わりますので、変えたくない場合は幅を変える前に小要素も設定します。

小要素

選択したら制約パレットで、以下のように設定を変えます。

制約ボタンの設定

ボタン右のマージンとボタン幅を保持しつつ、メニューバーだけ広がりました。

リサイズ後

このような感じで、レスポンシブなモックアップを作成することができます。

次回は、Affinity Designer v1.5.1 新機能２　レスポンシブデザイン　制約編２　です。

スポンサーリンク