FigmaデザインをReact実装に落とし込むときの確認ポイント

SREホールディングス株式会社でエンジニアをしているサティヤです。 はじめに フロントエンド開発では、Figmaなどで作成されたデザインをもとに、Reactで画面を実装することがよくあります。 一見すると「デザイン通りに作るだけ」に見えますが、実際に実装してみると確認すべきポイントは意外と多いです。 例えば、以下のような観点があります。 既存コンポーネントを使えるか 余白や文字サイズはデザインと合っているか loading、error、disabledなど状態ごとの表示はあるか 長い文字列や空データの場合にレイアウトが崩れないか 実装後にレビューしやすい状態になっているか この記事では、FigmaデザインをReact実装に落とし込むときに確認しておきたいポイントを、自分なりに整理してみます。 この記事で書くこと この記事では、主に以下について書きます。 実装前に確認すること 既存コンポーネ