프로토타입에서 변수 사용 – Figma Learn - 도움말 센터

시작하기 전에

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

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

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

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

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

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

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

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

Figma의 변수에 대해 자세히 알아보기.

지금 사용하기

더 많이 연습하고 싶으신가요? 고급 프로토타입 제작 플레이그라운드 파일을 확인해 보세요.

프로토타입에서 변수를 사용하는 방법의 더 많은 예시를 찾고 계신가요? 고급 프로토타입 제작 예시를 더 확인해 보세요.

변수 설정

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

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

변수 값 설정

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

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

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

프로토타입 인터랙션에서 Set variable 작업을 사용하려면 다음 단계를 따르세요.

프로토타입 인터랙션을 만듭니다.
인터랙션 모달로 이동하여 드롭다운 메뉴에서 트리거를 선택합니다.
Action 드롭다운 메뉴에서 Set variable을 선택합니다.
대상 드롭다운 메뉴에서 새 값을 설정할 변수를 선택합니다.
값 필드에 변수의 새 값을 입력합니다. 새 값 유형은 변경하려는 변수 유형과 일치해야 합니다. 예를 들어 숫자 변수를 선택한 경우, 새 값도 숫자여야 합니다.
- 문자열 값: 텍스트 문자열 리터럴(따옴표 포함)을 입력하거나 선택 패널에서 문자열 변수 선택
- 숫자 값: 숫자 값을 입력하거나 선택 패널에서 숫자 변수 선택
- 불리언 값: true 또는 false를 입력하거나 선택 패널에서 불리언 변수 선택
- 색상 값: 헥스 코드를 입력하거나 색상 선택기에서 헥스 코드 선택
프로토타입을 재생하여 인터랙션을 테스트합니다.

두 개의 프레임이 있는 디자인. 첫 번째 프레임의 이미지에 프로토타입 동작이 설정되어 있습니다. 이미지를 클릭하면 profileName 변수 값이 업데이트되고 프로토타입이 다음 프레임으로 이동합니다.

참고:

변수에 여러 모드가 있나요? 변수 값을 특정 모드 값으로 설정하는 방법에 대해 자세히 알아보세요.

팁:

표현식을 사용하면 연산을 통해 변수를 조작할 수 있습니다. 예를 들어 숫자 변수에 대해 기초적인 계산을 수행하거나 여러 문자열 변수를 함께 결합하거나 불리언 표현식을 사용할 수 있습니다.

지금 사용하기

“Shapes”라는 변수 컬렉션을 만들어 보겠습니다. 이 컬렉션에는 도형 이름을 나타내는 하나의 문자열 변수가 포함됩니다.

캔버스에서 모든 항목을 선택 해제한 다음, 오른쪽 사이드바에서 로컬 변수 섹션을 찾아 변수 열기를 클릭합니다.
변수 생성을 클릭하고 문자열을 선택합니다.
이름 열에 “shapeName”을 입력합니다.
값 열에 “circle”을 입력합니다.

이제 shapeName 변수를 디자인에 적용할 수 있습니다. 이 예에서는 두 가지 도형(원과 정사각형)이 있는 프레임과 두 개의 텍스트 레이어가 포함된 간단한 디자인을 만들었습니다. 선택한 도형에 따라 변경되도록 shapeName 변수를 아래쪽 텍스트 레이어에 바인딩하려고 합니다.

아래 그림과 같은 디자인을 다시 만듭니다. 타원 개체, 직사각형 개체, 두 개의 텍스트 레이어를 프레임에 추가합니다. 첫 번째 텍스트 레이어의 내용으로 “You picked:”를 입력합니다.
프레임의 아래쪽 텍스트 레이어를 클릭하여 선택합니다.
오른쪽 사이드바의 디자인 탭에서 텍스트 섹션을 찾아 변수 적용을 클릭합니다.
변수 선택 패널에서 shapeName 변수를 선택하여 텍스트 내용에 적용합니다.

이제 Set variable 작업으로 인터랙션을 추가해 보겠습니다.

타원 개체를 선택합니다.
오른쪽 사이드바에서 프로토타입 탭으로 전환합니다. 인터랙션 섹션에서 더하기 기호를 클릭하여 새 인터랙션을 추가합니다.
인터랙션 세부 정보 패널에서 On tap/On click 트리거 및 Set variable 작업이 포함된 인터랙션을 만듭니다.
대상 드롭다운 메뉴에서 shapeName 변수를 선택합니다. 값 필드에 새 값을 “circle”로 설정합니다.
직사각형 개체에 대해 1~4단계를 반복합니다. 이번에는 shapeName 변수를 “square”로 설정합니다.

프레임에서 원형 개체가 선택되어 있고 인터랙션 모달이 열려 있습니다. 인터랙션 설정: 트리거는 On tap, 동작은 Set variable, 대상은 shapeName, 값은 circle입니다.

이제 프로토타입을 재생하여 테스트할 수 있습니다. 각 도형 개체를 클릭하면, 새로운 변수 값에 따라 텍스트 레이어가 자동으로 업데이트됩니다. 프로토타입이 재생되고 있습니다. 타원 개체를 선택하면 하단 텍스트 레이어가 circle로 업데이트됩니다. 사각형 개체를 선택하면 하단 텍스트 레이어가 square로 업데이트됩니다.

변수 및 컴포넌트로 프로토타입 제작

기본을 배우고 나면, 프로토타입에서 변수와 컴포넌트를 함께 사용할 수 있습니다.

컴포넌트에 변수를 적용하면 프로토타입에서 변수 값을 변경할 때 컴포넌트가 자동으로 업데이트됩니다. 변수 값이 변경되면 동일한 변수에 바인딩된 다른 모든 요소도 업데이트됩니다.

변수 값은 다음 방법으로 변경할 수 있습니다.

Set variable 작업 사용
인터랙티브 컴포넌트에서 변경 작업 사용
Set variable mode 작업 사용

예시

인터랙티브 버튼 컴포넌트 세트에는 기본 상태와 호버 상태가 있습니다. 그 컴포넌트는 변경 동작을 사용하므로 기본 변형 위에 커서를 올리면 호버 변형으로 전환되며 그 반대도 마찬가지입니다.

불리언 hoverState 변수는 변형의 인스턴스와 별도의 오버레이 레이어 가시성 모두에 적용됩니다.

프로토타입에서 기본 변형에 마우스를 올리면:

인스턴스가 호버 변형으로 업데이트됨
hoverState 불리언 변수가 false에서 true로 업데이트됨
이미지 레이어가 표시됨

비슷한 예시로 연습하고 싶으신가요? 아래의 “지금 사용하기” 섹션을 확인하세요.

변수를 적용하는 위치에 따라 프로토타입에서 변경 사항의 범위가 결정됩니다.

변수 적용 위치:	프로토타입 제작 시:
컴포넌트 인스턴스의 변형 속성	변수 값을 변경하여 인스턴스의 변형을 업데이트합니다.
컴포넌트 속성	변수 값을 변경하여 모든 컴포넌트 인스턴스를 업데이트합니다.

컴포넌트 및 변형 속성에 변수를 적용하는 방법에 대해 자세히 알아보세요.

지금 사용하기: 예시 1

인터랙티브 컴포넌트 세트를 생성하세요.
1. “true” 및 “false” 값을 가진 “clicked” 변형 속성이 있는 버튼 컴포넌트를 만듭니다.
2. 클릭 시 트리거와 변경 동작을 사용하여 “false” 변형에 프로토타입 인터랙션을 추가합니다. 이제 false 변형을 클릭하면 true 변형으로 전환됩니다.
프레임에 인터랙티브 컴포넌트 세트의 변형 인스턴스를 배치합니다.
1. false 변형을 프레임에 추가합니다.
변수를 인터랙티브 컴포넌트 인스턴스에 할당합니다. 변수 값은 변형 속성 값과 일치해야 합니다.
1. 기본값이 false인 불리언 circleVisibility 변수를 만듭니다.
2. 버튼 인스턴스를 선택합니다.
3. 오른쪽 사이드바에서 clicked 변형 속성에 마우스 커서를 올립니다.
4. 변수 적용을 선택합니다.
5. 속성에 바인딩할 circleVisibility 변수를 클릭하여 선택합니다.
디자인의 다른 레이어에 동일한 변수를 할당합니다.
1. 프레임에 타원 개체를 추가합니다.
2. 오른쪽 사이드바의 모양 섹션에서 숨기기 아이콘을 마우스 오른쪽 버튼으로 클릭합니다.
3. circleVisibility 변수를 선택하여 타원 레이어의 가시성에 불리언 변수를 적용하세요.
프로토타입을 재생하여 인터랙션을 테스트합니다. 인터랙션이 트리거되고 컴포넌트가 변경되면 변수 값도 변경됩니다. 즉, 동일한 변수가 다른 값에 바인딩되어 있는 경우 해당 값도 업데이트됩니다.

지금 사용하기: 예시 2

최소 두 개 이상의 변형이 있는 컴포넌트 세트를 만드세요.
1. “circle” 및 “square” 값을 가진 “shape” 변형 속성이 있는 컴포넌트 세트를 만듭니다.
프레임에 변형 인스턴스를 배치합니다.
인스턴스에 변수를 할당합니다. 변수 값은 변형 속성 값과 일치해야 합니다.
1. 기본값이 “circle”인 shapeType 문자열 변수를 만듭니다.
2. 인스턴스를 클릭하여 선택합니다.
3. 오른쪽 사이드바에서 변형 속성 오른쪽으로 마우스를 가져간 다음, 변수 할당을 클릭합니다.
4. 속성에 바인딩하려는 변수를 선택합니다.
Set variable 작업을 사용하는 프레임 내 개체에 대한 인터랙션을 만듭니다. 사용되지 않은 변형 속성의 값과 일치하도록 변수 값을 변경합니다.
1. 개체에 프로토타입 인터랙션을 추가하려면 On click/On tap 트리거와 Set variable 작업을 사용합니다. shapeType 변수 값을 “square”로 설정하세요.
프로토타입을 재생하여 인터랙션을 테스트합니다. 인터랙션이 트리거되고 변수가 변경되면, 변형도 업데이트됩니다.