프로토타이핑

Figma 컴포넌트 클릭 시 외부 링크 이동

피그마 오픈카톡방2026. 3. 7.

질문사항

피그마에서 특정 컴포넌트를 클릭하면 외부 웹 링크로 이동하도록 설정하는 방법이 있나요?

답변

네, 피그마에서 특정 컴포넌트를 클릭했을 때 외부 웹 링크로 이동하도록 설정할 수 있습니다.

컴포넌트 선택: 외부 링크를 걸고 싶은 컴포넌트(또는 프레임, 그룹 등)를 선택합니다.

프로토타입 패널 활성화: 오른쪽 사이드바에서 'Prototype' 탭을 클릭합니다.

인터랙션 추가: 선택된 컴포넌트의 파란색 원형 핸들을 드래그하여 아무 곳에나 놓거나, 'Interactions' 섹션에서 '+' 버튼을 클릭합니다.

트리거 설정: 'On click' (클릭 시) 또는 원하는 트리거를 선택합니다.

액션 설정: 'Action' 드롭다운에서 'Open URL'을 선택합니다.

URL 입력: 'URL' 필드에 이동하고자 하는 외부 웹 링크(예: `https://www.figma.com`)를 입력합니다.

팁: 컴포넌트 전체가 아닌 특정 영역에만 링크를 걸고 싶다면, 해당 영역 위에 투명한 사각형(Rectangle)을 올리고 그 사각형에 위와 동일한 방식으로 링크를 걸 수도 있습니다. 텍스트에 링크를 거는 방법도 있지만, 컴포넌트 자체에 링크를 거는 것이 더 일반적이고 직관적입니다.