[내일배움캠프] 사전캠프 Day 8 - 피그마 기초강의 4주차

---

 

4주차 수업 목표

• 컴포넌트 프로퍼티를 이해할 수 있다
• 피그마에서 배리언츠와 프로퍼티를 만들고 관리할 수 있다
• 컴포넌트를 응용하고 결합하는 과정을 이해할 수 있다

---

 

💡 컴포넌트 프로퍼티

- 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능

- 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야할 때 필요한 기능

 

💡 베리언츠(Variants)

- 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능

- 컴포넌트의 가상의 상태를 만들 때 사용

 

💡 프로퍼티(Property)

- 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

 1) 불리언
 - Y or N를 선택하는 형식

 - 컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성
 - 레이어를 껐다가 켰다가 할 수 있는 속성값이에요.

 2) 인스턴트 스와프

 - 인스턴스를 다른 인스턴스로 교체하는 기능 (인스턴스가 아닌 것으로는 바꿀 수 없음)

 - 버튼안의 아이콘, 팝업안의 버튼 등을 교체할 때 사용

 3) 텍스트

 - 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어줌

 

📌 배리언츠와 프로퍼티를 고르는 기준

 -  컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 해야 함

 - 파운데이션 값이 바뀐다면 베리언츠

 - 파운데이션 값이 바뀌지 않았다면 프로퍼티

 

💡 합성 컴포넌트

- 컴포넌트를 모아 또 컴포넌트를 만드는 경우

- 버튼 컴포넌트에 폰트, 컬러, 여백 및 간격, 곡률 등 파운데이션 요소가 결합한 컴포넌트

 

💡 네스티드 인스턴스

- 다른 컴포넌트 안에 들어가 있다는 뜻

 

💡 탭 컴포넌트

- 현재 화면을 전환해주는 요소

---

[숙제]

 

 

---

 

매일 매일 강의를 들을 때마다 피그마 기능을 활용하면서 숙제를 하다보니 내가 뭔가 만들어내는 것 같은 기분도 들고 강의를 다 듣고나면 제대로 활용도 해볼 수 있지 않을까 기대해본다