[Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사용이유)

이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자.

 

스왑 인스턴스(swap instance)란?

Swap(바꾸다) +Instance(복사본)

인스턴스(복사본)를 다른 인스턴스로 바꿔주는 기능이다.

왜 사용해야 할까?

인스턴스는 마스터 컴포넌트에 없는 요소를 추가할 수 없기 때문에 이 방법을 활용해서 아이콘, 이미지 등을 바꾸어 줄 수 있다.

(단, 바꾸어줄 아이콘 이미지 등 모두 컴포넌트로 만들어 놓아야 한다.)

 

 

어디에 적용될 수 있는데?

Web/Mobile을 디자인 혹은 기획 시  공통부분을 제작할 때 유용하게 사용된다. 예로 들면 header, List에서 아이콘을 변경하려 할 때 스왑 인스턴스(swap instance)를 사용한다. 

 

 

스왑 인스턴스 (swap instance) 사용방법

스왑 인스턴스 사용방법

스왑 인스턴스를 이용해 갓생기획 로고의 색상을 변경해 보았다.

 

 

스왑 인스턴스 적용 방법 

1. ⭐변경하고자 하는 아이콘, 이미지 등을 컴포넌트로 만든다. (Ctrl+Alt+K)
2. 변경되는 영역에 인스턴스를 삽입한다. (컴포넌트는 삽입할 수 없기 때문에, 인스턴스로 만들어 삽입한다.) 
3. 인스턴스를 더블클릭하여 디자인 패널에서 아이콘, 이미지를 변경할 수 있다. 

 

컴포넌트 쓸 때 기억하면 좋은 원칙

1. 옵션 적용은 마스터 컴포넌트에서 할 수 있다. 마스터 원본은 별도로 관리가 필요하다.
2. 화면에 적용할 때는 인스턴스를 이용한다. 

 

 

 

 

↓ 함께보면 좋은 피그마 포스팅 ↓

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

 

[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까

 

[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)