컴포넌트와 프로퍼티, 인스턴스 스왑

 

오즈코딩스쿨의 15일차~16일차 수업을 뒤이어 리뷰한다.

배운 순서가 조금 달라서, 통합 리뷰를 하고자 한다. 

 

---

15~16일차

1. 컴포넌트
- 메인 컴포넌트와 인스턴스
- 프로퍼티의 정의, 종류, 사용법
- Figma의 여러 Tip / 주의사항

2. 인스턴스 스왑

3. Varients (다음 회차에) 

---

 

 

메인 컴포넌트와 인스턴스

컴포넌트에서 가장 중요한 관계는 Main Component와 Instance의 관계다.

- Main component : 원본. 수정 시 연결된 디자인이 함께 변경 된다.

- Instance : 원본 컴포넌트를 복사해서 사용하는 요소

작업 속도를 높이고, 일관성 있는 디자인을 만들 수 있다. 

 

 

컴포넌트를 사용해 실습을 해보았다.

여기에서 Constraints 기능을 사용해, 위에 떠있는 팝업을 우측 상단에 고정시킬 수 있도록 하였다. 

Tip. 모바일 화면을 디자인할 때 상단, 하단바는 Constraints로 Left + Right / Top & Bottom 으로 고정시켜주고 시작하다. 

 

 

프로퍼티 (=속성, 성격)

메인 컴포넌트에 추가 속성을 부여하는 기능!

이미 완성된 컴포넌트에 속성을 더해주는 기능으로, 컴포넌트에 옵션을 추가하는 것이다.

비슷하지만 다른 (아이콘 + 텍스트 / 아이콘 + 텍스트 + 텍스트 등) 여러 컴포넌트를 만들 필요 없이, property를 이용해 경우의 수를 줄일 수 있다. 객체 온오프 옵션, 텍스트 수정, 인스턴스 수정 등 ...

 

프로퍼티에는 5가지 종류가 있다. 오른쪽은 사용 예시!

Text	지정된 텍스트 내용들만 변경할 수 있게 해준다.	옵션 추가
Boolean	선택한 레이어의 On/Off (보이기/숨기기)	옵션 추가
Instance Swap	안에 있는 컴포넌트를 다른 것으로 스왑 (아이콘, 이미지)	옵션 추가
Variant	컴포넌트의 상태 / 유형을 미리 정의해두고, 상황에 맞게 교체할 수 있다/ (버튼의 Hover / Pressed / Disabled ... 를 한 컴포넌트 안에 넣는다.)	커스텀
Slot	인스턴스 창고, 잦은 변경사항이 발생하는 영역을 잡는다.	커스

 

 

 

 

 

 

주의점!!! 

- 메인 컴포넌트는 화면에 직접 사용하지 않고, 따로 빼서 관리를 한다. (파일에서 Asset으로 쓸 수 있다.)

- property 옵션 적용은 메인 컴포넌트에다가,

- property 옵션 확인은 instance에서 한다.

 

 

 

디자인 시스템은 레고블록 세트와 비슷하다. 미리 만들어둔 블록(component)를 조립해서 다양한 화면을 빠르고 일관성 있게 만드는 방식.

 

디자인을 할 때, 화면에서 반복적으로 사용되는 요소를 가장 작은 단위(아이콘/텍스트...)로 쪼개고, 각 요소들을 합쳐 모듈 > 템플릿 > 페이지를 구성한다.

여기에서 메인컴포넌트는...   

- 스타일, 구조, 기본 상태를 결정하는 기준점이 된다.

- 컴포넌트 세트나 시스템 페이지에 정리한다.

 

 

Tip. 컴포넌트를 더 똘똘하게 사용하는 레이어명 정리 --> '/' 를 활용해 인스턴스 폴더 구분하기

 

Tip. Rename으로 여러 레이어 이름 한 번에 바꾸기 (Ctrl + R)

Tip. 컴포넌트 연결 해제를 하고 싶을 때는 우클릭 -> Detach instance, component 자체를 해제하고 싶을 때는 플러그인 사용

Tip. 컴포넌트를 실수로 지웠다면 -> Restore main component

 

 

 

 

텍스트, 불리언 프로퍼티

 

텍스트 Property 의 용도 -- 레이어가 여러겹으로 쌓여있을 때 한 번에 텍스트 수정이 우측 패널에서 가능하도록 도와주는 기능. 유사한 카드 레이어가 여러개를 늘어놓았을 때 매번 더블클릭해서 들어가기 귀찮기 때문에 Property 설정을 통해 편리하게 관리한다.

 

 

Boolean Property의 용도 -- On/Off, True/False 처럼 2개의 옵션을 왔다갔다 하는 (일반적으로 상태를 나타낸다) 프로퍼티 값을 나타낼 때 쓰인다. 

 

 

인스턴스 스왑

: 바꾸고 싶은 인스턴스 (복사본)을 다른 인스턴스로 바꿀 수 있다.

: 이때, 교체하고 싶은 아이콘과 이미지도 컴포넌트 설정이 되어 있어야 한다. 

실습을 진행했다. 아이콘 레이어명 앞에 'Icon/' 을 붙여서 폴더로 관리할 수 있도록 한다. 원본 파일이 어디에 있는지 유의하도록 하자.

 

 

 

 

막히거나 어려웠던 부분

인스턴스 스왑이나, 텍스트 프로퍼티 같은 기능들은 실제 업무에서 어떻게 사용되는지 경험해보고 싶다. 명확한 목적이 있으면 사용법이나 활용이 더 원활해질 것 같다는 생각이 들었다. 아직은 기능들을 적용하는 단계가 어색하다.

 

 

 

Varients는 다음에 더 깊이있게 다루고자 한다.