Open5

Figma & Amplify Studio で トップページの幅100vw画像コンポーネント作成＆スタイル指定内容

N2LabN2Lab

やりたいこと

トップページで横幅いっぱい（フルスクリーン）の画像を表示する。
その画像はFigmaでコンポーネント内に定義する。
画像URL自体はReact側で指定する。
画像の縦横比を維持する。

補足

一般的に、オリジナルの縦横比のまま横幅いっぱいに表示する場合

width: 100%; // または 100vw

をimg タグに付与すればよいが、Figmaのコンポーネントは自動的に横幅いっぱいに表示されないので、
明示的にコンポーネントを画面横幅いっぱいに表示する手順をまとめる

N2LabN2Lab

Figma

Component 階層

TopHeader Layer

TopBgImg

N2LabN2Lab

Figmaの見た目

Frameの縦横サイズを変えても画像が自動的にリサイズされる。

N2LabN2Lab

Figma → Amplify Studio 同期後　Reactでの利用方法

React実装

page.tsx
import {
  TopHeader
} from '@/ui-components';

export default function Home() {
  return (
    <>
      <TopHeader
        width='100vw'
        height='75vw'
        overrides={{
          TopBgImg: {
            src: '/lp/top.jpg'
          }
        }}
      />
    </>
  );

width=100vw 横幅いっぱいにする
　　height='75vw' 画像の縦横比(3:4)を維持する高さを指定。 (3 / 4 = 0.75 →　75vw)
　　TopBgImg: 画像パス (Amplify StudioはFigmaから画像を同期してくれないので指定が必須)

N2LabN2Lab

表示結果

iPhoneXRの場合

iPad miniの場合

いずれも幅いっぱいに表示された（成功）