Open4

Figma & Amplify Studio で レスポンシブな2列レイアウトの作成手順

N2LabN2Lab

やりたいこと

横幅100%のFrame内に 50%, 50% の2列カラムを追加。
ブラウザの幅に応じて自動的に拡大縮小させる。
各カラムにボタンをセンタリング表示する。

完成イメージ

width=1440の場合

width=480の場合

N2LabN2Lab

Figma 設定

コンポーネント階層

TopButtons Frame(全体のルートFrame)

TopButtonsLeft Frame (紫のフレーム)

LoginButton (TopButtonsLeft Frame内)
Amplify 標準のButtonComponentなどを貼り付けて、


をクリックしてTopButtonsLeft Frame内でセンタリングし、
下記設定を登録

TopButtonsRight Frame (緑のフレーム)

RegistButton (TopButtonsRight Frame内の新規会員登録ボタン)

N2LabN2Lab

Figma　＞　Amplify Studio　に　’TopButtons'　コンポーネントとして取り込んだ後、React側で下記対応を行う

React側 style overrieds

  <TopButtons />

だけでは画面サイズに応じたリサイズが動作しないので、下記overrideを指定する

page.tsx
'use client';

import {
  TopButtons,
} from '@/ui-components';

export default function Home() {
  return (
    <>
      <TopButtons
        width='100%'
        position='relative'
        overrides={
          {
            'TopButtonsLeft': {
              width: '50%',
            },
            'LoginButton': {
              'left': 'calc(50%)',
              'top': 'calc(50%)',
              'transform': 'translate(-50%, -50%)',
            },
            'TopButtonsRight': {
              width: '50%',
            },
            'RegistButton': {
              'left': 'calc(50%)',
              'top': 'calc(50%)',
              'transform': 'translate(-50%, -50%)',
            },
          }
        }
      />
    </>
  );
}

実際は
<TopButtons ...buttons2Columns />
のようにプロパティを定義してimportしたほうがスッキリする

global.css 
.amplify-button--large {
  --amplify-components-button-large-padding-inline-start: 0.8rem;
  --amplify-components-button-large-padding-inline-end: 0.8rem;
}

Buttonのpaddingとtextの兼ね合いでButtonが2行表示になる場合があるので、paddingを調整