Figma #config2022 (3) 컴포넌트 속성 (Component properties)

오늘의 포스팅은 나름대로 아래 포스팅의 내용을 번역해본 것입니다.

오타, 의역, 번역 지적 환영하고 틀린 부분이 있다면 댓글로 남겨주세요, 

반영하겠습니다. 

 

https://help.figma.com/hc/en-us/articles/5579474826519

Create and use component properties

---

1. 컴포넌트 프로퍼티(Component properties)의 사용과 생성.

 

컴포넌트 프로퍼티는 디자인 시스템에서 추측을 없앤다. 

사람들이 특정 디자인 프로퍼티에 연결하여 변경할 수 있는 컴포넌트 일부분을 정의한다.

이를 통해 레이어 표시 여부, 아이콘 교체 또는 텍스트 변경, 효과 적용 여부 등을 제어할 수 있다.

 

일반적인 컴포넌트처럼 추가 문서에 대한 링크와 설명을 붙일 수 있으며,
이는 컴포넌트를 사용하는 데 있어서 올바른 정보와 맥락을 적용할 수 있도록 확신을 줄 수 있다.

 

인스턴스 레벨에서 모든 컴포넌트의 프로퍼티를 규정지을 수 있다.
그러면 개별 레이어를 선택하거나 덮어씌울(overrride)필요없다. 

 

---

2. 컴포넌트 프로퍼티와 변형(Variant)을 나눠서 적용하기.

중요한 점이 있는데, 컴포넌트 프로퍼티는 프로토타입 인터렉션을 지원하지 않는다.

 

( *역주 : 프로토타입 인터렉션이란, 사용자가 디자인에 상호작용하는 방식을 정의하는 기능이다.
프로토타입으로서 클릭/탭, 호버, 누르기, 마우스 진입, 마우스 떠남 등의 상호작용을 할 수 있다. )

 

만약 당신의 컴포넌트로 프로토타입을 생성하길 원한다면 여전히 변형(variants)을 사용할 필요가 있다.

 

컴포넌트 프로퍼티를 적용하기 전에 당신의 디자인 시스템을 검토하고, 
컴포넌트 프로퍼티와 변형(variants)이 반영되어야 할 쪽을 결정하라.

 

---

3. 속성값의 종류 (Property types)

컴포넌트 프로퍼티는 다른 디자인 프로퍼티에 연결된다. 

메인 컴포넌트 또는 컴포넌트 세트에 컴포넌트 프로퍼티를 만들 수 있고,
이를 변형 또는 컴포넌트의 중첩된 레이어에 적용할 수 있다. 

 

컴포넌트 속성은 아래와 같은 여러 속성이 있다.  

 

 - 변형 프로퍼티 Variant properties

 - 인스턴스 전환 프로퍼티 Instance swap properties

 - 텍스트 프로퍼티 Text properties

 - 불리언 프로퍼티 Boolean properties 

---

3-1 변형 속성 Variant properties

변형(Variant)은 컴포넌트 세트에 있는 각각의 컴포넌트들을 말한다.

변형 속성(Variant property)은 상태, 컬러, 사이즈와 같은

변형(Variants)의 특성(Attributte)을 정의할 수 있게 한다. 

 

컴포넌트 세트에는 여러 변형(variants)이 포함되어 있고,
변형(Variants)에는 변형 프로퍼티로 정의할 수 있는 특성(attribute)이 있다.

변형 프로퍼티는 변형(Variants)과 컴포넌트 세트에 따라 달라진다.
그리고 메인 컴포넌트로는 적용도 생성도 되지 않는다. 

 

위 예시처럼, 4개의 변형이 있는 버튼 컴포넌트 세트 하나를 만들었다.
사이즈, 컬러 두 개의 변형 속성(Variant properties)를 적용했다.
사이즈 값(value)은 small, large가 있고, 컬러는 green red가 있다. 

 

---

3-2 Instance swap properties

 

인스턴스 전환 프로퍼티는

메인 컴포넌트나 변형(Variants)에서

전환할 수 있는 인스턴스를 나타낸다. 

 

이 프로퍼티를 만들 때,

로컬 라이브러리와 사용가능한 라이브러리로부터

기본 인스턴스 값을 정의할 수 있다. 

 

이 프로퍼티를 사용하는 모든 사용자에게는

중첩된 에셋을 동일한 컴포넌트의 하위 집합 내의 에셋 또는

사용 가능한 라이브러리의 자산으로 교체할 수 있는

인스턴스 교체 메뉴가 제공된다.

( ※ 좌측 이미지 )

 

이 컴포넌트 속성이 있는 중복된 인스턴스는

부모 컴포넌트의 최고 레벨 레이어에서만 전환할 수 있다. 

 

만약 당신이 중복된 인스턴스를 선택했다면,

다른 인스턴스로 전환할 수 없다. ※

 

(※ 역주 : 인스턴스 스왑이 가능한 레이어를 프로퍼티로 지정하면, 

해당 레이어에서는 더 이상 전환이 안 되고, 최상위 레이어에서만 전환이 된다는 말.)

---

3-3 Text properties

어떤 텍스트 레이어가

편집될 수 있는지 나타내기 위해

텍스트 프로퍼티를 사용한다.

 

오른쪽 사이드에 있는 텍스트 프로퍼티에서 값을 바꾸던지

캔버스에 있는 인스턴스 컴포넌트의 텍스트 레이어에서 바꾸든

이 값은 두 방향 모두에서 업데이트 할 수 있다. 

 

이 프로퍼티가 없는 레이어더라도 여전히 업데이트가 될 수 있다.

 

---

3-4 Boolean properties 

사용자가 토글을 일반 속성을 켜거나 끌 수 있도록

참(true)/거짓(false) 값으로 설정하는

불리언(Boolean) 프로퍼티를 사용한다.

 

예를 들어 만약 아이콘 없는 버튼을 디자인 시스템이 포함한다면,

새로운 변형(variants)를 개별 상태에 생성하는 것 대신에

불리언 프로퍼티(boolean Property)를 아이콘 레이어 출력에 적용한다.

 

주의 : 단, 현재 불리언 프로퍼티는 오직 레이어 출력(visibility)에만 적용할 수 있다.

 

---

 

4. 생성하기 Create

컴포넌트 속성은 부모 레이어, 자식 레이어 두 가지 레벨로 생성할 수 있다. 

컴포넌트 속성은 컴포넌트의 부모 레이어로부터 생성된다.

단, 변형 속성은 자식 레이어로부터 생성할 수 없다.

(오로지 최상위 개체로부터만 부여할 수 있음. 하위 레이어로는 안 된다.)

 

프로퍼티 Property	자식 레이어 Child layer	부모 레이어 Parent layer
인스턴스 전환 Instance swap	✓	✓
텍스트 Text	✓	✓
불리언 Boolean	✓	✓
변형 Variant	✕	✓

---

5. 자식 레이어로부터 만들기 From the child layers

메인 컴포넌트 또는 변형의 자식 레이어로부터 컴포넌트 속성을 생성한다.

이것은 속성을 생성하고, 동시에 선택된 레이어에 적용한다. 

 

이 방법은 인스턴스 전환, 텍스트, 불리언 속성을 생성하는 것을 보조한다.

단, 자식 레이어에서는 변형(Variants) 속성을 생성할 수 없다. 

 

5-1) 인스턴스 전환 프로퍼티 만들기

 - 1. 변형 또는 메인 컴포넌트에서 중첩된 인스턴스를 선택한다. 

 - 2. (선택사항) 오직 변형에서만(Variant only) : 컴포넌트 세트의 같은 레이어를 선택하여 아이콘을 선택하고,
       이 레이어는 동일 우선순위(Hierarchy)와 이름(name)으로 인식된다. 

        (※역주: 같은 레이어에 있는 중첩된 레이어를 한번에 프로퍼티로 등록하는 방법이다.)

 - 3. 오른쪽 사이드바에 있는 인스턴스 전환 드롭다운 옆에 있는 아이콘을 클릭하면 프로퍼티가 생성된다.
      모달 창에서 컴포넌트 속성을 생성하는 창을 연다.

 

 - 4. 텍스트 필드에 프로퍼티 이름을 입력한다. 

 - 5. 파일이나 쓸 수 있는 라이브러리에 있는 로컬 컴포넌트로부터 인스턴스를
      드롭다운에서 선택하여 기본값을 설정한다. 

 - 6. 프로퍼티 생성(Create property)를 클릭한다.
       적용될 때 오른쪽 사이드바 인스턴스 드롭다운에
       아이콘에 보라색이 물드는 걸 볼 수 있을 것이다. 

 

5-2) 불리언 프로퍼티 생성하기

3번 이미지

1. variant 혹은 메인 컴포넌트에 중첩된 레이어를 선택한다. 

2. (선택) 오직 변형에서만(Variant only) : 컴포넌트 세트의 같은 레이어를 선택하여 아이콘을 선택하고, 이 레이어는 동일 우선순위(Hierarchy)와 이름(name)으로 인식된다. ※

        (※역주: 같은 레이어에 있는 중첩된 레이어를 한번에 프로퍼티로 등록하는 방법이다.)

3. 프로퍼티를 생성하기 위해 오른쪽 사이드바의 컨텐츠(Content) 영역에 있는 아이콘을 클릭한다.
   컴포넌트 속성 생성 모달 창을 연다. 

 - 프로퍼티에 이름을 부여하기 위해 텍스트 필드에 이름을 사용한다. 

 - 기본값에 참(true) 또는 거짓(false)을 설정한다. 

4번 이미지  팁 설명 이미지

4.  create property를 클릭하자. 적용될 때 오른쪽 사이드바 영역에 있는 눈 아이콘에 보라색이 채워지는 것을 볼 수 있을 것이다.

팁 : 다른 프로퍼티를 생성 또는 적용하고 싶다면? 오른쪽 사이드바에 있는 관련 속성으로부터 보라색 알약을 클릭하라.

 

 

5-3) 텍스트 프로퍼티 생성하기

1. Variant 또는 메인 컴포넌트에 중첩된 텍스트 레이어를 선택한다. 

2. (선택) 오직 변형에서만(Variant only) : 컴포넌트 세트의 같은 레이어를 선택하여 아이콘을 선택하고,
이 레이어는 동일 우선순위(Hierarchy)와 이름(name)으로 인식된다. 

3. 프로퍼티를 생성하기 위해 오른쪽 사이드바의 내용 영역에 있는 아이콘을 클릭한다. 컴포넌트 속성 생성 모달 창을 연다. 

 - 텍스트 필드를 사용해서 프로퍼티 이름을 입력한다. 

 - 텍스트 필드에 값을 사용해서 텍스트 문자열의 기본값을 설정한다. 만약 기본값을 현재 문자열과 다른 것으로 설정하면 피그마는 문자열을 이 값과 일치시키기 위해 업데이트를 할 것이다. 이는 다른 방법으로도 동작하는데, 만약 당신이 컴포넌트의 문자열을 업데이트 한다면, 피그마는 기본값으로 업데이트를 할 것이다. 

 

4.  create property를 클릭하자. 적용될 때 오른쪽 사이드바 영역에 있는 T아이콘에 보라색이 채워지는 것을 볼 수 있을 것이다. 

 

 

---

 

6-1. 부모 레이어로부터 만들기 From the Parents layers

선택한 메인 컴포넌트 또는 컴포넌트 세트에 컴포넌트 속성을 만든다. 이 방법은 변형 속성을 포함하여 모든 프로퍼티 타입을 만들 수 있다. 

 

이 접근은 오직 프로퍼티만 만들 수 있다. 개별 단계에서 모든 자식 레이어에 프로퍼티를 적용할 필요가 있다. 

 

부모 레이어로부터 컴포넌트 속성을 생성하기 위해서는

 

1. 메인컴포넌트 또는 컴포넌트 세트를 선택하고,
오른쪽 사이드바에 있는 프로퍼티 영역에서 + 아이콘을 선택한다. 

컴포넌트 속성 옵션 드롭다운이 보일 것이다. 

2. 컴포넌트로부터 프로퍼티를 선택한다. 

 - Variant property

 - Instance swap property

 - Text property

 - Boolean property

 

프로퍼티 이름이나 기본값을 부여하기 위해서 컴포넌트 프로퍼티 생성 모달창에 있는 필드와 드롭다운을 사용한다. 

탑 다운 방법으로 컴포넌트 속성을 생성하는 것은 어떠한 중첩 레이어에도 프로퍼티가 적용되지 않는다. 따로 적용을 시켜야 한다. 

---

6-2. 적용하기 Apply

 존재하는 프로퍼티 속성을 중첩 레이어에 언제든지 적용시킬 수 있다. 

 

1. 변형 또는 메인 컴포넌트 안의 중복 레이어를 선택한다. 

2. (선택 사항, 변형만 해당) 컴포넌트 세트에서 유사 레이어들을 선택하려면 아이콘을 클릭한다. 

3. 오른쪽 사이드바에서 적용하고싶은 프로퍼티를 섹션에서 찾는다. 드롭다운을 펼치려면 아이콘을 클릭하자. 드롭다운은 연관되거나 현재 있는 속성들을 포함한다. 만약 컴포넌트 속성 생성 모달이 드롭다운 대신에 나타난다면, 그 컴포넌트에는 해당 종류의 프로퍼티가 존재하지 않는다. 

4. 드롭다운에서 선택된 레이어들에 컴포넌트 속성을 적용하려면 프로퍼티를 클릭하자. 그러면 아이콘과 프로퍼티 이름이 보라색으로 변할 것이다. 

 

팁. 컴포넌트 속성의 중복 레이어를 바꾸려면 오른쪽 사이드바에 있는 보라색 알약을 클릭하자. 

 

 

8. 문서 붙이기 attach documentation

일반적인 컴포넌트처럼 설명이나 심화 문서의 링크를 붙일 수 있다.
이건 사람들이 보다 정확한 정보로 맥락에 맞게 컴포넌트를 적용할 수 있도록 한다. 

 

1. 컴포넌트 세트 또는 메인 컴포넌트 선택

2. 컴포넌트 디테일을 여는 아이콘 선택 

3. 하나 또는 두개의 필드를 채우자

 - 어떻게 컴포넌트를 사용하는지

 - 문서 링크

4. 변화를 적용하려면 x버튼을 누르거나 모달 창의 바깥 어디든 누르면 된다. 

 

9. 업데이트 발행하기 publish update 

컴포넌트 세트, 메인 컴포넌트, 속성, 값 등을 업데이트하거나 생성했을 때 팀 라이브러리로 발행하자.
이는 다른 사람과 고유하거나, 이 파일 또는 프로젝트를 사용하는 것을 허용한다. 

 

10. 관리하기 Manage

10-1. 프로퍼티 관리하기 Manange properties

- 이름 바꾸기 rename

 1. 컴포넌트 세트 또는 메인 컴포넌트를 선택하기

 2. 오른쪽 사이드바에 있는 프로퍼티(Properties) 영역에서 프로퍼티 이름을 더블 클릭

 3. 적용하기 위해서 새 이름을 타이핑하고 return을 누르거나 필드 바깥을 누른다. 

 

 팁! 컴포넌트 프로퍼티의 이름을 다시 바꾸기 위해서는 프로퍼티 편집 모달창을 사용할 수 있다. 
오른쪽 사이드바에 있는 아이콘을 클릭하고, 새 이름을 텍스트필드에 타이밍하면 된다. 

 

- 순서바꾸기 Reorder

1. 컴포넌트 세트 또는 메인 컴포넌트를 선택하기

2. 핸들을 나타내기 위해서 프로퍼티에 마우스를 올려둔다. 

3. reorder를 클릭 또는 드래그하고 놓으면 적용된다.

 

컴포넌트 프로퍼티의 순서는

누군가 컴포넌트 인스턴스를 사용할 때도

오른쪽 사이드바에 반영된다.

 

주의 : 변형(variant)속성은 항상 오른쪽 사이드바에 다른 프로퍼티 타입 위에 위치할 것이다. 

다른 변형(variant)프로퍼티들 사이에는 순서를 바꿀 수 있지만

그러나 다른 타입(인스턴스 전환, 불리언, 텍스트)은 불가능하다.

 

- 삭제하기 Delete

1. 컴포넌트 세트 또는 메인 컴포넌트를 선택하기

2. 프로퍼티 오른쪽 클릭, 프로퍼티 삭제(delete property), 또는 프로퍼티를 선택하고 delete 키를 누른다. 

 

중요 : 만약 당신의 컴포넌트 세트 또는 메인 컴포넌트가 오직 하나의 variant 속성을 갖고 있으면, 프로퍼티 삭제는 전체 컴포넌트 세트 또는 메인 컴포넌트를 삭제할 것이다. 

 

- 프로퍼티 떼기 Detach a property

레이어에서 텍스트, 인스턴스 전환, 불리언 프로퍼티를 떼어낼 수 있다.

 

1. 적용된 컴포넌트 속성이 있는 중복 레이어들을 선택한다. 

2. 당신이 연결을 끊고 싶어하는 프로퍼티 옆에

오른쪽 사이드바 패널에 있는 분리 아이콘을 클릭한다. 

 

주의 : 중첩 레이어에서 variant 속성을 해제하는 것은 불가능하다. 

 

11-2. 값 관리하기 Manange values

- 기본값 바꾸기 change default value

1. 컴포넌트 세트 또는 메인 컴포넌트를 선택하기

2. 속성 편집 모달 창을 열기 위해 변형(variant) 프로퍼티 옆에 있는 아이콘을 클릭하자.

3. 기본 값을 업데이트하기 위해서 값 영역에 있는 텍스트 필드 또는 드롭다운을 사용하자.

 

연결된 인스턴스 레이어에 적용된 프로퍼티 오버라이드(override)가 없는 경우
기본값을 업데이트 하는 것은 캔버스에 반영될 것이다.

(Updating the default value will reflect on canvas if the associated instance layer has no property overrides applied.)

 

주의 : variant 속성의 기본값은 컴포넌트 세트의 좌상단 코너에 있는 Variant에 의해 결정된다. 

 

- 이름 바꾸기 Rename (Variants value에서 사용.)

1. 컴포넌트 세트 또는 메인 컴포넌트를 선택하기

2. 프로퍼티 편집 모달 창을 열기 위해 변형(Variant) 프로퍼티 옆 아이콘을 클릭.

3. 값(value) 영역에서 값 이름을 바꾸기 위해 텍스트 필드를 사용한다. 

 

- 순서 바꾸기 Reorder

1. 컴포넌트 세트 또는 메인 컴포넌트 선택하기

2. 속성 편집 모달 창을 열기 위해 변형(variant) 프로퍼티 옆의 아이콘 클릭

3. 핸들을 나타내기 위해 값 위에 마우스 포인터를 올려둔다.  

4. 클릭하고 드래그하여 순서를 바꾼다. 

 

- 삭제하기 Delete

variant 속성 값을 삭제하기 위해서는 

1. 컴포넌트 세트 또는 메인 컴포넌트 선택하기

2. 프로퍼티 편집 모달 창을 열기 위해 variant 프로퍼티 옆의 아이콘 클릭

3. (위 이미지처럼) 핸들의 값을 클릭하고, delete 또는 backspace를 클릭한다. 

 

11.사용하기 Use

컴포넌트 프로퍼티가 포함된 인스턴스를 사용할 때, 

오른쪽 사이드바의 프로퍼티 섹션에 있는 컨트롤을 사용하여

인스턴스를 구성할 수 있다.

 

또한 당신이 애셋을 정확하게 사용하는 확인하기 위해 문서 또는 설명을 체크할 수 있다. 

(Link는 Inspect 탭의 Documentation에서 볼 수 있고, 설명은 컴포넌트 패널과 애셋 페널의 툴팁에 서 볼 수 있다.)

11-1) 문서 읽기 Read documentation

정확하고 일관된 디자인 시스템 사용을 보장하는 데 있어서 문서는 필수적이다. 

컴포넌트 문서는 설명을 포함할수도 있고, 외부 문서를 링크로 걸 수 있으며, 둘 다도 가능하다.

 

만약 설명이 컴포넌트에 포함되었으면 두 곳에서 나타난다. 

 - 애셋 패널에 있는 컴포넌트에 마우스를 올려두면 툴팁에서 볼 수 있다. 

 - 인스턴스를 선택했을 때 오른쪽 사이드바에서 볼 수 있다. 

만약 외부 문서로 링크가 걸려 있다면, Inspect 패널에 있는 버튼으로 볼 수 있다.

 

11-2) 프로퍼티 구성하기 configure properties

컴포넌트 프로퍼티를 포함하는 인스턴스를 선택했을 때,

오른쪽 사이드바에 있는 프로퍼티 영역은 다른 프로퍼티 컨트롤로 채워질 것이다. 

드롭다운, 토글, 텍스트 필드 등을 사용하여 바꾸면 인스턴스에 반영될 것이다. 

 

- 드롭다운은 교환할 수 있는 인스턴스를 나타낸다. 

- 캔버스에 표시되는 텍스트 문자열을 직접 변경하려면 텍스트 필드의 텍스트를 업데이트 하자.

- 토글을 사용하여 설정을 켜고 끄자.

 

오른쪽 사이드바에 있는 아이콘을 클릭하고 Reset all changes를 선택하면

언제든지 인스턴스의 변화를 초기화할 수 있다.

---

주의 : 적용된 인스턴스 전환 프로퍼티가 있는 중복된 인스턴스를 선택한다면,

당신은 이 레벨로 인스턴스를 전환할 수 없을 것이다.

 

당신은 최상위 레벨 컴포넌트를 선택하고 오른쪽 사이드바에 있는 속성 컨트롤을 사용할 필요가 있다. 

그러나 당신은 여전히 중복 인스턴스를 떼어낼 수 있다.

 

11-3) 오버라이드 Overrides 

컴포넌트 프로퍼티가 없는 단일 인스턴스도 오버라이드를 만들 수 있다.

figma는 인스턴스에 대한 변경 사항을 기록하고 인스턴스간에 교환하거나

다른 변형을 선택하는 경우에도 기록을 보존한다. 

---

이상으로 번역을 좀 했는데 괜찮으셨을지 모르겠습니다.

정말 압도적인 분량이고, 현재 테스트와 함께 반복을 하고 있습니다만, 

아직도 정확하게 이해하고 있지 못하고 있습니다.

(부끄럽지만 사실입니다..)

 

이 내용과 함께 컴포넌트 프로퍼티 문서도 번역을 하고 있습니다.

그래서 차근차근 하나하나씩 컴포넌트를 만들고 구조를 적용하는 법에 대해서 연재를 해볼까 합니다.

잘 부탁드립니다.