#
서비스 기획
2022-12-21

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

정리하자면,

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

유익했다면! 이어서 읽어보기:)
[Growth] Growth 에 필수적인 AARRR

Growth AARRR, 서비스 유저들의 행동 패턴에 대해서 더 잘 이해하고 분석할 수 있어, 점차 기획 포지션에서도 중요성이 커지고 있는데요. 이것은 무엇일까요?

New 밸류랩스 유니버스, 게더타운을 소개합니다.

새로운 유니버스, 게더타운에 대해서 알아볼까요?

왜 초기 스타트업들은 실패하는가?

밸류랩스에 찾아오시는 많은 스타트업 대표님들이 프로젝트 실패 경험이 있습니다.

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.