Zenn
Closed7

Figmaでフォームを作りながら操作方法を覚える

koyokoyo

Figmaでフォームを作る
操作方法を覚えるのが主な目的なので、個別の用語については触れない

前提

  • エンジニア
  • Figmaの概念はある程度わかる（devモードで見たりするので）
  • 操作方法がわからない

ちなみに、方針自体はClaudeに作ってもらいつつスクラップは自力で書いている

koyokoyo

フレームの作成

  1. Fでベースとなるフレーム(Frame)を作る
  2. もう1回Fでフレームをつくって、Shift + AでAuto Layoutにする（Form Container）　これがフォームのコンテンツを入れるコンテナになる　左パネルでDnDをしてFrame下に入れる
  3. ヘッダーをつける　Tでテキストボックスを出して、適当な文字(New Form)を入力　Container下に置く
  4. 右側のTypographyからNew Formのスタイルを変更する
koyokoyo

テキスト入力コンポーネントの作成

  1. Fでフレームを作る(TextField)、Shift + AでAutoLayout化
  2. Tでラベルを作成、TextField下に入れる ちなみに、文字色はFillで変えられる（なんでTypographyに含まれないんだろうか）
  3. Rで矩形(Input)を作成する　右カラムのStrokeから枠線をつける Apperanceでborder-radiusを指定する
  4. 今回はラベルとInputを縦に並べたい　TextFieldを選択して、AutoLayoutのVertical Layoutを選択
  5. 同じくAutoLayoutからgapを調整する
  6. UIコンポーネント的な考え方でいうと外側のmargin/paddingは存在しないほうがいいので同じくAutoLayoutから0にする　ただ、これはHTMLとして実装するときのベストプラクティスだからFigmaでも同じことが言えるかどうかはわからない
  7. TextFieldを選択して、Cmd + Option + Kでコンポーネント化
  8. さらに、利用側でラベルの文字列を変更できるようにしたい　TextFieldを選択して、Add property->Textを選択 出てきたダイアログでName, Valueを適当に埋める
  9. Labelを選択して、TypographyのセクションからApply Text Propertyを選択　先ほど作ったプロパティを紐づける
  10. 適当にTextFieldをコピーして貼り付けると、右カラムにプロパティの変更セクションがあることが確認できる
koyokoyo

ラジオボタンを追加する

  1. Fでフレームを作成（Radio）, Auto Layout
  2. 先ほど作ったTextFieldからラベルをコピーしてきて、Radio下に配置（Label単体でコンポーネントとして切り出してもいいのかもしれない）
  3. Fでもう一度フレームを作成(RadioItem)、Auto Layout これは各選択肢
  4. Oで円を2つ作成　1つはラジオボタンの内側の円なので小さくする 2つを重ねる（親子関係になってなくてもよい）
  5. 2つの円を選択した状態で、Shift + AでAuto Layout化するとフレームが作成される(Radio Button)　並び方はAlign Centerにする　RadioItemに入れる
  6. Tでテキストを作り、RadioItemに入れる
  7. RadioItemをコンポーネント化　必要ならラベルに対してPropertyの設定をする
  8. RadioItemを右クリックしてMain component->Add variant
  9. 新しくできたほうのVariantで、RadioButtonの内側の円を選択　Appearance->Hideで消す
  10. コンポーネントをコピーして、インスタンスをRadioに入れていく　1つ以外は右カラムのプロパティからVariantを内丸が非表示のほうにする
  11. Radioをコンポーネント化　必要ならラベルに対してPropertyの設定をする

あくまでサンプルなのでコンポーネントはこの2つで終わり

koyokoyo

FormContainerに追加する

  1. TextField, Radioをコピーしていくつかインスタンスをつくる
  2. FormContainerに追加していく
  3. Auto Layoutで左揃えにする
  4. Propertyをそれぞれ適宜編集する

    おわり
koyokoyo

感想など

Figmaのコンポーネントの切り方とか、プロパティの設定とかをReactのコンポーネント設計に落とし込めるとよさそう
画面全体ではなくて、コンポーネント設計もデザインを実装に反映させていくイメージ
特にデザインシステムはこれで作れるとよいし、有名どころは実際そうしているんだろうと思う

ただ、デザイナーとエンジニアの間でコンポーネント設計に対して共通認識を持っていることがどれだけのメリットを生むのかはあまりわからない

やってよかった

koyokoyo

これでGoogleを作れるようになっただろうと思います

このスクラップは1ヶ月前にクローズされました