【Day4】100DaysOfDesign

3日目の記事はこちらからアクセスできます。

入力フォームのコンポーネント作成

FormのInputコンポーネントを作ってみました。テキストを入力した状態や空の状態、入力中、エラーの状態などを持っています（多分これで一通りの表現はできてる）
作成したInputを元にタイトルや必須、エラーテキストをつけたFormコンポーネントも作成しました。

Buttonの時の応用でInputを作ることはできたし、Inputを元にFormを作ることで、フロントエンドでのAtomic Designに基づいたコンポーネント作りと似ているなと感じました。

Input, Formのコンポーネント

今日は単純なコンポーネントでしたが、郵便番号や住所、電話番号の入力フォームといったときにはそれようにコンポーネントを作る必要もありますし、全てをVariantsでパターン化しようとせずに新しくコンポーネントを作ることで表現するとVariantsが複雑化しなくて良さそうだなと思いました。

自分自身がフロントエンドエンジニアだからか、Figmaでコンポーネント作る作業はReact Component作る作業と通づる部分があるなと思いました。むしろ思えて良かったです。

明日すること

ClickしたらTooltipやPopover、Modalが開くといったことをFigmaでどう表現しているのか気になったので作ってみようと思います。
ただ、ここまでやってみてあくまで画面の状態のスナップショットをPrototypeとして画面遷移を表していると感じたので特別な操作はないのかなと予想しています。

Prototypeでのスクロールをどう表現するのかも気になってるので明日以降で試したいです。