- 概要
- Clapyサンプルを取り込む
- プラグイン「Clapy」の選択
- ソースコードの生成
- ソースコードのダウンロード
- プロジェクトを作成(NextJS)
- サーバーを起動
- ブラウザで確認
- プロジェクトにダウンロードファイルをコピー
- ブラウザで確認(コピー後)
- 備考
- 参考
1. 概要
前回はLocofy.aiを利用してソースコードを自動生成する内容でした。
今回はClapyプラグインを使い、NextJSソースコードを自動生成してローカルで確認する内容となります。
2. Clapyサンプルを取り込む
2-1. Open in 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
10. ブラウザで確認(コピー後)
- http://localhost:3000

11. 備考
今回はClapyプラグインを使い、NextJSのソースコードを自動生成する内容でした。
12. 参考
- Figma: The Collaborative Interface Design Tool
- Material Design
- Introducing Material Design Guidance for Large Screens – Material Design
- Start Here: 5 Exercises to Prepare Your App for Large Screens – Material Design
- Understanding layout – Material Design
- グリッドを使用したよくあるレイアウトの実現 – CSS: カスケーディングスタイルシート | MDN (mozilla.org)
- WEBデザイン・プログラミング関連の情報発信を手掛ける STAND4U (stand-4u.com)
- Clapy – Export Figma design to code (React, HTML, CSS) | Figma
投稿者プロフィール

-
開発好きなシステムエンジニアです。
卓球にハマってます。
最新の投稿
【Next.js】2025年2月9日【NextJS】View and Download PDF
【AWS】2025年2月1日【AWS】Github ActionsやAWS SAMを使ってAWS S3・CloudFrontにウェブコンテンツをデプロイし、サブドメインにアクセスできるようにする
【AWS】2025年1月25日【AWS】Deploy Serverless NextJS app with AWS Lambda Web Adapter using AWS SAM
【Next.js】2025年1月16日【NextJS】Access nextjs app launched on WSL2 from an external terminal