ボタンコンポーネントをfigmaで作成してAmplifyに取り込んでみた
概要
最近Amplifyの沼にどっぷり使っています。
デザインをfigmaでやっているのですが、これがなかなか思った通りに動いてくれない・・
少しずつ知見を貯めていこうということで、いろいろと実験しながら楽しく学んでいけたらなんて思っています。
figaでボタンを作る
こんなボタンコンポーネントを作ってみた。（↓figma）
コンポーネントのプロパティ
コンポーネントに設定したプロパティは下記のようにしてみました。
これは、MyButtonFixed、MyButtonHugどちらも同じです。
| プロパティ | 値 | 説明 |
|---|---|---|
| State | Default | デフォルト |
| Pressed | ボタンが押された時のデザイン | |
| Disable | ボタンが無効状態のデザイン | |
| Round | true | ボタンの角が丸いデザイン |
| false | ボタンの角がtrueのときより丸みのないデザイン |
コンポーネントの差異
コンポーネントの差異は、コンポーネントのボタン幅、高さが、固定幅（Fixed）かハグ（Hug）かどうかの違いです。
あとは全て同じ設定になっています。
このボタンコンポーネントを実際に画面に表示させていきます。
| MyButtonFixed | MyButtonHug |
|---|---|
 |
 |
これをみてわかる通り、（まぁ複製して作ったので）構造は全く同じ。
Amplify Studioに取り込んでみよう
コンポーネントが作成できたので、Amplify Studioに取り込んでみます。
プレビュー機能が割としっかりプレビューしてくれるので、プレビューで出来栄えを確認します。
Stateを変更してみると、しっかり色味が変わってくれます。
- MyButtonFixed（State='Default', Rounded='false'）
- MyButtonFixed（Pressed='Default', Rounded='false'）
- MyButtonFixed（Disabled='Default', Rounded='false'）
Roundの方も変わってくれています。
（最初に作ったときにバリアントの設定ミスがあったため、表示できていなかったのが左側）
- MyButtonFixed（Default='Default', Rounded='true'）
- MyButtonFixed（Pressed='Default', Rounded='true'）
- MyButtonFixed（Disabled='Default', Rounded='true'）
これでState×Roundの組み合わせ6通りが確認できました。
- MyButtonHug（State='Default', Rounded='false'）
- MyButtonHug（State='Pressed', Rounded='false'）
- MyButtonHug（State='Disabled', Rounded='false'）
- MyButtonHug（State='Default', Rounded='true'）
- MyButtonHug（State='Pressed', Rounded='true'）
- MyButtonHug（State='Disabled', Rounded='true'）
ボタンを各組み合わせ表示してみると、こんな結果に。
上の6つはMyButtonFixedなので、figmaで固定した W:91px H:40px になっています。
下の6つはMyButtonHugで、こちらは幅いっぱいに伸びてしまいました。
今度は<Flex>に囲んで横揃えにしてみました。
<View style={{ padding: "10px" }}>
<Flex direction="column">
<Text textAlign="left">MyButtonFixed:</Text>
<Flex>
<MyButtonFixed state="Default" rounded="true" />
<MyButtonFixed state="Pressed" rounded="true" />
<MyButtonFixed state="Disabled" rounded="true" />
<MyButtonFixed state="Default" rounded="false" />
<MyButtonFixed state="Pressed" rounded="false" />
<MyButtonFixed state="Disabled" rounded="false" />
</Flex>
<Text textAlign="left">MyButtonHug:</Text>
<Flex>
<MyButtonHug state="Default" rounded="true" />
<MyButtonHug state="Pressed" rounded="true" />
<MyButtonHug state="Disabled" rounded="true" />
<MyButtonHug state="Default" rounded="false" />
<MyButtonHug state="Pressed" rounded="false" />
<MyButtonHug state="Disabled" rounded="false" />
</Flex>
</Flex>
</View>
横に並べると、どっちも同じサイズ（W:80px, H:40px）に！
この差は一体何？？
実際にamplify pullを行なって生成されたMyButtonFixed.jsxとMyButtonHug.jsxを比較してみると、次のことがわかりました。
// MyButtonFixed.jsx
return (
<Flex
gap="8px"
direction="row"
- width="91px"
- height="40px"
justifyContent="flex-start"
.
.
（省略）
---
// MyButtonHug.jsx
return (
<Flex
gap="8px"
direction="row"
+ width="unset"
+ height="unset"
justifyContent="flex-start"
.
.
（省略）
widthとheightの値に差異が見られました。
まぁこれは、figmaでの設定通りといえば通りですね。
でも、縦に並べたときはなんで幅いっぱいに伸びちゃうんだろう・・
unset は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。
unset は一括指定の all を含む、あらゆる CSS プロパティに対して適用することができます。
（https://developer.mozilla.org/ja/docs/Web/CSS/unset より）
ちょっと理解できているか自信ないけど、要は親によって変わるのね。
まとめ
というわけで、figmaでボタンレイアウトを作成してみましたが、単品で使う分にはまぁまぁ分かってきたような、まだ分かっていないような。。
でも、きっちりボタンサイズが決まっている場合は、figma上で固定で指定しまった方が楽な気がします。
レスポンシブ対応をしなければいけないときは、デザイン上はハグにしておいて、調整するという手もありかもですね。
Discussion