이번에 피그마에서 variable(변수)를 설정할 수 있는 기능이 업데이트되었습니다. variable 기능을 이용하면 상황에 따라 값이 변하는 UI를 만들 수 있습니다. 예를들어, 네비게이션바를 PC 캔버스에 배치하면 PC용 네비게이션바로 보여지고, Mobile 캔버스에 배치하면 Mobile용 네비게이션바가 보여지도록 할 수 있습니다. 방금 예시로 든 예제를 만들어보겠습니다. 4단계만 따라하면됩니다.
스크린 타입에 따라 자동으로 변경되는 컴포넌트 만들기.
![](https://framerusercontent.com/images/jr3VaOdb33FGGp3LasFyx89BXY.png)
Figma
![](https://framerusercontent.com/images/G4LzmK9iB9h3Y4tKXk25YrsDE.png)
KimKK
Product Designer
UI 준비하기
UI에 변수 적용하기
두 개의 캔버스를 만들고 구분을 위해 한 캔버스의 이름은 PC Screen, 다른 한 프레임의 이름은 Mobile Screen 으로 입력합니다.
![](https://framerusercontent.com/images/yozGkYIuknX5BGUmTX3nG6Ii70.png)
앞서 만들어둔 PC 캔버스를 선택하고 우측 layer 항목에서 pc screen을 설정하고 mobile 캔버스에는 mobile screen을 설정합니다.
그 다음엔 네비게이션바를 만들어보겠습니다. 하나는 pc용 네비게이션바, 다른 하나는 mobile용 네비게이션바를 만듭니다.
![](https://framerusercontent.com/images/MMCptKVtfUeaqHKCB5auTzQyS64.png)
![](https://framerusercontent.com/images/WjwXO0fLjZ3xzy3Yqg4VNAxPAxk.png)
앞서 만들어둔 네비게이션바 컴포넌트를 인스턴스로 꺼낸 후, 프로퍼티 항목을 변수로 설정합니다.
![](https://framerusercontent.com/images/aIZHtB2vcNLJlIYqAT1EDYm6yA.png)
![](https://framerusercontent.com/images/qs0MuRkGs53YuFL99cQfHKQCjQ.png)
![](https://framerusercontent.com/images/KAwNJqdiJIWlaVa7jWgNTPCT1Tg.png)
(중요) 그리고 각각의 프로퍼티에 pc, mobile이라 등록해둡니다.
사용해보기
이제 해당 네비게이션바를 PC 캔버스에 넣으면 PC용 네비게이션바로 보여지고 모바일 캔버스에 넣으면 모바일 네비게이션바로 보여집니다.
![](https://framerusercontent.com/images/yozGkYIuknX5BGUmTX3nG6Ii70.png)
부모 캔버스의 하위 ui는 부모 캔버스에 설정된 값을 따라가기때문에, 네비게이션바의 프로퍼티를 변수로 설정하면 이 값을 따라가게됩니다.
![](https://framerusercontent.com/images/8IduqZtq0OwKtd3Xo6LW4xRpKI.png)
변수 설정하기
![](https://framerusercontent.com/images/aIZHtB2vcNLJlIYqAT1EDYm6yA.png)
앞서 만들어둔 PC 캔버스를 선택하고 우측 layer 항목에서 pc screen을 설정하고 mobile 캔버스에는 mobile screen을 설정합니다.