이번에 피그마에서 variable(변수)를 설정할 수 있는 기능이 업데이트되었습니다. variable 기능을 이용하면 상황에 따라 값이 변하는 UI를 만들 수 있습니다. 예를들어, 네비게이션바를 PC 캔버스에 배치하면 PC용 네비게이션바로 보여지고, Mobile 캔버스에 배치하면 Mobile용 네비게이션바가 보여지도록 할 수 있습니다. 방금 예시로 든 예제를 만들어보겠습니다. 4단계만 따라하면됩니다.

스크린 타입에 따라 자동으로 변경되는 컴포넌트 만들기.

Figma

KimKK

Product Designer

UI 준비하기

UI에 변수 적용하기

두 개의 캔버스를 만들고 구분을 위해 한 캔버스의 이름은 PC Screen, 다른 한 프레임의 이름은 Mobile Screen 으로 입력합니다.

앞서 만들어둔 PC 캔버스를 선택하고 우측 layer 항목에서 pc screen을 설정하고 mobile 캔버스에는 mobile screen을 설정합니다.

그 다음엔 네비게이션바를 만들어보겠습니다. 하나는 pc용 네비게이션바, 다른 하나는 mobile용 네비게이션바를 만듭니다.

앞서 만들어둔 네비게이션바 컴포넌트를 인스턴스로 꺼낸 후, 프로퍼티 항목을 변수로 설정합니다.

(중요) 그리고 각각의 프로퍼티에 pc, mobile이라 등록해둡니다.

사용해보기

이제 해당 네비게이션바를 PC 캔버스에 넣으면 PC용 네비게이션바로 보여지고 모바일 캔버스에 넣으면 모바일 네비게이션바로 보여집니다.

부모 캔버스의 하위 ui는 부모 캔버스에 설정된 값을 따라가기때문에, 네비게이션바의 프로퍼티를 변수로 설정하면 이 값을 따라가게됩니다.

변수 설정하기

앞서 만들어둔 PC 캔버스를 선택하고 우측 layer 항목에서 pc screen을 설정하고 mobile 캔버스에는 mobile screen을 설정합니다.