DESIGN ๐ŸŒˆ/FIGMA ๐Ÿฅฐ

[๋‚ด๋ณด์“ด] Figma์—์„œ component, Instance๋Š”..?

Joo's 2024. 7. 21. 22:09

 

์ž, ๋‚˜๋Š” ๊ธธ๊ฒŒ ์“ฐ๋Š” ๊ฑธ ์•ˆ์ข‹์•„ํ•˜๋‹ˆ ์งง๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์š”์•ฝํ•  ๊ฒƒ์ด๋‹ค.

 

figma์—์„œ component๊ฐ€ ๋ญ˜๊นŒ์š”?

์šฐ์„  ๊ทธ๋Œ€๋กœ ํ•ด์„ํ•˜๋ฉด *component = ์š”์†Œ

๋„ค, ๋ง ๊ทธ๋Œ€๋กœ ์š”์†Œ์ž„ ใ…‡ใ…‡.

 

 

 

ctrl+alt+K (ํ˜น์€ ์šฐํด๋ฆญ ํ›„ -> create component)๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์ค์‹œ๋‹ค.

๋ณด๋ผ์ƒ‰์ด ๋๋‹ค๋ฉด? ์ปดํฌ๋„ŒํŠธ ๋œ๊ฑฐ์ž„.

 

 

์ขŒ์ธก์— 'Assets'์—์„œ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ๋„ํ˜•์„ ์›ํ•˜๋Š” ๊ณณ์— ๋“œ๋ž˜๊ทธ ํ•˜๋ฉด ์˜ฎ๊ฒจ์™€์ง!

ํšจ์œจ๋งŒ๋ ™ good goooooooood

 

 

๊ทธ๋ ‡๋‹ค๋ฉด, instance๋Š” ๋ญ์ž„?

๊ทธ๋‹ˆ๊นŒ. ์•ผ๋งค๋กœ ๋Œ€์ถฉ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด..

๊ทธ๋ฆผ์ž ๊ฐ™์€ ์—ญํ• ์ด๋ผ ์ƒ๊ฐํ•˜๋ฉด ๋จ~

๋ณธ์ฒด ํŒ”์„๋“ค๋ฉด ๊ทธ๋ฆผ์ž๋„ ํŒ”์„ ๋“ค์ž–์Šด?

๊ทธ๋Ÿฐ๋Š๋‚Œ ^^

 

 

component๋œ ๊ฒƒ์„ ๋ณต์‚ฌํ•ด์„œ ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด instance๊ฐ€ ๋จ.

instance ๊ตฌ๋ณ„๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆด๊ฒŒ์š”. ์ž˜ ๋ณด์…ˆ.

 

 

 

 

์™ผ์ชฝ ๋ณด๋ฉด,, ํ……๋นˆ ๋งˆ๋ฆ„๋ชจ!! ์ €๊ฒŒ instance ๋œ๊ฑฐ์ž„.

์ €๊ฑฐ๋Š” ์ž์‹ ์˜ ๋ณธ์ฒด์ธ ์ปดํฌ๋„ŒํŠธ์˜ ์Šคํƒ€์ผ์ด ๋ฐ”๊พธ๋ฉด ๊ทธ๋Œ€๋กœ ๋˜‘๊ฐ™์ด ๋”ฐ๋ผํ•จ

instance= component ์†๋ฏผ์ˆ˜ํ•˜๋‹ค. (๋‚ด๋ง˜๋Œ€๋กœ ์ƒ๊ฐํ•ด๋ฒ„๋ฆฌ๊ธฐใ…‡ใ…‡)

ํšจ์œจ์„ฑ ๋งŒ๋ ™ ์งœ์‘.

 

 

๋ด๋ด์š” ์˜ค๋ฅธ์ชฝ ๋ณด์…ˆ

์‹ค์‹œ๊ฐ„์œผ๋กœ ๋”ฐ๋ผํ•˜๋Š”๊ฑฐ,,ใ…œใ…œ ์Œ์นจํ•˜์ฃ ?(?)

์จŒ๋“  ์š”๋Ÿฐ ์—ญํ• ์„ ํ•˜๋Š” ์•„์ด๋‹ค~~~

 

 

๋

 

 

๋‹ค์Œํ™”๋Š” propert, variants๋กœ ๊ฐ€์ ธ์˜ค๊ฒŸ์Šค๋ฌด๋‹ˆ๋‹ค.

 

 

(๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์“ด ๊ธ€)