프로토타입에서 변수 사용

시작하기 전에

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

모든 유료 요금제에서 사용 가능

파일에 대한 편집 가능 액세스 권한이 있는 모든 사용자는 프로토타입을 만들 수 있음

파일에 대한 보기 가능 또는 프로토타입만 보기 가능 액세스 권한이 있는 모든 사용자는 프로토타입을 볼 수 있음

Figma에서 변수는 디자인 속성 또는 저장된 상태를 나타내는 저장된 값으로, 문자열, 숫자, 색상 또는 부울 값 유형일 수 있습니다.

프로토타입 제작 작업에서 변수 값을 설정하고 수정할 수 있으므로 몇 가지 간단한 프레임과 상호 작용만 사용하여 사용자 선택에 따라 동적으로 변경되는 몰입형 프로토타입을 만들 수 있습니다. 즉, 프로토타입 작업을 사용하여 다음을 수행할 수 있습니다.

• 문자열 변수로 텍스트 내용 업데이트
• 숫자 변수로 개체 치수, 모서리 반경 또는 자동 레이아웃 속성 변경
• 부울 변수로 레이어 가시성 전환

프로토타입에서 변수를 사용하려면 변수를 설정한 다음, 변수 설정 작업을 사용하여 변수 값을 변경하거나 수정합니다.

변수와 프로토타입을 함께 사용할 수 있게 되면 몇 가지 고급 기능을 사용해 강력한 활용 범위를 더욱 확장해 보세요.

• 표현식: 기본적인 연산으로 변수를 조작함으로써 유연한 값으로 더욱 향상된 프로토타입을 구축할 수 있습니다.
• 다중 작업 및 조건문: if/else 문을 사용하여 작업을 수행하기 전에 조건이 충족되는지 확인하고 단일 트리거에 작업을 무제한으로 쌓을 수 있습니다.

변수를 처음 사용하시나요? Figma의 변수에 대해 자세히 알아보기 →

변수 설정

변수를 사용하여 프로토타입을 제작하려면 다음을 수행해야 합니다.

1. 변수 생성: 변수 컬렉션을 생성하고 구성하는 방법 알아보기 →
2. 변수 적용: 텍스트 내용, 개체 치수, 레이어 가시성 등에 변수를 적용하는 방법 알아보기 →

변수 값 설정

디자인 전반에 변수를 생성하고 적용한 후에는 프로토타입에서 해당 변수를 사용할 수 있습니다.

각 프로토타입 상호 작용에는 트리거(프로토타입이 진행되게 하는 요소)와 하나 이상의 다중 작업(트리거의 결과로 발생하는 일)이 있습니다.

변수 설정 작업을 사용하면 프로토타입 트리거의 결과로 변수 값을 설정하거나 수정할 수 있습니다.

프로토타입 상호 작용에서 변수 설정 작업을 사용하려면 다음 단계를 따르세요.

1. 프로토타입 상호 작용을 만듭니다.
2. 상호 작용 세부 정보 패널로 이동하여 드롭다운 메뉴에서 트리거를 선택합니다.
3. 작업 드롭다운 메뉴에서 변수 설정을 선택합니다.
4. 대상 변수 선택 드롭다운 메뉴에서 새 값을 설정하려는 대상 변수를 선택합니다.
5. 표현식 쓰기 필드에 변수의 새 값을 입력합니다. 새 값 유형은 변경하려는 변수 유형과 일치해야 합니다. 예를 들어 숫자 변수를 선택한 경우 새 값도 숫자여야 합니다.
   • 문자열 값: 텍스트 문자열 리터럴(따옴표 안에 포함됨)을 입력하거나 선택 패널에서 문자열 변수를 선택합니다.
   • 숫자 값: 숫자 값을 입력하거나 선택 패널에서 숫자 변수를 선택합니다.
   • 부울 값: true 또는 false를 입력하거나 선택 패널에서 부울 변수를 선택합니다.
   • 색상 값: 헥스 코드를 입력하거나 컬러 피커에서 헥스 코드를 선택합니다.
6. 프로토타입을 재생하여 상호 작용을 테스트합니다.

변수를 사용하여 실제로 프로토타입 제작

기본 사항을 익힌 후에는 다양한 방법으로 프로토타입과 변수를 사용할 수 있습니다.

구성요소 변형에 변수 사용

구성요소 변형에 변수를 적용할 수 있습니다. 이렇게 하면 변수 설정 작업을 사용하여 구성요소를 자동으로 업데이트할 수 있습니다.

1. 변형이 두 개 이상 있는 구성요소 세트를 생성합니다. (예를 들어 “circle” 및 “square” 값을 갖는 “shape” 변형 속성이 있는 구성요소 세트를 생성합니다.)
2. 프레임에 변형 인스턴스를 배치합니다.
3. 인스턴스에 변수를 할당합니다. 변수 값은 변형 속성 값과 일치해야 합니다. (예를 들어 인스턴스에 기본 “circle” 값을 갖는 shapeType 변수를 할당합니다.)
   1. 인스턴스를 클릭하여 선택합니다.
   2. 오른쪽 사이드바에서 변형 속성 오른쪽으로 마우스를 가져간 다음, 변수 할당을 클릭합니다.
   3. 속성에 바인딩하려는 변수를 선택합니다.
4. 변수 설정 작업을 사용하는 프레임 내 개체에 대한 상호 작용을 만듭니다. 사용되지 않은 변형 속성의 값과 일치하도록 변수 값을 변경합니다. (예를 들어 shapeType 변수 값을 “square”로 설정합니다.)
5. 프로토타입을 재생하여 상호 작용을 테스트합니다. 상호 작용이 트리거되고 변수가 변경되면 변형도 업데이트됩니다.

대화형 구성요소에 변수 사용

구성요소 변형에 변수를 사용하는 것과 유사하게 대화형 구성요소에 변수를 적용할 수 있습니다.

이제 대화형 구성요소를 클릭하면 다음과 같이 됩니다.

• 변형이 업데이트됩니다.
• 변수가 업데이트되며, 결과적으로 동일한 변수에 바인딩된 다른 모든 요소도 업데이트됩니다.

변수와 함께 대화형 구성요소를 사용하려면 다음 단계를 따르세요.

1. 대화형 구성요소 세트를 생성합니다. (예를 들어 “true” 및 “false” 값을 갖는 “clicked” 변형 속성이 있는 버튼 대화형 구성요소를 생성합니다.)
2. 프레임에 대화형 구성요소 세트의 변형 인스턴스를 배치합니다.
3. 대화형 구성요소 인스턴스에 변수를 할당합니다. 변수 값은 변형 속성 값과 일치해야 합니다. (예를 들어 기본 “false” 값을 갖는 부울 circleVisibility 변수를 인스턴스에 할당합니다.)
   1. 인스턴스를 선택합니다.
   2. 오른쪽 사이드바에서 변형 속성 중 하나에 대한 드롭다운 메뉴를 선택합니다.
   3. 변수 할당을 선택합니다.
   4. 속성에 바인딩할 변수를 클릭하여 선택합니다.
4. 프로토타입을 재생하여 상호 작용을 테스트합니다. 상호 작용이 트리거되고 구성요소가 변경되면 변수 값도 변경됩니다. 즉, 동일한 변수가 다른 모든 값에 바인딩되어 있는 경우 해당 값도 업데이트됩니다.