Search

๋””์ž์ธ ํ‚คํŠธ ์ƒ์„ฑ

05. ๋””์ž์ธ ํ‚คํŠธ ์ƒ์„ฑ

๊ฐœ์š”

Figma Make์—์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋””์ž์ธ ํ‚คํŠธ(Design Kit) ๋ฅผ ๋งŒ๋“ค๊ณ , ์ด๋ฅผ Figma Design ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋˜๋Š” npm ํŒจํ‚ค์ง€๋กœ ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค.

๋””์ž์ธ ํ‚คํŠธ ๊ตฌ์„ฑ ์š”์†Œ

1.
๋””์ž์ธ ํ† ํฐ
โ€ข
Color (Primary/Secondary/Semantic)
โ€ข
Typography (Font family, size, weight, line-height)
โ€ข
Spacing (4/8/12/16/24/32...)
โ€ข
Radius, Shadow, Border
2.
๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ
โ€ข
Button, Input, Select, Checkbox, Radio
โ€ข
Card, Modal, Drawer, Tooltip
โ€ข
Navigation, Tabs, Breadcrumb
3.
ํŒจํ„ด / ํ…œํ”Œ๋ฆฟ
โ€ข
Form Layout, List Layout, Dashboard Layout
โ€ข
Empty State, Error State, Loading State
4.
์•„์ด์ฝ˜ ์„ธํŠธ

Make์—์„œ ํ‚คํŠธ ๋งŒ๋“ค๊ธฐ ์ ˆ์ฐจ

1) ํ† ํฐ ์ •์˜

โ€ข
Make ์ฑ„ํŒ…: "๋””์ž์ธ ํ† ํฐ์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•ด์ค˜. Primary: #2563EB, ..."
โ€ข
Make๊ฐ€ tokens.ts ๋˜๋Š” Tailwind config๋กœ ์ƒ์„ฑ

2) ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ

โ€ข
"Button ์ปดํฌ๋„ŒํŠธ๋ฅผ Primary/Secondary/Ghost variant๋กœ ๋งŒ๋“ค์–ด์ค˜"
โ€ข
"์‚ฌ์ด์ฆˆ๋Š” sm/md/lg, disabled ์ƒํƒœ ํฌํ•จ"
โ€ข
๊ฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณ„๋„ ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌ

3) Storybook ๋˜๋Š” ์นดํƒˆ๋กœ๊ทธ ํŽ˜์ด์ง€

โ€ข
Make์— "๊ฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” Showcase ํŽ˜์ด์ง€ ๋งŒ๋“ค์–ด์ค˜" ์š”์ฒญ
โ€ข
์‹œ๊ฐ์  ๊ฒ€์ฆ + ๋””์ž์ด๋„ˆ ํ•ธ๋“œ์˜คํ”„ ์ž๋ฃŒ๋กœ ํ™œ์šฉ

4) Figma Design์œผ๋กœ Export

โ€ข
02.๋””์ž์ธ ๋ณต์‚ฌ ์ ˆ์ฐจ๋กœ ๊ฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ Figma Design์— ์˜ฎ๊น€
โ€ข
Figma์—์„œ Variants / Properties ์ •๋ฆฌ
โ€ข
Figma Library๋กœ ๊ฒŒ์‹œ โ†’ ํŒ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌํ™”

5) npm ํŒจํ‚ค์ง€ํ™” (์„ ํƒ)

โ€ข
04.ํ†ตํ•ฉํ•˜๊ธฐ > Figma npm registry ์ ˆ์ฐจ
โ€ข
๋˜๋Š” ์ž์ฒด GitHub Packages / npmjs๋กœ ๋ฐฐํฌ

ํ‚คํŠธ ์šด์˜ ๊ฐ€์ด๋“œ๋ผ์ธ

โ€ข
๋ฒ„์ €๋‹: SemVer ์ค€์ˆ˜ (1.0.0, 1.1.0, 2.0.0)
โ€ข
Changelog: ์ปดํฌ๋„ŒํŠธ ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๊ธฐ๋ก
โ€ข
Breaking Change: Major bump + ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ฐ€์ด๋“œ
โ€ข
๋””์ž์ด๋„ˆ-๊ฐœ๋ฐœ์ž ํ•ฉ์˜: ํ† ํฐ ์ด๋ฆ„์€ ์–‘์ชฝ ๊ณตํ†ต์–ด๋กœ ์‚ฌ์šฉ

ํ”ํ•œ ์‹ค์ˆ˜

โ€ข
HEX ๊ฐ’์„ ์ง์ ‘ ์‚ฌ์šฉ (Variable/Token ๋ฏธ์‚ฌ์šฉ)
โ€ข
์ปดํฌ๋„ŒํŠธ๋งˆ๋‹ค spacing ์ž„์˜ ์‚ฌ์šฉ
โ€ข
Make ๊ฒฐ๊ณผ๋ฌผ์„ ๊ทธ๋Œ€๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌํ™” โ†’ ์ผ๊ด€์„ฑ ๋ถ€์กฑ
โ€ข
Figma Variants ๋ฏธ์ •์˜ โ†’ ๋””์ž์ด๋„ˆ ์ธก ์žฌ์‚ฌ์šฉ์„ฑ ์ €ํ•˜

๋‹ค์Œ ๋‹จ๊ณ„

โ€ข
06.๊ฐ€์ด๋“œ๋ผ์ธ.md โ€” ํ‚คํŠธ ์‚ฌ์šฉ/์œ ์ง€๋ณด์ˆ˜ ๊ทœ์น™
โ€ข
03.Figma ํ™œ์šฉ ์ „๋žต / 01.Figma Make ๋””์ž์ธ ์‹œ์Šคํ…œ ํ‚คํŠธ.md โ€” ์ „๋žต์  ํ™œ์šฉ