피그마 프로토타입 기능 사용시 컴포넌트 활용법

저는 피그마의 컴포넌트 기능이 복제한 요소들을 한꺼번에 수정할 때에만 쓰는 기능인 줄로만 알고 있었어요.

그런데 최근 프로토타입 시에도 이 기능을 유용하게 쓸 수 있다는 사실을 알게 되었답니다.

​

우선 컴포넌트 만드는 법입니다.

1. 내가 컴포넌트로 만들고 싶은 도형/이미지 등을 클릭합니다.

2. 피그마 상단의 마름모 모형을 클릭합니다.

이렇게 컴포넌트가 만들어집니다.

(컴포넌트가 된 모습입니다. 위와 같이 보라색의 테두리가 형성됩니다.)

간단한 프로토타입 사용법입니다.

1. 사이드바의 'Prototype'을 누릅니다.

2. 도형/이미지와, 해당 도형/이미지 클릭 시에 이동하고자 하는 페이지를 연결시켜줍니다.

저는 백 버튼('<')을 이전 페이지와 연결시켰어요.

그리고 여기서부터 오늘의 본론이 나옵니다.

컴포넌트가 있는 페이지 or 컴포넌트를 복제합니다.

저는 컴포넌트가 있는 페이지를 두 장 복제했어요.

그리고 사이드바의 Prototype 기능을 켠 채로 '복제된 컴포넌트'('인스턴스'라고 합니다.)를 클릭해보면

자동으로 원래의 컴포넌트와 연결된 페이지(즉, Android Small -2)와 동일한 페이지에 연결이 되어 있어요😃

​

정리하자면,

컴포넌트를 만들고 프로토타입을 연결하고, 인스턴스(컴포넌트 복제품)를 만들면 자동으로 프로토타입이 연결된다고 할 수 있겠습니다.

‍