【Figma】NextJSのソースコードを自動生成(Clapy)

ホーム
BLOG
【Figma】
【Figma】NextJSのソースコードを自動生成(Cl…

【Figma】
2024.10.24

【Figma】NextJSのソースコードを自動生成(Clapy)

概要
Clapyサンプルを取り込む
プラグイン「Clapy」の選択
ソースコードの生成
ソースコードのダウンロード
プロジェクトを作成（NextJS）
サーバーを起動
ブラウザで確認
プロジェクトにダウンロードファイルをコピー
ブラウザで確認（コピー後）
備考
参考

【Figma】NextJSのソースコードを自動生成(Locofy.ai)

1. 概要

前回はLocofy.aiを利用してソースコードを自動生成する内容でした。

今回はClapyプラグインを使い、NextJSソースコードを自動生成してローカルで確認する内容となります。

2. Clapyサンプルを取り込む

2-1. Open in Figma

Clapy – Export Figma design to code (React, HTML, CSS) | Figma

2-2. サンプルを選択

Figma basics

3. プラグイン「Clapy」の選択

3-1. Clapy

Plugins
- 「clapy」で検索

「アカウント作成」を済ます
- Sign up

4. ソースコードの生成

4-1. Figma上でFrame「Shopping Cart」を選択＆「Clapy」を検索

ソースコードの自動生成対象

4-2. Generate code

4-3. 「Live preview」を選択

https://xyz.csb.app/

4-4. 「Edit code」を選択

https://codesandbox.io/p/sandbox/xyz?file=%2Fsrc%2FApp.tsx

5. ソースコードのダウンロード

5-1. Advanced options

下記を選択
- Download as zip

5-2. Generate code

ファイルがダウンロードされる
- Code export.zip

5-3. ファイル構成

zipを解凍

.
├── index.html
├── package.json
├── public
│   ├── assets
│   │   ├── edONeilAvvdZlhDowAUnsplash1.jpeg
│   │   ├── k8_fkPHulvMUnsplash2.jpeg
│   │   └── noonbrewZiCb4_EKmakUnsplash.jpeg
│   └── robots.txt
├── src
│   ├── App.module.scss
│   ├── App.tsx
│   ├── components
│   │   ├── ShoppingCart
│   │   │   ├── ButtonIcon.tsx
│   │   │   ├── InputFieldIcon.tsx
│   │   │   ├── InputFieldIcon2.tsx
│   │   │   ├── InputFieldIcon3.tsx
│   │   │   ├── ShoppingCart.module.scss
│   │   │   └── ShoppingCart.tsx
│   │   └── _resets.module.scss
│   ├── favicon.svg
│   ├── main.tsx
│   ├── resets.scss
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

5 directories, 22 files

5-4. 自動生成ソースコードの一部

ShoppingCart.tsx

import { memo } from "react";
import type { FC } from "react";

import resets from "../_resets.module.scss";
import { ButtonIcon } from "./ButtonIcon";
import { InputFieldIcon2 } from "./InputFieldIcon2";
import { InputFieldIcon3 } from "./InputFieldIcon3";
import { InputFieldIcon } from "./InputFieldIcon";
import classes from "./ShoppingCart.module.scss";

interface Props {
  className?: string;
}
/* @figmaId 4368:321123 */
export const ShoppingCart: FC<Props> = memo(function ShoppingCart(props = {}) {
  return (
    <div className={`${resets.clapyResets} ${classes.root}`}>
      <div className={classes.tomato}>
        <div className={classes.heirloomTomato}>Heirloom tomato</div>
        <div className={classes._599}>$5.99</div>
        <div className={classes._599Lb}>$5.99 / lb</div>
        <div className={classes.inputField}>
          <div className={classes._1Lb}>1 lb</div>
          <div className={classes.icon}>
            <InputFieldIcon className={classes.icon2} />
          </div>
        </div>
        <div className={classes.edONeilAvvdZlhDowAUnsplash1}></div>
      </div>
      <div className={classes.ginger}>
        <div className={classes.organicGinger}>Organic ginger</div>
        <div className={classes._1299Lb}>$12.99 / lb</div>
        <div className={classes.inputField2}>
          <div className={classes._5Lb}>0.5 lb</div>
          <div className={classes.icon3}>
            <InputFieldIcon2 className={classes.icon4} />
          </div>
        </div>
        <div className={classes._650}>$6.50</div>
        <div className={classes.noonbrewZiCb4_EKmakUnsplash}></div>
      </div>
      <div className={classes.onion}>
        <div className={classes.sweetOnion}>Sweet onion</div>
        <div className={classes._299Lb}>$2.99 / lb</div>
        <div className={classes.inputField3}>
          <div className={classes._5Lb2}>5 lb</div>
          <div className={classes.icon5}>
            <InputFieldIcon3 className={classes.icon6} />
          </div>
        </div>
        <div className={classes._1495}>$14.95</div>
        <div className={classes.k8_fkPHulvMUnsplash2}></div>
      </div>
      <div className={classes.summary}>
        <div className={classes.orderSummary}>Order summary</div>
        <div className={classes.subtotal}>Subtotal</div>
        <div className={classes._2744}>$27.44</div>
        <div className={classes.shipping}>Shipping</div>
        <div className={classes._399}>$3.99</div>
        <div className={classes.tax}>Tax</div>
        <div className={classes._20}>$2.00</div>
        <div className={classes.total}>Total</div>
        <div className={classes._3343}>$33.43</div>
        <button className={classes.button}>
          <div className={classes.continueToPayment}>Continue to payment</div>
          <div className={classes.icon7}>
            <ButtonIcon className={classes.icon8} />
          </div>
        </button>
      </div>
      <div className={classes.pageHeading}>
        <div className={classes._3Items}>3 items</div>
        <div className={classes.basket}>Basket</div>
        <div className={classes.divider}></div>
      </div>
      <div className={classes.navigation}>
        <div className={classes.worldPeas}>World Peas</div>
        <div className={classes.shop}>Shop</div>
        <div className={classes.newstand}>Newstand</div>
        <div className={classes.whoWeAre}>Who we are</div>
        <div className={classes.myProfile}>My profile</div>
        <button className={classes.cartButton}>
          <div className={classes.basket3}>Basket (3)</div>
        </button>
      </div>
    </div>
  );
});

ShoppingCart.module.css

.root {
  position: relative;
  width: 1440px;
  height: 1024px;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  overflow: hidden;
}
.tomato {
  position: absolute;
  left: 96px;
  right: 523px;
  top: 301px;
  height: 159px;
  flex-direction: column;
  align-items: flex-start;
  outline: solid 2px #e6e6e6;
  outline-offset: -2px;
  border-radius: 24px;
  background-color: #fafaf5;
  overflow: hidden;
}
.heirloomTomato {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 184px;
  top: 24px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._599 {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 24px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
._599Lb {
  color: #426b1f;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 184px;
  top: 54px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.inputField {
  position: absolute;
  left: 184px;
  bottom: 24px;
  width: 128px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  outline: solid 2px #0000000f;
  outline-offset: -2px;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
}
._1Lb {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 16px;
  top: 50%;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
  transform: translateY(-50%);
}
.icon {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 32px;
  height: 32px;
  overflow: visible;
  transform: translateY(-50%);
}
.icon2 {
  width: 100%;
  height: 100%;
}
.edONeilAvvdZlhDowAUnsplash1 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 160px;
  background-image:/* webpackIgnore: true */ url('/assets/edONeilAvvdZlhDowAUnsplash1.jpeg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.ginger {
  position: absolute;
  left: 96px;
  right: 523px;
  top: 491px;
  height: 159px;
  flex-direction: column;
  align-items: flex-start;
  outline: solid 2px #e6e6e6;
  outline-offset: -2px;
  border-radius: 24px;
  background-color: #fafaf5;
  overflow: hidden;
}
.organicGinger {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 184px;
  top: 24px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._1299Lb {
  color: #426b1f;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 184px;
  top: 54px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.inputField2 {
  position: absolute;
  left: 184px;
  bottom: 24px;
  width: 128px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  outline: solid 2px #0000000f;
  outline-offset: -2px;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
}
._5Lb {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-weight: bold;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 16px;
  top: 50%;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
  transform: translateY(-50%);
}
.icon3 {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 32px;
  height: 32px;
  overflow: visible;
  transform: translateY(-50%);
}
.icon4 {
  width: 100%;
  height: 100%;
}
._650 {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 24px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
.noonbrewZiCb4_EKmakUnsplash {
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 160px;
  background-image:/* webpackIgnore: true */ url('/assets/noonbrewZiCb4_EKmakUnsplash.jpeg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.onion {
  position: absolute;
  left: 96px;
  right: 523px;
  top: 681px;
  height: 159px;
  flex-direction: column;
  align-items: flex-start;
  outline: solid 2px #e6e6e6;
  outline-offset: -2px;
  border-radius: 24px;
  background-color: #fafaf5;
  overflow: hidden;
}
.sweetOnion {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 184px;
  top: 24px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._299Lb {
  color: #426b1f;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 184px;
  top: 54px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.inputField3 {
  position: absolute;
  left: 184px;
  bottom: 24px;
  width: 128px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  outline: solid 2px #0000000f;
  outline-offset: -2px;
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
}
._5Lb2 {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-weight: bold;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 16px;
  top: 50%;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
  transform: translateY(-50%);
}
.icon5 {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 32px;
  height: 32px;
  overflow: visible;
  transform: translateY(-50%);
}
.icon6 {
  width: 100%;
  height: 100%;
}
._1495 {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 24px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
.k8_fkPHulvMUnsplash2 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 160px;
  background-image:/* webpackIgnore: true */ url('/assets/k8_fkPHulvMUnsplash2.jpeg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.summary {
  position: absolute;
  left: 949px;
  right: 96px;
  top: 301px;
  height: 318px;
  flex-direction: column;
  align-items: flex-start;
  outline: solid 2px #e6e6e6;
  outline-offset: -2px;
  border-radius: 24px;
  background-color: #fafaf5;
  overflow: hidden;
}
.orderSummary {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 24px;
  top: 24px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.subtotal {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 24px;
  top: 82px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._2744 {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 82px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
.shipping {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 24px;
  top: 119px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._399 {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 119px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
.tax {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 24px;
  top: 156px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._20 {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 156px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
.total {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 24px;
  top: 193px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
._3343 {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 24px;
  top: 190px;
  width: min-content;
  height: min-content;
  text-align: end;
  align-items: end;
  white-space: nowrap;
  flex-direction: column;
}
.button {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 48px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  border-radius: 8px;
  background-color: #426b1f;
  overflow: hidden;
}
.continueToPayment {
  color: #fff;
  font-size: 16px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 24px;
  top: calc(50% - -0.5px);
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
  transform: translateY(-50%);
}
.icon7 {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
}
.icon8 {
  width: 100%;
  height: 100%;
}
.pageHeading {
  position: absolute;
  left: 0;
  right: 0;
  top: 112px;
  height: 149px;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff;
  overflow: hidden;
}
._3Items {
  color: #000;
  font-size: 20px;
  line-height: 130%;
  font-weight: 300;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 301px;
  bottom: 33px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.basket {
  color: #000;
  font-size: 64px;
  line-height: 120%;
  font-family: Newsreader, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  letter-spacing: -0.02em;
  position: absolute;
  left: 96px;
  bottom: 16px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.divider {
  position: relative;
  left: 96px;
  right: 96px;
  bottom: 0;
  max-width: 100%;
  height: 2.0001px;
  max-height: 100%;
  width: 1248px;
}
.divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transform: rotate(0deg);
  height: 0;
  outline: solid 1px #e6e6e6;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.navigation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 112px;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}
.worldPeas {
  color: #426b1f;
  font-size: 32px;
  line-height: 100%;
  font-weight: 500;
  font-family: Newsreader, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  letter-spacing: -0.01em;
  position: absolute;
  left: 96px;
  top: 41px;
  width: min-content;
  height: min-content;
  white-space: nowrap;
  flex-direction: column;
}
.shop {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 657px;
  top: 45.5px;
  width: min-content;
  height: min-content;
  text-align: center;
  align-items: center;
  white-space: nowrap;
  flex-direction: column;
}
.newstand {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 532px;
  top: 45.5px;
  width: min-content;
  height: min-content;
  text-align: center;
  align-items: center;
  white-space: nowrap;
  flex-direction: column;
}
.whoWeAre {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 394px;
  top: 45.5px;
  width: min-content;
  height: min-content;
  text-align: center;
  align-items: center;
  white-space: nowrap;
  flex-direction: column;
}
.myProfile {
  color: #000;
  font-size: 16px;
  line-height: 130%;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  right: 270px;
  top: 45.5px;
  width: min-content;
  height: min-content;
  text-align: center;
  align-items: center;
  white-space: nowrap;
  flex-direction: column;
}
.cartButton {
  position: absolute;
  right: 96px;
  top: 32px;
  width: 126px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 14px 23px;
  border-radius: 4px;
  background-color: #426b1f;
  overflow: hidden;
}
.basket3 {
  color: #fff;
  font-size: 16px;
  line-height: 130%;
  font-weight: 600;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    'Liberation Sans', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min-content;
  height: min-content;
  text-align: center;
  align-items: center;
  white-space: nowrap;
  flex-direction: column;
  transform: translate(-50%, -50%);
}

6. プロジェクトを作成（NextJS）

6-1. プロジェクトを作成

npx create-next-app@latest

Need to install the following packages:
create-next-app@15.0.0
Ok to proceed? (y)

✔ What is your project named? … figma-clapy
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /home/sondon/dev/wsl/nodejs/react/figma-clapy.

6-2. ファイル構成

.
├── README.md
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   └── app
│       ├── favicon.ico
│       ├── fonts
│       │   ├── GeistMonoVF.woff
│       │   └── GeistVF.woff
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.module.css
│       └── page.tsx
└── tsconfig.json

4 directories, 18 files

6-3. ライブラリをインストール

npm i sass

7. サーバーを起動

npm run dev

8. ブラウザで確認

http://localhost:3000

9. プロジェクトにダウンロードファイルをコピー

9-1. 対応内容

「public」に以下をコピー
- public/assets
「src/app」に以下をコピー
- src/components
- src/App.module.scss
- src/App.tsx
- src/favicon.svg
- src/resets.scss
「main.tsx」を「page.tsx」に置き換え

9-2. ソース内から「.js」を削除

9-2-1. App.tsx

import { ShoppingCart } from "./components/ShoppingCart/ShoppingCart.js";
↓
import { ShoppingCart } from "./components/ShoppingCart/ShoppingCart";

9-2-2. components/ShoppingCart.tsx

import { ButtonIcon } from "./ButtonIcon.js";
import { InputFieldIcon2 } from "./InputFieldIcon2.js";
import { InputFieldIcon3 } from "./InputFieldIcon3.js";
import { InputFieldIcon } from "./InputFieldIcon.js";
↓
import { ButtonIcon } from "./ButtonIcon";
import { InputFieldIcon2 } from "./InputFieldIcon2";
import { InputFieldIcon3 } from "./InputFieldIcon3";
import { InputFieldIcon } from "./InputFieldIcon";

9-3. ファイル構成

.
├── README.md
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   │   ├── edONeilAvvdZlhDowAUnsplash1.jpeg
│   │   ├── k8_fkPHulvMUnsplash2.jpeg
│   │   └── noonbrewZiCb4_EKmakUnsplash.jpeg
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   └── app
│       ├── App.module.scss
│       ├── App.tsx
│       ├── components
│       │   ├── ShoppingCart
│       │   │   ├── ButtonIcon.tsx
│       │   │   ├── InputFieldIcon.tsx
│       │   │   ├── InputFieldIcon2.tsx
│       │   │   ├── InputFieldIcon3.tsx
│       │   │   ├── ShoppingCart.module.scss
│       │   │   └── ShoppingCart.tsx
│       │   └── _resets.module.scss
│       ├── favicon.ico
│       ├── favicon.svg
│       ├── fonts
│       │   ├── GeistMonoVF.woff
│       │   └── GeistVF.woff
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.module.css
│       ├── page.tsx
│       └── resets.scss
└── tsconfig.json

7 directories, 32 files