ํผ๊ทธ๋ง(Figma)๋ฅผ ํ์ฉํ UI๋์์ธ ์ ๋ฌธ๋ถํฐ ์ค์ ๊น์ง A to Z
๋์์ธ์ ๊ณต๋ถํด๋ณธ ์ ์ด ์๋ ๋น์ ๊ณต์ ๋ถ๋ค, ์ด์ ๋ง UX๋์์ธ์ ๊ณต๋ถํ๊ธฐ ์์ํ ํ์๋ค, UX ๋ฐ UI ๋์์ธ ์ทจ์ค์ ๋ถ๋ค์ ์ํด ์ค๋นํ "ํผ๊ทธ๋ง๋ก UI๋์์ธํ๊ธฐ A to Z" ์์ ์ ๋๋ค. ํฌํ ์ต ๋ฑ ๋ค๋ฅธ ํด์ ์ ํ ๋ชจ๋ฅด๋ ๋ถ๋ ํผ๊ทธ๋ง๋ง ํ์ฉํด UI๋์์ธ ์ ๋ฌธ๊ฐ๊ฐ ๋ ์ ์๋๋ก ๊ธฐ์ด๋ถํฐ ๊ณ ๊ธ ๊ธฐ๋ฅ๊น์ง ์๋ ค๋๋ฆฝ๋๋ค.
์๊ฐ์ 3,565๋ช
๋์ด๋ ์ ๋ฌธ
์๊ฐ๊ธฐํ 36๊ฐ์
- ๋ฏธํด๊ฒฐ
ํ๋ ์ ์กฐ์ ๊ด๋ จ
ํ๋ ์์ ์ฌ์ด์ฆ๋ฅผ ์กฐ์ ํ๋ ค๊ณ ์ถ์ํ ๋ ๋ฒกํฐ์ ๊ฒฝ์ฐ ํ๋ ์๊ณผ ํจ๊ป ์ฌ์ด์ฆ๊ฐ ์ค์ด๋ค๊ณ ์์น๊ฐ ์กฐ์ ๋์ด ๋ฌธ์ ๋๋ฆฝ๋๋ค. ํ๋ ์์ ์ฌ์ด์ฆ๋ฅผ ์กฐ์ ํ ๋ ๋ฒกํฐ ์ฌ์ด์ฆ์ ์์น๋ฅผ ๊ณ ์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ธ๊ฐ์? ๋ฒกํฐ ์ด๋ฏธ์ง๋ฅผ ๊ณ ์
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ12334152124
ใป
21์๊ฐ ์
0
7
1
- ๋ฏธํด๊ฒฐ
arrow auto ํ๋ฌ๊ทธ์ธ์ด ๊ฒ์ํด๋ ์๋์ค๋๋ฐ ๋์ฒดํ ๋ค๋ฅธํ๋ฌ๊ทธ์ธ ์ถ์ฒํด์ฃผ์ค์์์๊น์ ?
arrow auto ํ๋ฌ๊ทธ์ธ์ด ๊ฒ์ํด๋ ์๋์ค๋๋ฐ ๋์ฒดํ ๋ค๋ฅธํ๋ฌ๊ทธ์ธ ์ถ์ฒํด์ฃผ์ค์์์๊น์ ?
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ์ง์์ํํธ2
ใป
3๋ฌ ์
0
48
1
- ๋ฏธํด๊ฒฐ
์ค๋ธ์ ํธ๊ฐ ๊ฐ๊ฒฉ 4px ์ฃผ์๋ ์ด์ ๊ฐ ๊ตฌ์ฒด์ ์ผ๋ก ๊ถ๊ธํฉ๋๋ค.
์๋ ํ์ธ์.์ข์ ์์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.์ด ์์ ์์ ๊ฐ๊ฒฉ์ 4์ ๋ฐฐ์๋ก ์ฃผ์ ๋ค๊ณ ํ๋๋ฐ ๊ทธ ์ด์ ๊ฐ ์ ์ดํด๊ฐ
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธmsju8100
ใป
5๋ฌ ์
0
93
0
- ๋ฏธํด๊ฒฐ
ํ๋จ๋ฐ ๊ณ ์
<img src="https://cdn.inflearn.com/public/files/posts/14dc1864-37a9-409c-8050-ab22820649f3/db345139-dd7d-4ce7-be5c-55523fc914f8.png" medi
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ์ฟ ๋ง๋ผ
ใป
7๋ฌ ์
0
272
2
- ๋ฏธํด๊ฒฐ
๋ํ ์คํ ๋ ์ด์์ ์ค์
์๋ ํ์ธ์. ๊ฐ์ ๋ด์ฉ์ ๋ณด๋ค๊ฐ ๊ถ๊ธํ ์ ์ด ์์ด ๋ฌธ์๋๋ฆฝ๋๋ค.๊ฐ์์์๋ ๋ํ(Rectangle) + ํ ์คํธ๋ฅผ Auto Layout์ผ๋ก ๋ฌถ์ผ๋ฉด</s
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ์ตํ๋ฏผ
ใป
7๋ฌ ์
0
116
2
- ๋ฏธํด๊ฒฐ
๋จ๋ฝ๋ณ ํ๊ฐ ์กฐ์
์ ์๋์ ํ๋ฉด์ ๋์ค๋ ๋จ๋ฝ๋ณํ๊ฐ ์กฐ์ ํ ์ ์๋๊ฒ ์๋จ๋๋ฐ ์ด๋๋ก ๊ฐ๋ฉด ์ฐพ์์ ์๋์?์๋์ฐ์ ๋๋ค!<img src="https://cdn.inflearn
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธํ์ ์
ใป
7๋ฌ ์
0
79
2
- ๋ฏธํด๊ฒฐ
์๊ฐ๊ธฐํ ์ฐ์ฅ ๊ด๋ จ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์,์๋ ์ ๊ฐ์๋ฅผ ๊ฒฐ์ ํ ์๊ฐ์์ ๋๋ค.๊ฐ์ธ์ ์ธ ์ฌ์ ์ผ๋ก ์ธํด ์๋ ์๋ ๊ฐ์๋ฅผ ์ ๋๋ก ์๊ฐํ์ง ๋ชปํ
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ๊น๊ฐ์
ใป
8๋ฌ ์
0
76
2
- ๋ฏธํด๊ฒฐ
24ํ ์ง๋ฌธ์ธ๋ฐ ๋ํ ์ ํํด๋ layer๊ฐ ์ ๋น๋๋ค
ํผ๊ทธ๋ง ๋ฉ๋ด๊ฐ ์กฐ๊ธ์ฉ ์ ๋ฐ์ดํธ ๋๋ฉด์ ๋ฌ๋ผ์ง ๋ชจ์์ธ๋ฐ ๋ํ ์ ํํ๋ฉด layer๋ก layer ๊ฒน์น ๋ ํจ๊ณผ๋ฅผ ๋ฌ๋ฆฌ ์ค ์ ์๋ค ํ์ จ๋๋ฐ layer ๋ฉ๋ด๊ฐ ์ ํํด๋ ์๋๋ฐ ์ด๋์ ์ฐพ์ ์ ์๋์?
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธํํ์ง
ใป
8๋ฌ ์
0
147
3
- ๋ฏธํด๊ฒฐ
go back to previous(์ด์ ๋ฒ์ ์ผ๋ก ๊ฐ๊ธฐ) ๊ฐ ์๋น๋๋ค
<img src="https://cdn.inflearn.com/public/files/posts/50dc545d-7686-4d11-95a9-faca3c8948cd/c207c082-6c5c-49a7-a9ac-3952f42bb14d.png" medi
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ์ด์๋ฏผ
ใป
10๋ฌ ์
0
314
3
- ๋ฏธํด๊ฒฐ
Auto Layout ์ ์ฉ์ด ๋์ง ์์ต๋๋ค
์๋ ํ์ธ์์คํ ๋ ์ด์์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๊ฒฝ์ฐFrame์ ์ผ๋ถ ๊ธฐ๋ฅ์ด Fixed๋ก ๊ธฐ๋ณธ ์ง์ ๋์ด ์ง์ Hug
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ์ด์๋น
ใป
์ผ ๋ ์
0
342
2
- ๋ฏธํด๊ฒฐ
SF Symbols ์๋์ฐ
๊ฐ์ฌ๋!SF Symbols ๋ค์ด๋ก๋ ๋ฐ์๋๋ฐ ์๋์ฐ๋ผ ํ์ผ์ด ํธํ์ด ์๋๋ ๊ฑฐ ๊ฐ์ต๋๋ค. ์๋์ฐ์์ ์ด๋ป๊ฒ ํ์ฉํ๋์ง ์๋ ค์ฃผ์ค ์ ์์ผ์ ๊ฐ์?
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธ์ ์ง์
ใป
0
330
2
- ๋ฏธํด๊ฒฐ
์น์ 13 ์ง๋ฌธ์ ๋๋ค. Asset์ Toolbar๊ฐ ๋จ์ง ์์ต๋๋ค
์น์ 13 ์ง๋ฌธ์ ๋๋ค.ํผ๊ทธ๋ง ํฌํ๋ฆฟ์์ ctrl c + ctrl v ํ์ ๊ฐ์ฌ๋ ๊ฐ์์์๋ asset์ ์ ํํ๋ฉด toolbar์์ asset์ด ๋จ์ง๋ง, ์ ๊บผ์์๋ ๋จ์ง ์์ต๋๋ค.... ๋ค๋ฅธ ios example์ด ๋ ์์.detach๋ ๋
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธcompile62
ใป
0
123
2
- ๋ฏธํด๊ฒฐ
Constraint๊ธฐ๋ฅ์์ Top & Bottom ๊ธฐ๋ฅ์ด ์ฐ๋์ด ์๋๋ค์
<img src="https://cdn.inflearn.com/public/files/posts/4a8fe1bc-ffc1-4ef4-893f-2b386c32126a/d752ffeb-2d92-445c-b7ef-80f316a68555.png" media-type="img"
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธcompile62
ใป
0
146
2
- ๋ฏธํด๊ฒฐ
Copy Link๋ก ํ๋กํ ํ์ ๊ณต์ ์, ํด๋ํฐ ํ๋ ์ ์๋ณด์ด๊ฒ ํ๋ ๊ธฐ๋ฅ
์ ๋ชฉ ๊ทธ๋๋ก, Copy Link๋ก ํ๋กํ ํ์ ๊ณต์ ์, ์ ๊ฐ Advanced settings > Show device frame ๋ฉ๋ด์์ uncheckedํ๊ณ ํ๋ ์ ์์ค ์ํ์์ ๊ณต์ ๋ฅผ ํด๋, Link๋ฅผ ๋ฐ์์ชฝ์์๋ ํด๋ํฐ ํ๋ ์์ด ๋ํดํธ๋ก ๋ณด์ฌ์ง๋๋ฐ, ๊ณต
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธHaein
ใป
0
299
2
- ๋ฏธํด๊ฒฐ
ํ๋ ์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ค๊ฐ ๋ชจ๋ฅด๋ ๋ฐ์ค๋ฅผ ๋ฐ๊ฒฌํ์ด์.
์ปจํ ์ธ ๋ฅผ ๋ค ๋ฐ์ํ ํ์ ํ๋ ์ ์์๋ ๊ธธ์ด๋ฅผ ์ข ์ค์ด๋ ค๊ณ ํ๋จ๋ฐ ์๋ ๋ถ๋ถ์ ์ปค์๋ฅผ ๋๊ณ ์๋ก ๋๋๊ทธํ๋๋ฐ,์ ๊ฐ ๋์ ๋ณด์ด๋ ํ๋ ์ ์์ฒด๋ ์กฐ์ ๋์ง ์๊ณ , ํ๊ธฐ ์ฒจ๋ถ ์ด๋ฏธ์ง์ฒ๋ผ ์๋ณด์ด๋ ๋ฐ์ค(ํ๋์์ผ๋ก ์ ํํ ์ํ์ ๋ฐ์ค) ํฌ๊ธฐ๊ฐ ์กฐ์ ์ด ๋์ด์.</
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธHaein
ใป
0
134
2
- ๋ฏธํด๊ฒฐ
Style ์ ์ฅํ๋๋ฐ Variable?
Color styles์ ์ ์ฅํ๊ณ ์์๋๋ฐ, ๋ญ๊ฐ ํฌ๋ช ๋ ์ฒ๋ฆฌ ๋ฑ์ ํ ์ปฌ๋ฌ๋ฅผ ์ ์ฅํ๋๊น Local Variables์ด๋ผ๋ ๋ค๋ฅธ ์นดํ ๊ณ ๋ฆฌ๋ก Styles๊ณผ ๋ณ๊ฐ๋ก ์ ์ฅ์ด ๋๋๋ฐ ์ด๊ฒ ๋ญ๊ฐ์? ์ด๊ฑธ Styles๋ก ๊ฐ์ ์นดํ ๊ณ ๋ฆฌ๋ก ์ ์ฅ์ ๋ชปํ๋์?
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธHaein
ใป
0
340
1
- ๋ฏธํด๊ฒฐ
Text ๋ฐ์ค ์กฐ์ ํ๋ ๋ฒ
๋ํ ์์ ํ ์คํธ๋ฅผ ์ฌ๋ ค ๋ฒํผ์ ๋ง๋๋ ์ผ์ด ๋ง์๋ฐ์. ๋ํ ์ ํ ์คํธ๊ฐ ์ ํ๊ฐ์ด๋ฐ์ ์์ด์ผํ๋๋ฐ, ๊ณ์ ์ด์ง ์์๋ ์ ๋ ฌ์ด ํ๊ฐ์ด๋ฐ๊ฐ ์๋๋ผ ์๋์ชฝ์ผ๋ก ์ ๋ฆฐ ๋ชจ์ต์ด์์. ํ ์คํธ๋ฐ์ค๋ ๋ํ ์์ ํ ๊ฐ์ด๋ฐ์(๋์ผ Padding) ์ ๋์๊ณ , ํ ์คํธ๋ฐ์ค๋ ์์๋
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธHaein
ใป
0
887
2
- ๋ฏธํด๊ฒฐ
ํ์ฅ์ฑ
ํ์ฅ์ฑ์ ์ํด ์์ด์ฝ ์ ์์์ ์คํธ๋ก์ผ๋ก ๊ทธ๋ฆฐ ์์ด์ฝ์ ์คํธ๋ก ์์๋ผ์ธ์ ํด์ผ ์ปค์ ธ๋ ํฌ๊ธฐ์ ๋น์จ์ด ์ผ์ ํ๊ฒ ๋์ด๋๋ ๊ฑฐ์ฃ ?
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธsilverjeni02
ใป
0
108
2
- ๋ฏธํด๊ฒฐ
ํ๋จ๋ฐ ์ค์ ํ๋ ๋ฐฉ๋ฒ
์ ์๋๊ป์ ์์์์ ๋ณด์ฌ์ฃผ์ ๊ฒ์ฒ๋ผ Frame์ ์ค์ ํ๋ฉด ์๊ด์์ด ๊ธธ๊ฒ ํ๊ณ , ๋งจ ํ๋จ์ ํ๋จ๋ฐ Fixed position์ผ๋ก ๋์์ฃผ๊ณ , Prototype์์ ๋ณผ๋ ์ค์ ๋ณผ ๋๋ฐ์ด์ค ์ค์ ํด์ ๋ณด๋ ๋ฐฉ๋ฒ์ด ์๊ณ ,1๋ฒ ๋ฐฉ<
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธHaein
ใป
0
257
2
- ๋ฏธํด๊ฒฐ
์ปดํฌ๋ํธ๋ค ์์ ์์์ ํด๋๊ฐ์ผ๋ก ๋ถ๋ฅํ๋ ๋ฒ
์ปดํฌ๋ํธ๋ค ์์ ์์์ ํด๋๊ฐ์ผ๋ก ๋ถ๋ฅ์ํค๋๊ฑฐ์~ ๋๊ฐ์ด ์ปดํฌ๋ํธ๋ช ์ ํด๋๋ช ์ฐ๊ณ / ์ฒ๋ฆฌํ๋๋ฐ ์ ์์ ์์์ ํด๋๋ง์ด ์๋๋๊ฑฐ์ฃ ?
์น-๋์์ธ๋ชจ๋ฐ์ผ-๋์์ธfigmaํ๋ก๋ํธ๋์์ธHaein
ใป
0
534
4






