2026-05-28 DAY8 TIL

◆ 의사 상태와 컴포넌트 프로퍼티

의사상태(컴포넌트/UI가 가질수 있는 또 다른 형태와 모습)

의사(가짜의,가상의 Pseudo 수도라고 읽는다)

◆ 합성 컴포넌와 네스티스 인스턴스

◈  컴포넌트 프로퍼티 란?

    ▪ 의사상태에서, 컴포넌트는 가상의  상태를 가질수 있다

    ▪ 컴포넌트가 가상의 상태를 가질때 , 형태가 조금씩 변화할 수 있다. 

    ▪  또한 컴포넌트 안의 요소가 바뀌는 경우도 있다

    ▪  컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트기능 이다

 

▶ 컴포넌트 프로퍼티는 왜? 쓰나요

    ▪  피그마로 UI를 디자인한다는 건 

       컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있다

    ▪ 오토레이아웃 등 피그마를 최대한 활용해 컴포넌트를 만들고 , 인스턴스를 디자인에 적용하는 과정을 반복하기 때문

    ▪  이 과정에서, 하난의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 한다고 배웠다

    ▪   이때 필요한 기능이 컴포넌트 프로퍼티 이다    

▶  배리먼츠(Variants) 

    - 넓은 관점에서 프로퍼티의 한 종류이지만 별개의 속성이라고 생각하자

      ※ '변종' 이라는 뜻 이다

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

 ▪ 배리언츠는 컴포넌트의 가상의  상태= 의사상태 를 만들 때 사용

▶  프로퍼티(Property)

     ▪ ※ '속성' 이라는 뜻

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

 

▶ 컴포넌트 프로퍼티 알아보기

    ▪ 배리언츠를 제외하면 피그마 컴포넌트를 만들때 설정할 수 있는 프로퍼티는 3가지

  ▷ 1) Boolean

           ※  Boolean(불리언) 은 Y or N 를 선택하는 형식

               ▪ 컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성

                ▪ 레이어를 껏다가 켰다가 할 수 있는 속성   

텍스트에 불리언 프로퍼티를 적용하면 껐다 켰다 할수 있

  ▷ 2) Instance swap

           ※ 인스턴스르 다른 인스턴스로 교체하는 기능

                - 인스턴스를 인스턴스가 아닌것으로 바꿀수는 없다

             ▪ 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 또 다른 인스턴스로 교체할수 있다

              ▪ 주로 버튼 안의 아이콘 팝업 안의 버튼 층을 교체할때 사용

  - 버튼안에 있는 아이콘안에 인스턴스 스왑을 적용하면 다른 아이콘느로 변경하기 쉽

▷ 3) Text

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

 텍스트에 텍스트 프로퍼티를 적용하면 텍스트 편집을 좀 더 쉽게 할 수 있다

▶ Q. 배리언츠 프로퍼티를 고르는 기준이 궁금 !!

       ▪ 배리언츠와 프로퍼티 모두 디자인에 변화가 생긴다는건 동일

      ▪ 컴포넌트에 적용될 파운데이션이 변되는지를 기준! 

예시 ※ 버튼에 적용한 파운데이션 요소인 색상, 간격, 폰트 가 바뀌면 배리언츠로 만들어야한다

※ 언뜻 보기엔 디자인이 바뀌었지만 ,색상이나 간격 폰트 아이콘 크기 등 파운데션 값이 바뀌지 안는다면 프로퍼티로

◈ 버튼 컴포넌트의 의사상태 만들기 

     버튼의 위계 배리언츠 만들기