02. ๋์์ธ ๋ณต์ฌ (Figma Make โ Figma Design)
๊ฐ์
Figma Make์์ ์์ฑํ UI๋ฅผ Figma Design ํ์ผ๋ก ๋ณต์ฌํ์ฌ, ๋์์ด๋๊ฐ ๋ฒกํฐ ๊ธฐ๋ฐ์ผ๋ก ์์ ํ๊ฑฐ๋ ๋์์ธ ์์คํ
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํตํฉํ ์ ์์ต๋๋ค.
๋์ ์๋ฆฌ
1.
Make๊ฐ ์์ฑํ React ์ปดํฌ๋ํธ์ ๋ ๋๋ง๋ DOM ํธ๋ฆฌ๋ฅผ ๋ถ์
2.
๊ฐ ์์๋ฅผ Figma Node(Frame, Text, Rectangle, AutoLayout ๋ฑ)๋ก ๋งคํ
3.
Tailwind ํด๋์ค โ Figma Style Property ๋ณํ
4.
Auto Layout ๊ตฌ์กฐ ๋ณด์กดํ์ฌ Figma Design์ ๋ถ์ฌ๋ฃ๊ธฐ
๋จ๊ณ๋ณ ์ ์ฐจ
1) Make์์ ๋์์ธ ๋ณต์ฌ
โข
์ฐ์ธก ์๋จ Copy to Figma ๋ฒํผ ํด๋ฆญ
โข
๋๋ ์ปดํฌ๋ํธ ์ฐํด๋ฆญ โ Copy as Figma
2) Figma Design์์ ๋ถ์ฌ๋ฃ๊ธฐ
โข
๋์ ํ์ด์ง/ํ๋ ์ ์ ํ
โข
Ctrl + V (Windows) / Cmd + V (Mac)
โข
์๋์ผ๋ก Auto Layout์ด ์ ์ฉ๋ Frame์ผ๋ก ์ฝ์
๋จ
3) ๊ฒ์ฆ ์ฒดํฌ๋ฆฌ์คํธ
ํฐํธ๊ฐ ๋๋ฝ๋์ง ์์๋๊ฐ? (Make์ ์น ํฐํธ 
Figma ๋ก์ปฌ ํฐํธ ๋งคํ)
Figma ๋ก์ปฌ ํฐํธ ๋งคํ)Color Token์ด ๋จ์ HEX๊ฐ ์๋ Variable๋ก ๋งคํ๋์๋๊ฐ?
Auto Layout ๋ฐฉํฅ(๊ฐ๋ก/์ธ๋ก)์ด ์๋๋๋ก์ธ๊ฐ?
์ด๋ฏธ์ง/์์ด์ฝ์ด SVG๋ก ๋ค์ด์๋๊ฐ, ๋นํธ๋งต์ผ๋ก ๋ค์ด์๋๊ฐ?
์ฃผ์์ฌํญ / ํ๊ณ
โข
์ธํฐ๋์
/์ํ(hover, disabled ๋ฑ)๋ ๋ณต์ฌ๋์ง ์์ โ Variants ์๋ ๊ตฌ์ฑ ํ์
โข
๋ฐ์ํ ๋ธ๋ ์ดํฌํฌ์ธํธ๊ฐ ๋จ์ผ ํ๋ ์์ผ๋ก ๋ณํ๋จ
โข
๋ณต์กํ ์ปดํฌ๋ํธ(์ฐจํธ, ๋ฐ์ดํฐ ํ
์ด๋ธ)๋ PNG๋ก falling back ๋ ์ ์์
โข
๋ณต์ฌ ํ Figma Design ์ธก ์์ ์ฌํญ์ Make๋ก ์ญ๋ฐฉํฅ ๋ฐ์๋์ง ์์
์ค๋ฌด ํ
โข
๋ณต์ฌ ์ , Make์์ ์ปดํฌ๋ํธ ๋จ์๋ก ๋ถ๋ฆฌํด๋๋ฉด Figma์์ ์ฌ์ฌ์ฉ์ฑ์ด ๋์
โข
Figma Variables(Color/Spacing)๋ฅผ ๋ฏธ๋ฆฌ ์ ์ํ๊ณ , Make ์ธก ๋์์ธ ํ ํฐ ์ด๋ฆ๊ณผ ๋ง์ถ๋ฉด ๋งคํ ํ์ง ํฅ์
โข
ํ์ด์ง ์ ์ฒด ๋ณต์ฌ๋ณด๋ค ์น์
๋จ์ ๋ณต์ฌ โ ์กฐ๋ฆฝ ๋ฐฉ์ ๊ถ์ฅ
ํ์ฉ ์๋๋ฆฌ์ค
โข
AI๋ก ๋น ๋ฅด๊ฒ ํ๋ฉด ์์ฑ โ ๋์์ด๋๊ฐ Figma Design์์ ํด๋ฆฌ์ฑ
โข
Make ๊ฒฐ๊ณผ๋ฌผ์ ๋์์ธ ์์คํ
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฑ๋ก
โข
03.Figma ํ์ฉ ์ ๋ต์ "Make to Design & Code" ์ผ๋ฐฉํตํ ์ฑํฌ ์ ๋ต์ ํต์ฌ ๋จ๊ณ