🧨프로퍼티가 뭔가요?

✅ 한줄 요약:

프로퍼티 = 컴포넌트의 “옵션 토글 스위치”
디자이너가 만든 컴포넌트 안에서
👉 버튼 색상, 텍스트, 아이콘 위치 등을
👉 “변경 가능하게 미리 정해둔 항목들

🧠 쉽게 말해서:

👀 예시: 버튼 컴포넌트

➡ 디자이너가 이렇게 만들어놓으면
➡ 팀원은 인스턴스 쓸 때 “옵션 고르듯이” 버튼을 바꿀 수 있음

버튼에 아이콘 붙일까?

배경색은 뭘로 할까?

텍스트는 뭘로 바꿀까?

이걸 하나하나 직접 해체하거나 뜯지 않아도
👉 프로퍼티 패널에서 옵션으로 설정 가능함

🛠️ 프로퍼티의 종류 (대표적인 것들)

🎮 게임 비유로 가면?

컴포넌트 = 캐릭터
프로퍼티 = 캐릭터 커스터마이징 메뉴

머리색 바꾸기

장비 착용 on/off

말풍선 바꾸기

포즈 변경

이런 걸 프로퍼티로 토글토글 해서 쓸 수 있음

🎨 어도비 비슷한 기능은?

약간 느낌 비슷한 건 있음:

포토샵: 스마트 오브젝트 + 텍스트 레이어 + 레이어 스타일 조합

인디자인: 스타일 + 변수 기능 + 심볼 등

근데 피그마는 그걸 훨씬 직관적 & 편하게 한 느낌

📌 요약 끝판왕

컴포넌트 = 템플릿

프로퍼티 = 템플릿 안에서 바꿀 수 있는 항목 (디자이너가 설정해둔)

팀원은 그 옵션만 골라서 똑똑하게 디자인 가능

Q: 그럼 디자이너가 버튼 액션 코딩 해야됨!?

디자이너가 버튼 "모양" 이랑 "상태" 만 정리해 주면 끝!

👉 "코딩은 개발자 몫!"
👉 디자이너는 코딩 안 해도 되는 구조로 디자인 시스템 짜는 거임

🔧 디자이너는 뭐까지 해줘야 해?

✅ 버튼 디자인 만들어서
✅ 예를 들어 아래처럼 상태 구분해두면 됨:

그리고 이걸 Variants + 프로퍼티로 연결하면 개발자는 그걸 보고 → 코드로 연결 (예: onClick 이벤트 등)만 하면 됨!

📱 예시로 보자

디자이너:

버튼 컴포넌트 만들고

state 프로퍼티: Default / Hover / Pressed / Disabled

icon: 있음 / 없음

text: 커스텀 가능하게

개발자:

코드에서 button.state = "hover" 처럼 사용

실제 동작 (누르면 뭐 실행됨)은 JS나 리액트로 개발자가 짜줌

💡 그래서 피그마 = 코드 대체가 아님

피그마는 디자인과 협업의 기준점을 잡아주는 거고
실제 앱을 굴리는 코드는 → 개발자가 구현

디자이너가 해야 하는 건:

"이 버튼이 어떤 상황에서 어떤 모습이어야 해요"
를 명확하게 보여주는 것!

요약하면:

🧑‍🎨 디자이너:

버튼은 이 색, 이 상태, 이 모양으로 나올 거예요~

👨‍💻 개발자:

아~ 그럼 클릭하면 이 함수 실행되게 코딩할게요~

Q: 프로퍼티는 어케함? 시스템임?? 아님 내가 이거 이러케 써여~ 하고 설명하는 그 과정을 프로퍼티라고 함?

A:

🎛️ 프로퍼티 (Property)란?

"컴포넌트에 적용되는 조절 가능한 옵션값"
→ 시스템이자, 네가 직접 설정해서 쓰는 거임!

💡 말하자면 이거임:

❓“이 컴포넌트가 버튼이면,
버튼의 상태를 선택할 수 있어야 하지 않을까?”
그럼 만든다: state라는 프로퍼티를!

📦 예시 – 버튼 컴포넌트에 쓸 수 있는 프로퍼티들:

즉, 하나의 마스터 컴포넌트에 "이렇게 바꿔쓸 수 있어요~" 라고 옵션 붙여주는 것!

🛠️ 어떻게 만드는 건데?

1. 마스터 컴포넌트 선택

2. 오른쪽 상단 "Variants" 만들기

3. 각 Variant(변형)에 state, icon, size 같은 프로퍼티 이름 부여

4. 값도 설정 (예: state=hover)

5. 그럼 인스턴스에선 드롭다운처럼 골라서 쓸 수 있음!

🎨 감각적인 비유:

• 마스터 컴포넌트 = 도화지

• 프로퍼티 = 붓이나 색상 도구 선택

• 인스턴스 = 그걸로 그린 작품

너는 붓이랑 색 도구 세팅까지 다 정해주고,
동료는 그걸 골라서 필요한 데 쓰는 구조!

✨ 결론!

❗ 프로퍼티는 시스템이다.
피그마에 기능이 "들어있고",
내가 직접 정해서 붙이는 옵션값이야.

→ 일종의 컴포넌트 조절 스위치 같은 거!