[TIL] 0717

 

1. 오늘 학습 키워드

• 컴포넌트 프로퍼티
• 베리언트
• 합성 컴포넌트
• 네스티드 인스턴스

 

2. 오늘 학습한 내용을 나만의 언어로 정리하기

 

컴포넌트 프로퍼티

• 컴포넌트가 가상의 상태를 가질 때, 형태가 변화하거나 or 컴포넌트 안의 요소가 바뀌는 경우가 있는데, 컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능이다. 
• 배리언츠와 프로퍼티 두 가지로 나눌 수 있다. 
  • 배리언츠: 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능이다. 컴포넌트의 가상의 상태(= 의사상태)를 만들 때 사용
  • 프로퍼티: 속성이라는 뜻으로, 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용한다. (밑에 예시를 보면 알 수 있듯이, 기본상태 + 아이콘 이라는 디자인 구조는 그대로 두고 버튼의 글자나 아이콘 스타일을 변경할 때 프로퍼티로 조정한다. )
• 베리언츠 제외하면 피그마 컴포넌트 만들 때 설정할 수 있는 프로퍼티는 3가지(Boolean, Instance swap, Text)다. 
• 베리언츠로 만들지, 프로퍼티로 만들지?
  • 파운데이셔 요소인 색상, 간격, 폰트가 바뀌면? => 배리언츠
  • 언뜻 보기엔 디자인이 바뀌었지만, 색상이나 간격·폰트·아이콘의 크기 등 파운데이션 값이 바뀌지 않았다면? =? 프로퍼티

 

합성 컴포넌트

• 컴포넌트들은 대부분은 파운데이션 요소들을 모아 만드는 것이다. 
• 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있는데, 이를 합성 컴포넌트라고 한다.

•  

 

네스티드 인스턴스

• 네스티드 인스턴스는, 재료로 쓰인 컴포넌트를 하위 컴포넌트 + 본체를 상위 컴포넌트라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트 속성을 조작할 수 있도록 하는 기능이다.  

 

실습

• 강의 중 진행한 실습 내용 정리🔽

[피그마 강의 실습] 4주차: 버튼 컴포넌트, 탭 만들기

 

 

3. 학습하며 겪었던 문제점 & 에러

 

- 새롭게 알게 된 점 & 느낀점

• 오토레이아웃 + min/max width
  • Auto layout은 콘텐츠 크기에 따라 컴포넌트가 자동 조정되도록 해주며, 이때 너비(Width) 설정 시 Min width / Max width 추가가 가능하다. 최소, 최대 크기를 제한하여 사용자가 프레임을 줄이거나 늘려도 한계를 설정할 수 있다. 
• 네스티드 인스턴스 
  • 상위 컴포넌트 안에 다른 컴포넌트가 있을 때, 상위에서 하위 속성을 조작하고 싶을 때 Nested Instance 기능을 활용하면 상위 컴포넌트에서도 하위 컴포넌트의 프로퍼티 값을 조정할 수 있다. 
• 베리언츠
  • 실제 UI 동작을 시뮬레이션 할 수 있다. 🔽 이런식으로..

 

4. 내일 학습 할 것은 무엇인지

• 피그마 기초 5주차 복습 + 숙제
• 온보딩 (2)_02 이어서