๋์์ธ ์์คํ with ํผ๊ทธ๋ง
์ด ๊ฐ์๋ฅผ ํตํด ๋์์ธ ์์คํ ์ ๊ตฌ์ถํ๊ณ ๋ด ๋์์ธ ์์ ๋ฌผ์ด ๊ฐ์ง๋ ํญ๋ฐ์ ์ธ ์๋์ง๋ฅผ ๋๊ปด๋ณด์ธ์.
์๊ฐ์ 1,558๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ํด๊ฒฐ
์๋ ํ์ธ์! ๊ฐ์์ ๋ค์์ต๋๋ค.
์ข์๊ฐ์ ์ ๋ค์์ต๋๋ค :) ์ํ ๋ฏน๋์์ธ ์์คํ ์๋ํ ์๋ฆฌ์ ๊ฐ๋ฐ์ ๊ด์ (?)์์์ ๊ตฌ์กฐ์ ์ค๋ช ์ด๋ผ ์กฐ๊ธ ๋ ์๋ก ์ ์ผ๋ก ์ ์๋ฟ์์ด์! (ํ๋ฐ๋ถ์ ์ค์ ๋ก git์ ํธ์ํ๊ณ ๋๊ธฐํํ๋ ๋ด์ฉ์ด ์ฐธ ํฅ๋ฏธ๋ก์ ์ด์)<p
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธMeaw
ใป
2์ผ ์
0
27
2
- ๋ฏธํด๊ฒฐ
ํ์ดํฌ๊ทธ๋ํผ 16 -> 14 ๋ณ๊ฒฝ ์ XXXL๋ง ๋ณ๊ฒฝ ์ ๋จ
<img src="https://cdn.inflearn.com/public/files/posts/8b17c28d-17d3-470d-bb6e-ebf5b14a7c4a/95d3fadd-3653-46bd-8dfc-a03b99862c86.png" media-type="img"
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธcs
ใป
11์ผ ์
0
31
1
- ํด๊ฒฐ
ํ ํฐ์คํ๋์ค์์ ํฐํธ ์คํ์ผ๋ฑ๋ก ๋ฌธ์
์๋ ํ์ธ์. ํ ํฐ์ ๋ฐฐ์ฐ๊ณ ์๋ ๋์์ด๋์ ๋๋ค ํฐํธ ์คํ์ผ ๋ฑ๋ก์ ํ ํฐ Sizing > Scale(1.333) ๊ฐ์ ๋ชป๋ถ๋ฌ์ค๊ณ <img src="https://cdn.inflearn.com/public/
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธBoyoung Choi
ใป
2๋ฌ ์
0
51
2
- ํด๊ฒฐ
ํ ํฐ์์ style๋ก export์ ์๋ฌ
ํ ํฐ์์ style๋ก export ํ๋ ์๋ฌ๊ฐ ๋จ๋๋ฐ์ใ <img src="https://cdn.inflearn.com/public/files/posts/df42ef73-5a6e-4ad1-b516-3b3a5ab0b
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์์ฑ์ ์์
ใป
2๋ฌ ์
0
58
2
- ํด๊ฒฐ
์ปฌ๋ฌ์์คํ ๋ฑ๋ก ๊ด๋ จ
<img src="https://cdn.inflearn.com/public/files/posts/55b93725-aff9-4ff5-9d8f-cae05350e1c6/a0acaab1-f85e-4654-98e1-e3660fbfa67d.png" media-type="img"
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ๋ฐ๋ฏธ์
ใป
3๋ฌ ์
0
57
2
- ํด๊ฒฐ
ํ ํฐ light/dark mode ์ค๋ฅ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ๋ฐ๋ฏธ์
ใป
3๋ฌ ์
0
52
2
- ํด๊ฒฐ
Pretendard ์์ผ๋ฉด ์๋ฌ๋ฉ๋๋ค
์๋ ํ์ธ์!๊ฐ์์์ Pretendard ๊ธ๊ผด์ ๊ธฐ๋ฐ์ผ๋ก ์ค๋ช ํ์ จ์ง๋ง,<p style="text-align: left"
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธqjatjs123123
ใป
3๋ฌ ์
0
152
2
- ํด๊ฒฐ
ํฐํธ ํ ํฐ ์์ ํ ๋
์ ๊ฐ ๋ฑ๋กํ๋ ค๋ ํฐํธ ์ฌ์ด์ฆ๊ฐ ํฐ๋์ heading ์ต์ ์ฌ์ด์ฆ๊ฐ 20๋ถํฐ ์์ํ๋๋ฐ์ default ์ฌ์ด์ฆ๋ฅผ ๊ทธ๋ฅ ์ฒ์๋ถํฐ 24 ๋ก ๋ง๋ค์ด๋ ๋๋๊ฑด๊ฐ์? default ์ฌ์ด์ฆ์ ์๋ฏธ๊ฐ ์๋๊ฑธ๊น์?
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
1
81
3
- ํด๊ฒฐ
์ฌ๊ธฐ ์์ ์์ ์๋ก์ฐ๋ ๋ ๋๋ ๋ธ๋ฃจ ์ด๋ฐ ์ปฌ๋ฌ๋ค์ ๋ค์ํ๊ฒ ๋ง๋๋ ์ด์ ๊ฐ ๋ญ๊ฐ์?
์ฌ๊ธฐ ์์ ์์ ์๋ก์ฐ๋ ๋ ๋๋ ๋ธ๋ฃจ ์ด๋ฐ ์ปฌ๋ฌ๋ค์ ๋ค์ํ๊ฒ ๋ง๋๋ ์ด์ ๊ฐ ๋ญ๊ฐ์? ์ฌ๊ธฐ์ ๋ณด๋ฉด ์ฌ์ฉํ์ง๋ ์๋๊ฑฐ ๊ฐ์๋ฐ ํ์ ์์ด ๋ง๋ ๊ฑด์ง? ์๋๋ฉด ์ด์ ๊ฐ ์๋๊ฑด์ง ๊ถ๊ธ ํฉ๋๋ค
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
0
43
2
- ํด๊ฒฐ
ํ ํฐ์ ๊นํ๋ธ์ ์ฌ๋ฆฌ๋ ๋ฐฉ๋ฒ์ด ์์ด์ง๊ฑฐ ๊ฐ์๋ฐ์
ํ ํฐ์ ๊นํ๋ธ์ ์ฌ๋ฆฌ๋ ๋ฐฉ๋ฒ์ด ์์ด์ง๊ฑฐ ๊ฐ์๋ฐ์ .
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
1
67
2
- ํด๊ฒฐ
ํ ํฐ export ํ ๋ ์ด๋ป๊ฒ ํด์ผ ํ๋์? ๋ฒ์ ์ด ๋ฐ๋์ด์ ๊ทธ๋ฐ์ง ๋ชป์ฐพ๊ฒ ์ด์
ํ ํฐ export ํ ๋ ์ด๋ป๊ฒ ํด์ผ ํ๋์? ๋ฒ์ ์ด ๋ฐ๋์ด์ ๊ทธ๋ฐ์ง ๋ชป์ฐพ๊ฒ ์ด์
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
0
142
2
- ํด๊ฒฐ
์ธํ๋ฐ ํ ๋๋ง๋ค ์ง์ฆ๋๋๋ฐ ์์ ๋ด์ฉ์ด ๋๋ฌด ์ค๋๋๊ฑด ์ ๋ฐ ์ญ์ ์ข ํ๋์ง ๋ค์ ์ฐ๋์ง ํด์ฃผ์ธ์
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
1
66
1
- ํด๊ฒฐ
tailwind color generator ์ด๊ฒ ์๋์ด ์ ์๋๋ค์
์ด ํ๋ฌ๊ทธ์ธ ๋ค์ด๊ฐ์ gray ๋ผ๊ณ ์น๋ฉด ์ปฌ๋ฌ๊ฐ 9๊ฐ ์ธ๊ฐ์? ์ด๊ฒ ์๋์ค๊ณ ๊ทธ๋ฅ ๋จ์ง ์๋ ์๋์ค๋ 100์ด๋ผ๋ ๊ธ์ ํ๋๋ง ๋์ค๋๋ฐ์ <img src="https://cdn.inflearn.com/p
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
0
57
2
- ํด๊ฒฐ
figma tokensํ๋ฌ๊ทธ์ธ ์๋์ค๋๋ฐ์??
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ง์
ใป
4๋ฌ ์
0
97
2
- ํด๊ฒฐ
ํน์ ํ ํฐ ๊ฐ๊ณตํ ์ ์๋ ๊ฐ์๋ ๋ฐ๋ก ์์๊น์??
์๋ ํ์ธ์!ํ ํฐ๊ฐ๊ณต์ ๊ฐ๋ฐ์๋ถ๊ป ๋ฐ๋ก ๊ฐ์ํด์ฃผ์ ๋ค๊ณ ํ์ จ๋๋ฐ,ํน์ ํ ํฐ ๊ฐ๊ณตํ๋ ๋ฐฉ๋ฒ์ด ์๋ ๊ฐ์๋ ๋ฐ๋ก ์์๊น์??
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธSOHYE KIM
ใป
5๋ฌ ์
1
43
2
- ํด๊ฒฐ
ํผ๊ทธ๋ง ๋ฐฐ๋ฆฌ์ด๋ธ์ export์ ๊ฐ ์ ์ฅ ์๋จ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ด๋ค์
ใป
7๋ฌ ์
0
169
3
- ํด๊ฒฐ
Style - variable ๋ฌธ์ผใ ฃ ใ ใ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ด๋ค์
ใป
7๋ฌ ์
0
58
2
- ํด๊ฒฐ
borderTransparent ์ํฌํธ๊ฐ ์๋ฉ๋๋ค
ํผ๊ทธ๋ง์์ borderTransparent๋ฅผ ๋ง๋ค๊ณ ํ ํฐ์ ์ํฌํธํ๋ ค๊ณ ํ๋๋ฐ๋ผ์ดํธ ๋ชจ๋์์ ์ํฌํธ๋ฅผ ํ ํ์ ๋คํฌ๋ชจ๋์ ์ํฌํธํ๋ ค๊ณ ํ๋ฉด ์์์ด ๋ณด์ด์ง ์์ต๋๋ค
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ ๋ผ
ใป
8๋ฌ ์
0
55
2
- ํด๊ฒฐ
ํ๋ฉด์ด ๋ณด์ด์ง๊ฐ ์์์?
๊ธฐ์กด ์๊ฐ์์ธ๋ฐ ํ๋ฉด์ด ๋ณด์ด์ง ์๊ณ ์๋ฆฌ๋ง ๋ค๋ฆฝ๋๋ค.
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธjj4249
ใป
9๋ฌ ์
0
60
1
- ํด๊ฒฐ
์ปฌ๋ฌ๋งตํํ๊ณ ๋ผ์ดํธ/๋คํฌ ๋ชจ๋ ์ค์ ์ ์์ ๋ฐ์ ์ด ์๋ผ์ ใ ใ
์ ์๋ ์ปฌ๋ฌ ๋งตํ๊น์ง ์ ๋ฐ๋ผํ๊ณ ์๋๋ฐ ๋งตํ ํ ๋ผ์ดํธ ๋คํฌ๋ชจ๋ ์ง์ ํ๋ฉด ์ ์๋์ฒ๋ผ ์์ ๋ฐ์ ์ด ์ผ์ด๋์ผ ํ๋๋ฐ ์๋ฌด ๋ฐ์์ด ์์ด์ ใ ใ ์ ๊ทธ๋ฐ๊ฑธ๊น์...
figmafigma-tokens๋์์ธ-์์คํ ์ํ ๋ฏน-๋์์ธํ๋ก๋ํธ๋์์ธ์ด์์ฐ
ใป
1
249
2






