시작하기 전에

이 기능을 사용할 수 있는 사용자

모든 요금제 사용자

Figma Design 파일에 대한 수정 권한이 있는 사람은 누구나 컴포넌트 속성을 생성, 관리, 사용할 수 있습니다.

이 문서에서는 컴포넌트 속성을 생성하고 구성하는 방법을 다룹니다. 컴포넌트 속성을 사용하여 인스턴스를 편집하는 방법을 알아보세요.

컴포넌트 속성은 컴포넌트에서 변경이 가능한 측면입니다. 이를 통해 컴포넌트의 어떤 부분을 변경할 수 있는지 전달할 수 있습니다.

• 어떤 컴포넌트 레이어에 숨기거나 표시할 수 있는 옵션이 있는지
• 인스턴스를 교체할 수 있는지와 교체할 기본 인스턴스를 설정할 수 있는지
• 어떤 텍스트 문자열을 변경할 수 있는지

컴포넌트 속성은 디자인 시스템의 부분을 정의하고 디자인 시스템의 사용을 보다 쉽게 만들기 위해 만들어지며 주요 컴포넌트와 컴포넌트 세트에 적용됩니다.

컴포넌트 속성이 있는 컴포넌트를 사용하면 오른쪽 패널에서 통합된 단일 컨트롤 세트를 볼 수 있으므로 한눈에 무엇이 변경 가능한지 파악하고 한곳에서 편집할 수 있습니다.

이로 인해 문서를 참조하는 데 필요한 시간이 줄어들고, 컴포넌트와 디자인 시스템을 더 정확하게 사용할 수 있으며, 개별 레이어를 선택하고 재정의할 필요성이 줄어듭니다.

컴포넌트 속성 유형

컴포넌트 속성은 서로 다른 디자인 속성에 연결되어 있습니다. 주요 컴포넌트나 컴포넌트 세트의 변형을 위한 컴포넌트 속성을 생성하고, 이를 컴포넌트나 변형의 중첩된 레이어에 적용할 수 있습니다.

컴포넌트 속성은 다양한 유형으로 제공됩니다.

컴포넌트 속성 유형	용도
불리언 속성	버튼에 있는 아이콘처럼, 레이어 표시를 켜거나 끌 수 있는 레이어를 지정합니다.
인스턴스 교체 속성	교체할 수 있는 인스턴스를 나타내고, 선호하는 인스턴스를 교체 대상으로 설정합니다.
텍스트 속성	변경할 수 있는 텍스트 콘텐츠를 지정합니다.
베리언트 속성	컴포넌트의 다양한 상태, 크기, 또는 색상과 같은 다양한 변형을 정의합니다.

컴포넌트 속성 생성 및 적용

불리언 속성

불리언 속성을 사용하여 true/false 값을 설정합니다. 이를 통해 속성을 켜거나 끌 수 있습니다. 예를 들어 디자인 시스템에 아이콘이 있는 버튼과 없는 버튼이 있는 경우 각 상태에 변형을 만드는 대신 아이콘의 레이어 표시 여부에 불리언 속성을 적용합니다.

현재로서는 불리언 속성은 레이어 표시만 지원합니다. 

불리언 속성 생성

레이어 표시를 위한 불리언 속성이 생성되면, 값이 false로 설정되면 레이어가 숨겨집니다. true로 토글하면 레이어가 표시됩니다.

1. 주요 컴포넌트 또는 컴포넌트 세트를 선택합니다.
2. 오른쪽 사이드바에서 아이콘을 클릭하고 속성 섹션에서 불리언을 드롭다운에서 선택합니다.
3. 컴포넌트 속성 만들기 모달에서 필드와 드롭다운 메뉴를 사용하여 속성을 구성합니다.
   • 텍스트 필드에서 속성에 이름을 지정합니다.
   • 기본값을 true 또는 false로 설정합니다. 기존의 불리언 변수가 있는 경우, 변수 적용 아이콘을 클릭하여 적용할 수 있습니다.
4. 속성 생성을 클릭합니다.

컴포넌트에 불리언 속성을 적용합니다.

1. 메인 컴포넌트 또는 변형에서 중첩된 레이어를 선택합니다.
2. 변형을 사용하는 경우, 아이콘을 클릭하여 다중 편집을 활성화한 다음, 일치하는 개체를 편집하고 업무 흐름을 가속화할 수 있습니다. 멀티 편집 변형에 관해 자세히 알아보세요.
3. 오른쪽 사이드바에서 외형 섹션을 찾은 다음 변수/속성 적용 아이콘을 클릭합니다.
4. 목록에서 불리언 속성을 선택합니다. 적용되면 오른쪽 사이드바에 속성 이름이 있는 보라색 알약이 표시됩니다.

인스턴스 교체 속성

인스턴스 교체 속성을 사용하면 메인 컴포넌트나 변형에 중첩된 인스턴스 중 어떤 것을 교체할 수 있는지 나타낼 수 있습니다.

인스턴스 교체 속성을 생성할 때, 파일에 생성된 컴포넌트나 파일에 추가된 라이브러리를 사용하여 기본 인스턴스를 설정할 수 있습니다. 또한, 다른 사람들이 교체할 수 있는 인스턴스를 알 수 있도록 선호하는 인스턴스를 설정할 수도 있습니다. 인스턴스 교체 속성을 사용하여 컴포넌트를 교체하는 방법을 배우세요.

인스턴스 교체 속성 생성하기

1. 주요 컴포넌트 또는 컴포넌트 세트를 선택합니다.
2. 오른쪽 사이드바에서 속성 섹션을 클릭하고 드롭다운에서 인스턴스 교체를 선택합니다.
3. 컴포넌트 속성 만들기 모달에서 필드와 드롭다운 메뉴를 사용하여 속성을 구성합니다.
   • 텍스트 필드를 사용하여 속성의 이름을 지정합니다.
   • 드롭다운을 사용하여 파일에 생성된 컴포넌트의 인스턴스나 파일에 추가된 라이브러리에서 인스턴스를 선택하여 기본값을 설정합니다.
   • 원하는 경우, 다른 사람들이 인스턴스를 교체할 때 어떤 컴포넌트를 선택해야 하는지 알 수 있도록 선호하는 인스턴스를 설정합니다.
4. 속성 생성을 클릭합니다.

컴포넌트에 인스턴스 교체 속성 적용

1. 메인 컴포넌트 또는 변형 내에 중첩된 인스턴스를 선택합니다.
2. 변형을 사용하는 경우, 아이콘을 클릭하여 다중 편집을 활성화한 다음, 일치하는 개체를 편집하고 업무 흐름을 가속화할 수 있습니다. 멀티 편집 변형에 관해 자세히 알아보세요.
3. 오른쪽 사이드바 상단에서 인스턴스 교체 속성 적용을 클릭합니다.
4. 목록에서 인스턴스 속성을 선택합니다. 적용되면 오른쪽 사이드바에 속성 이름이 있는 보라색 알약이 표시됩니다.

선호하는 값 선택

선호 값을 사용하면 인스턴스 교체 시 선택 가능하도록 선별된 컴포넌트 세트를 만들 수 있습니다(인스턴스 교체 속성 사용). 기존 컴포넌트를 대체할 수 있는 구체적인 컴포넌트를 전달하여 불확실함을 줄입니다.

예를 들어, 아이콘이 교체 가능함을 나타내기 위해 인스턴스 교체 속성이 있는 아이콘 버튼을 생성한다고 가정해 봅니다.아이콘 라이브러리에는 100개가 넘는 아이콘이 있지만, 이 중 8개만 이 버튼에 사용해야 합니다.

이 8개의 아이콘을 쉽게 찾고 어떤 아이콘이 사용 가능한지 알 수 있도록 선호 값으로 추가합니다. 이제 정리된 에셋 목록이 있으므로 디자이너는 아이콘을 교체하고 싶을 때마다 무엇을 사용해야 할지 알 수 있습니다.

선호 값이 있는 컴포넌트를 사용하는 경우 인스턴스 교체 속성 메뉴를 열면 기본적으로 선호 값 목록이 나타납니다.

인스턴스에 선호 값을 추가하려면:

1. 먼저 기존 인스턴스 교체 속성을 편집하거나 새 속성을 생성합니다.
2. 각 모달에서 선호 값 섹션에서 를 클릭하고 선호 값으로 포함하려는 인스턴스 옆의 확인란을 선택합니다.

선호 값을 제거하려면 모달의 선호 값 섹션에서 값 옆의 를 클릭합니다.

텍스트 속성

텍스트 속성을 사용하여 컴포넌트에서 편집할 수 있는 텍스트 내용을 나타낼 수 있습니다. 텍스트 내용은 오른쪽 패널이나 캔버스에서 편집할 수 있습니다.

텍스트 속성 생성하기

1. 주요 컴포넌트 또는 컴포넌트 세트를 선택합니다.
2. 오른쪽 사이드바의 속성 섹션을 클릭하고 드롭다운에서 텍스트를 선택합니다.
3. 컴포넌트 속성 생성 모달에서 필드를 사용하여 속성을 구성합니다.
   • 텍스트 필드를 사용하여 속성의 이름을 지정합니다.
   • 값 텍스트 필드를 사용하여 기본 텍스트 문자열을 설정합니다. 사용 가능한 경우  변수 적용을 클릭하여 기존 문자열 변수를 적용할 수도 있습니다.
4. 속성 생성을 클릭합니다.

텍스트 속성을 컴포넌트에 적용하기

1. 메인 컴포넌트 또는 변형에서 중첩된 텍스트 레이어를 선택합니다.
2. 오른쪽 사이드바 맨 위의 텍스트 섹션에서 텍스트 필드 위로 마우스를 가져가고 변수/속성 적용을 클릭합니다.
3. 목록에서 텍스트 속성을 선택합니다.

베리언트 속성

베리언트는 컴포넌트 세트 내의 개별 컴포넌트입니다.

베리언트 속성을 사용하면 상태, 색상 또는 크기 등 베리언트의 속성을 정의할 수 있습니다.

컴포넌트 세트에는 여러 변형이 포함되어 있으며, 변형에 포함된 속성은 변형 속성에 의해 정의될 수 있습니다. 변형 속성은 변형과 컴포넌트 세트별로 고유하며, 주요 컴포넌트에 대해서는 생성되거나 적용될 수 없습니다.

변형 및 컴포넌트 세트 생성 방법을 자세히 알아보세요.

아래 예시에는 네 가지 베리언트가 포함된 버튼 컴포넌트 세트가 있습니다. 크기와 색상, 두 가지 베리언트 속성이 있습니다. 크기 값에는 작은 값과 큰 값이 포함되며 색상 값에는 녹색과 빨간색이 포함됩니다.

다른 컴포넌트 속성으로 전환하기

레이어에 컴포넌트 속성이 적용된 경우 언제든지 다른 것으로 전환할 수 있습니다.

1. 오른쪽 사이드바에서 변경하려는 컴포넌트 속성에 대한 해당 섹션을 찾습니다.
   • 인스턴스 교체 속성: 오른쪽 사이드바 상단.
   • 텍스트 속성: 오른쪽 사이드바의 텍스트 섹션 상단.
   • 불리언 속성: 외관 섹션.
2. 보라색 알약을 클릭합니다.
3. 동일한 유형의 기존 속성을 선택합니다.

컴포넌트 속성 사용자 정의

기본 값 변경

텍스트, 불리언 또는 인스턴스 교체 속성의 기본 값을 변경합니다.

1. 컴포넌트 세트 또는 주요 컴포넌트를 선택합니다.
2. 편집 속성 모달을 열기 위해 변형 속성 옆의 아이콘을 클릭합니다.
3. 기본 값을 업데이트하려면 값 섹션의 텍스트 필드나 드롭다운을 사용합니다.

연관된 인스턴스 레이어에 속성 재정의가 적용되지 않은 경우 기본 값을 업데이트하면 캔버스에 반영됩니다.

중첩된 인스턴스 노출

특정 중첩 인스턴스를 노출하여 최상위 인스턴스의 속성과 함께 해당 컴포넌트 속성을 표시합니다. 디자인 시스템 사용자는 이를 통해 레이어를 일일이 살펴보지 않고도 중첩된 인스턴스와 해당 컴포넌트 속성을 찾을 수 있습니다.

예를 들어 아바타, 이름, 버튼 등 여러 컴포넌트가 중첩된 소셜 미디어 카드 컴포넌트를 만든다고 해봅시다. 기본 버튼의 아이콘을 '전송' 아이콘으로 변경하고, 텍스트를 변경하고자 합니다. 또한 취소 버튼 상태를 비활성화 상태로 변경하고자 합니다.

이때 각 레이어를 일일이 보면서 해당 컴포넌트 속성 컨트롤을 찾는 대신, 중첩된 인스턴스를 노출하면 최상위 컴포넌트(이 경우 소셜 미디어 카드)만 클릭하여 한 곳에서 인스턴스를 편집할 수 있습니다.

중첩 인스턴스가 노출된 최상위 인스턴스를 선택하면 최상위 및 중첩 인스턴스의 컴포넌트 속성 목록이 오른쪽 패널에 나타납니다.

속성 행 위에 마우스를 올리면 캔버스에서 해당 개체 주위에 밝은 보라색 강조 표시가 나타나 편집 중인 내용을 알 수 있습니다.

노출할 중첩 인스턴스 선택

주요 컴포넌트 또는 컴포넌트 세트를 선택한 상태에서 오른쪽 패널의 속성 섹션에서 를 클릭하고 속성 노출 아래에 있는 중첩 인스턴스를 선택합니다.

중첩된 인스턴스 노출 모달에서 최상위에 표시할 인스턴스의 상자를 선택합니다.

선택한 중첩 인스턴스 목록이 오른쪽 패널에 나타납니다.

중첩된 인스턴스가 노출되지 않도록 제거하려면 이 목록에서 인스턴스 이름 위에 마우스를 올려놓고 를 클릭하세요.

인스턴스 단순화

인스턴스를 단순화하면 컴포넌트 속성이 적용되지 않은 레이어를 숨겨 레이어 및 속성 패널의 복잡함을 줄이는 데 도움이 됩니다. Figma는 컴포넌트 속성이 없는 레이어는 편집해서는 안 되는 레이어이므로 숨길 수 있다고 가정합니다.

인스턴스를 단순화하려면 주요 컴포넌트 또는 컴포넌트 세트를 선택하고 오른쪽 패널에서 컴포넌트 구성을 클릭합니다. 팝업에서 모든 인스턴스 단순화 확인란을 선택합니다.

단순화된 컴포넌트의 인스턴스를 사용할 때, 초과 레이어는 모든 레이어 보기 아래에 축소됩니다. 모든 레이어 보기를 클릭하여 레이어를 확장하고 볼 수 있습니다. 레이어 패널 밖을 클릭하거나 다른 레이어를 선택하면 다시 축소할 수 있습니다.

컴포넌트 속성 관리

컴포넌트 속성과 값을 만든 후에는 언제든지 이를 관리할 수 있습니다. 이름 바꾸기, 순서 바꾸기, 삭제, 기본 값 변경 등이 가능합니다.

속성 분리

레이어에서 텍스트, 인스턴스 교체 또는 불리언 속성을 분리합니다.

1. 컴포넌트 속성이 적용된 중첩 레이어를 선택합니다.
2. 속성 옆에 있는 오른쪽 사이드바 패널에서 아이콘을 클릭하여 속성을 연결 해제합니다.

이렇게 하면 레이어에서 컴포넌트 속성이 제거되지만 컴포넌트 속성은 삭제되지 않습니다.

이름 바꾸기, 순서 바꾸기 또는 삭제

속성

기존 컴포넌트 속성의 이름을 바꾸거나 순서를 바꾸거나 삭제하려면:

1. 주요 컴포넌트 또는 컴포넌트 세트를 선택합니다.
2. 오른쪽 사이드바의 속성 섹션에서:

   • 이름 바꾸기: 속성 이름을 두 번 클릭합니다. 새 이름을 입력한 후 Return / Enter를 누르거나 필드 밖을 클릭하여 적용합니다.

   • 순서 바꾸기: 속성 위로 마우스를 가져가면 핸들이 표시됩니다. 클릭하고 드래그하여 순서를 변경한 다음, 마우스를 놓아 적용합니다.

     베리언트 속성은 항상 오른쪽 사이드바에서 다른 속성 유형 위에 위치합니다. 다른 베리언트 속성으로 순서를 바꿀 수는 있지만 그 외 다른 속성 유형으로는 순서를 바꿀 수 없습니다.

   • 삭제: 속성을 마우스 오른쪽 버튼으로 클릭하고 속성 삭제를 클릭합니다. 또는 속성을 선택하고 삭제를 누릅니다.

     컴포넌트 세트나 주요 컴포넌트에 베리언트 속성이 하나만 포함된 경우, 속성을 삭제하면 전체 컴포넌트 세트나 주요 컴포넌트가 삭제됩니다.

값

베리언트 속성의 값을 변경하거나 순서를 바꾸려면:

1. 컴포넌트 세트 또는 주요 컴포넌트를 선택합니다.
2. 편집 속성 모달을 열기 위해 변형 속성 옆의 아이콘을 클릭합니다.
   • 변경: 값 섹션에서 텍스트 필드를 사용하여 값을 변경하거나 업데이트합니다.
   • 순서 바꾸기: 값 위에 마우스를 올리면 핸들이 표시됩니다. 클릭하고 드래그하여 순서를 변경합니다.

Dev Mode의 컴포넌트 플레이그라운드

Dev Mode에서 컴포넌트 또는 인스턴스를 선택하면 컴포넌트 미리보기, 주요 컴포넌트와 연결된 링크, 관련 문서 및 개발 리소스와 연결된 링크가 표시됩니다.

컴포넌트 플레이그라운드는 컴포넌트 인스턴스가 선택될 때 검사 패널에 나타납니다. 플레이그라운드를 사용하여 실제 디자인을 변경하지 않고 컴포넌트의 다양한 속성을 실험해 보세요. Dev Mode에서 컴포넌트 플레이그라운드를 열려면:

1. 캔버스에서 컴포넌트 인스턴스를 선택합니다.
2. 검사 패널에서 플레이그라운드에서 열기를 클릭합니다.

Dev Mode를 사용하여 디자인을 검사하는 방법에 대해 자세히 알아보세요.