Amplifyやっていき

もっくま(Mistletoe)

やる

もっくま(Mistletoe)

NoteUIのコンポーネントないやんけ

もっくま(Mistletoe)

NoteUI自作
AutoLayoutで基本は組むのかな？
flexはコンポーネントをネストしてつくるんかな
この辺のTips・コツ・Hacksがありそう

もっくま(Mistletoe)

まぁまぁわかってきたけどまとめんのだる笑

もっくま(Mistletoe)

基本的にはネットで引っかかるチュートリアルが全部そのままでは動かないっぷり

もっくま(Mistletoe)

Create,UpdateのFormはModelから自動で生成する、という機能があるっぽい
が、閉じるボタンがないし、あんまり使わない気もする

もっくま(Mistletoe)

コンポーネント構成はこんな感じ

Figma右のAutoLayoutで縦横方向の並びで構成する感じ。
横並びにしたい場合はFrameでくくって、横並びでflexやらjustify的に調整した子部品を追加する感じ

縦横の幅は↓の感じで指定

Fixed…固定幅
Hug…中身に合わせて変動
Fill…親の幅に合わせる

もっくま(Mistletoe)

モーダルはこれでいける。すごい。

<div className='modal'>

もっくま(Mistletoe)

レスポンシブやってみる

もっくま(Mistletoe)

collectionのレスポンシブは↓のライブラリとかでJSで対応したほうが楽そうではある。

あんまり公式記述がない？

もっくま(Mistletoe)

collectionはそもそもFigmaにないから、variantで動向はできないよね？

もっくま(Mistletoe)

Sync with Figma 時にエラー

An error occurred saving components Item name already exists

なんかうまいことupdateされない/既存のコンポーネントが新規として扱われる事がある。
→UI Libraryから削除して再度取り込みで解消

もっくま(Mistletoe)

コンポーネントのレスポンシブ対応

Figmaのvariantという同一コンポーネントを外部変数で複数のバリエーションをもたせる機能を使う
https://ics.media/entry/220413/

バリアントの足し方は簡単で、以下をクリックする

するとコンポーネントがバリアント付きのものになるので、Add Variantで全く同じ見た目の異なるバージョンを複製できる

複数のvariantを持ってる状態。

コンポーネントツリー上はvariant名が並ぶことになる。

AmplifyUI上でレスポンシブを聞かせるには、variantのproperty名を breakpoint , 値を定められた以下の値を設定する必要がある

{
  base: '0',
  small: '480px',
  medium: '768px',
  large: '992px',
  xl: '1280px',
  xxl: '1536px',
}

複製は簡単なので、全値を作っておくのがベターそう

あとは amplify pull してくればレスポンシブ対応の完了

もっくま(Mistletoe)

Collectionのレスポンシブ頑張ろうとするとcss+!importantとかで頑張らないとamplifyに負けるシーンがあるな…
slotでflexで避けるかだな…
思想的にもSlotなりで頑張って実現するほうがUIのスタイリングをFigmaに寄せられるので正しいかな…
Collectionの他機能は使えないので、機能とデザインのトレードオフ（なんでやねん）