Upgrade to Pro — share decks privately, control downloads, hide ads and more …

チーム内のUIデザインのコミュニケーションを円滑にするFigmaの機能「Variants」をおさらい!

Saito Ayumu
March 10, 2024
800

 チーム内のUIデザインのコミュニケーションを円滑にするFigmaの機能「Variants」をおさらい!

Saito Ayumu

March 10, 2024
Tweet

Transcript

  1. Button Button Button Button Button Button ❖ Blue Button ❖

    Red Button ❖ Green Button ❖ Hovered Blue Button ❖ Hovered Red Button ❖ Hovered Green Button 「ボタン」の状態ごとにバラバラのコンポーネント
  2. <Slot /> {children} <Button color=”red” is-active> ボタン</Button> フロント側のPropsと一致させることにより効率化 React コンポーネントの一例

    開発体験向上のための一工夫 や 相当の部分にはVariantsのプロパティ名に「↪」を付ける