Search

Figma Make ๋ž€

01. Figma Make ๋ž€?

๊ฐœ์š”

Figma Make๋Š” Figma์—์„œ ์ œ๊ณตํ•˜๋Š” AI ๊ธฐ๋ฐ˜ ์ฝ”๋“œ ์ƒ์„ฑ/ํ”„๋กœํ† ํƒ€์ดํ•‘ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์ž์—ฐ์–ด ํ”„๋กฌํ”„ํŠธ ๋˜๋Š” ๊ธฐ์กด Figma ๋””์ž์ธ์„ ์ž…๋ ฅ์œผ๋กœ ๋ฐ›์•„, ๋™์ž‘ ๊ฐ€๋Šฅํ•œ React + Tailwind ๊ธฐ๋ฐ˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

ํ•ต์‹ฌ ํŠน์ง•

โ€ข
ํ”„๋กฌํ”„ํŠธ ๊ธฐ๋ฐ˜ UI ์ƒ์„ฑ: "๋Œ€์‹œ๋ณด๋“œ ํŽ˜์ด์ง€ ๋งŒ๋“ค์–ด์ค˜" ๊ฐ™์€ ์ž์—ฐ์–ด ์ž…๋ ฅ๋งŒ์œผ๋กœ ๋™์ž‘ํ•˜๋Š” UI ์ƒ์„ฑ
โ€ข
Figma Design ์—ฐ๋™: ๊ธฐ์กด Figma ๋””์ž์ธ ํ”„๋ ˆ์ž„์„ ๋ถ™์—ฌ๋„ฃ์–ด ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜
โ€ข
์‹ค์‹œ๊ฐ„ ํ”„๋ฆฌ๋ทฐ: ์ฝ”๋“œ์™€ ํ”„๋ฆฌ๋ทฐ๊ฐ€ ๋™์‹œ์— ๊ฐฑ์‹ ๋˜๋Š” ๋ผ์ด๋ธŒ ์—๋””ํ„ฐ
โ€ข
์ฆ‰์‹œ ๋ฐฐํฌ(Publish): ๋ณ„๋„ ํ˜ธ์ŠคํŒ… ์„ค์ • ์—†์ด URL ๊ธฐ๋ฐ˜ ๊ฒŒ์‹œ ๊ฐ€๋Šฅ
โ€ข
AI ์ฑ„ํŒ… ๊ธฐ๋ฐ˜ ์ˆ˜์ •: ์ƒ์„ฑ๋œ UI๋ฅผ ์ž์—ฐ์–ด ๋Œ€ํ™”๋กœ ๊ณ„์† ์ˆ˜์ •

Figma Design vs Figma Make

ํ•ญ๋ชฉ
Figma Design
Figma Make
๊ฒฐ๊ณผ๋ฌผ
๋ฒกํ„ฐ ๊ธฐ๋ฐ˜ ๋””์ž์ธ ํŒŒ์ผ
์‹คํ–‰ ๊ฐ€๋Šฅํ•œ React ์ฝ”๋“œ
ํŽธ์ง‘ ๋ฐฉ์‹
์‹œ๊ฐ์  ๋“œ๋ž˜๊ทธ/์†์„ฑ ํŒจ๋„
ํ”„๋กฌํ”„ํŠธ + ์ฝ”๋“œ
์ธํ„ฐ๋ž™์…˜
ํ”„๋กœํ† ํƒ€์ž…(์‹œ๋ฎฌ๋ ˆ์ด์…˜)
์‹ค์ œ ๋™์ž‘ ์ฝ”๋“œ
์ถœ๋ ฅ
PNG, PDF, ๊ฐœ๋ฐœ ์ŠคํŽ™
์›น ์•ฑ, Git, ์ปดํฌ๋„ŒํŠธ

์ฃผ์š” ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค

1.
์•„์ด๋””์–ด ์Šค์ผ€์น˜ โ†’ ์ฆ‰์‹œ ๋™์ž‘ํ•˜๋Š” ํ”„๋กœํ† ํƒ€์ž…
2.
๋””์ž์ธ ์‹œ์Šคํ…œ ๊ธฐ๋ฐ˜ ํŽ˜์ด์ง€ ์ž๋™ ์ƒ์„ฑ
3.
๊ฐœ๋ฐœ์ž ํ•ธ๋“œ์˜คํ”„ ์—†์ด ๋น ๋ฅธ MVP ์ œ์ž‘
4.
Figma Design๊ณผ์˜ ์–‘๋ฐฉํ–ฅ ์‹ฑํฌ๋ฅผ ํ™œ์šฉํ•œ ๋””์ž์ธ-์ฝ”๋“œ ํ†ตํ•ฉ

์ œ์•ฝ์‚ฌํ•ญ

โ€ข
๋ณต์žกํ•œ ์ƒํƒœ ๊ด€๋ฆฌ/์„œ๋ฒ„ ๋กœ์ง์€ ๋ณ„๋„ ํ†ตํ•ฉ(Supabase, GitHub ๋“ฑ) ํ•„์š”
โ€ข
AI ์ƒ์„ฑ๋ฌผ์ด๋ฏ€๋กœ ๋””์ž์ธ ์‹œ์Šคํ…œ ์ผ๊ด€์„ฑ์€ ์‚ฌ์šฉ์ž๊ฐ€ ๊ด€๋ฆฌํ•ด์•ผ ํ•จ
โ€ข
ํ˜„์žฌ ๋ฒ ํƒ€/์ง„ํ™” ์ค‘์ธ ์ œํ’ˆ โ†’ ๊ธฐ๋Šฅ/UI ๋ณ€๊ฒฝ ์žฆ์Œ

ํ•™์Šต ํฌ์ธํŠธ

โ€ข
Make๋Š” "๋””์ž์ธ โ†’ ์ฝ”๋“œ"์˜ ์ƒˆ๋กœ์šด ๋ฐฉํ–ฅ์„ฑ์„ ์ œ๊ณต
โ€ข
๊ธฐ์กด Design-to-Code ์‹ฑํฌ ๋ฌธ์ œ๋ฅผ ์žฌ์ •์˜ํ•˜๋Š” ๋„๊ตฌ
โ€ข
์ดํ›„ ์„น์…˜์—์„œ Figma MCP์™€ ๊ฒฐํ•ฉํ•ด ์ž๋™ํ™” ํŒŒ์ดํ”„๋ผ์ธ์œผ๋กœ ํ™•์žฅ