컴포넌트 프로퍼티 실습과 합성 컴포넌트 알아보기

[사전캠프_9/10]

• 피그마 4-5.~4-9. 강의 이수
• 피그마 5주차 강의 이수

​

​

피그마 4주차 강의 학습 내용

​

4-5. 버튼 컴포넌트의 아이콘 바꾸기

* 프로퍼티를 추가하고 Instanse swap을 사용해준다.

​

* 이름을 Reading Icon으로 변경해주고 변경할 아이콘 컴포넌트들을 모두 선택해준다.

 

​

* 컴포넌트에서 Instance swap 할 아이콘을 선택해주고 버튼을 눌러 실행해준다.

​

* 버튼 인스턴스를 만들어 확인한다.

​

​

4-6. 버튼 컴포넌트의 텍스트 바꾸기

* 프로퍼티를 추가하고 Text를 사용해준다.

​

* 이름을 Button Label로 변경해주고 값은 '버튼 라벨'이라고 변경해준다.

* 컴포넌트에서 바꿀 라벨 부분을 선택해주고 지정해둔 배리언츠로 바꿔준다.

 

​

* 인스턴스를 만들어주면 패널에서 라벨 텍스트를 수정할 수 있는걸 확인할 수 있다.

​

​

4-7. 합성 컴포넌트와 네스티드 인스턴스

​

• 합성 컴포넌트(Compound Component)
  • 파운데이션을 모아 컴포넌트를 만들고, 컴포넌트를 모아 패턴을 만드는 것인데, 예외가 있다.
  • 컴포넌트들을 모아 컴포넌트가 만들어지고, 파운데이션과 컴포넌트를 모아 또 컴포넌트가 되는 경우를 합성 컴포넌트라고 한다.

버튼(컴포넌트) + 컬러, 폰트, 여백, 간격(파운데이션) -> 컴포넌트(=합성 컴포넌트)

• 네스티드 인스턴스
  • 컴포넌트를 만들면 프로퍼티를 활용해 우측 패널에서 조작할 수 있다.(불리언, 배리언츠, 인스턴스 스왑, 텍스트)
  • but 이 컴포넌트가 다른 컴포넌트의 재료로 쓰일 수 있다. 이때 네스티드 인스턴스 기능을 사용해 하위 컴포넌트의 속성을 조작할 수 있도록 하는 기능

팝업 컴포넌트 안의 버튼 컴포넌트를 조작할 때

• 탭 컴포넌트
  • 네비게이션에 해당. 현재 화면을 전환해주는 요소
  • 탭은 선택된 것과 선택되지 않은 것의 구분할 수 있어야 하는게 가장 중요하다

​

• 탭 컴포넌트로 네스티드 인스턴스 실습

​

* 텍스트로 텝 라벨을 만들어 준 뒤 오토레이아웃으로 프레임 만들어주고 두개(눌린 것, 안눌린 것)를 만들어 컴포넌트로 만들어 줄건데, 'Create conponent set'으로 만들어 준다.

​

* On, Off 상태로 디자인해주고, 인스턴스로 복제해서 on, off 두개를 같이 프레임으로 만들어준다.

* 필요한 만큼 탭 개수를 늘려주고 이를 컴포넌트로 만들어주면 합성 컴포넌트가 된다.

* 여기서 프로퍼티에서 네스티드 인스턴스를 적용해주고 변경 할 탭들을 모두 선택해 준다.

 

 

​

* 이렇게 되면 상위 컴포넌트에서 하위 컴포넌트에 따로 들어가 on, off를 조절할 필요 없이 상위 컴포넌트에서 스위치로 조절할 수 있게 된다.

​

​

피그마 5주차 강의 학습 내용

​

5-2. 화면 디자인 실습 - 홈 화면 만들기

​

• 홈 화면 만들기
  • 1배수 화면
    • 사이즈가 다른 디스플레이에 적용되기 위한 기준 사이즈
    • 일반적으로 375*812(아이폰), 360*800(안드로이드)

​

5-3. 화면 디자인 실습 - 목록 화면 만들기

​

• 리스트 컴포넌트의 정의
  • 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
  • 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용

​

* 화면 디자인 실습 완료

​

​

[회고]

화면 디자인을 만들 때 만들어 두었던 컴포넌트들을 사용하니 편리했다.

예전 프로젝트에선 이런 기능들을 몰라서 하나씩 모두 만들었었는데, 피그마를 활용하지 못하고 있었다.

컴포넌트와 프로퍼티 기능의 효율성을 체감했고, 더 익숙해지도록 훈련할 것이다.