デザインを考える AdobeXD② クリックしたらチェックの線が出る。リピートグリッド。

最初のスタート画面では、こんなドロップダウンをつけようかと思っています。


枚数を選んだら、次へを押して

こういった画面に飛んで、

「画像」ボタンを押したら、ダイアログでファイルを選べるように・・・

これからしたいと思っています。

 

録音は、今までやってきた録音です。

 

「リンク先を作る」ボタンは、下の「リンクさせる」にチェックが

入っていないと押せません。

 

チェックを入れると押せるようにします。

 

押したら、また、スタート画面によく似た画面に

行くようにします。

 

リンクは二つまで作れると便利かなと思っています。

 

 

それから、

この、チェックボックスの作り方ですが、これも忘れそうなので書いておきます。

 

線を選び、線をひいたら

↑これを選んで、

 

引いた線をダブルクリックしたら

 

↓片方のまるが塗りつぶされて、

かつ、矢印が触れたところにも塗られた丸が出てきます。

そこでクリックすると、片方の丸は白くなります。

真ん中の丸をマウスで掴んで引っ張ると形が変えられるようになります。

 

形ができたら、線を選んだ状態で右端を見ると、線の幅が選べるところがあります。

 

この画像↑の右下に「サイズ」と書いたところがあります。

今は「4」にして少しだけ太くしました。

 

↓四角枠の中に入れます。

四角と線の両方を選んで、右クリック。

コンポーネントにする を選びます。

 

緑の枠が出ました。

この状態で右を見ると、

コンポーネント というところがあり

「初期設定のステート」というのがあります。

その右端のプラスをクリックすると

色々選べます。

今回は「トグルステート」を選びました。

 

 

「初期設定のステート」を選んだ状態にし、

 

線だけをダブルクリックして選択

右端の「アピアランス」をゼロにしました。透明になりました。

見えてる四角枠を選んで

今度はトグルステートを選び

透明になっているけど、線があっただろうところにマウスを持っていくと

浮かび上がるので、また線だけをクリックし、

今度は「アピアランス」を100に戻します。

そうすると、線が見えてきます。

 

今からは確認作業です。

全体をクリックして緑の枠を出して

 

「初期設定のステート」を選ぶと線は見えません。

 

「トグルステート」を選ぶと線が出てきます。

 

 

プレビューをすると

クリックするたびに線が消えたり出たりします。

 

 

 

 

 

ところで、最初の画面で枚数を「4」を選んだなら、

↓この四角枠やボタンも4つ欲しいです。

 

そこで、全部選んで

リピートグリッドを選ぶ

 

そうすると、こうなるから↓

右の長い丸をマウスで掴んで右へ引っ張る。

 

 

そうすると、次々、同じのができていきます。

 

ちゃんと、チェック機能も活きています。

四角枠をクリックしたところにだけ、チェックの線が出てきます。