1. ホーム > 
  2.  Affinity Designer
制約パレット

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

2016/10/14 - Affinity DesignerAffinity Designer入門 , Affinity Designer使い方

Affinity Designer v1.5.1 新機能 レスポンシブデザイン アセット編 の続きです。

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

制約表示

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

制約パレット

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

選択

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

制約

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

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

横幅を広げてみました。

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

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

小要素

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

制約ボタンの設定

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

リサイズ後

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

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

 

コメント

コメントを書く

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA