공부/피그마

[피그마(Figma)] 텍스트에 링크 삽입 (하이퍼링크)

spine_sunbi 2023. 10. 12. 00:01
반응형

피그마에서는 텍스트에 링크를 삽입해서 피그마 내부에서 이동하거나, 피그마 외부의 문서(사이트)로 이동할 수 있습니다. 다른 피그마 파일 그리고 프로토타입에도 링크를 걸 수 있는데, 제가 아직 프로토타입까지는 만들어보지 않아서 비교적 간단한 텍스트 링크 삽입만 해보겠습니다.

 

1. 텍스트에 프레임 링크 삽입

1) 원하는 프레임을 선택하고, 마우스 우측을 클릭합니다.

2) Copy/Paste as > Copy link를 클릭합니다.

3) 복사한 링크를 붙여넣을 텍스트를 클릭하면 상단의 툴바에 링크아이콘('Create link')을 클릭합니다.

4) Type or paste URL이라는 곳에 복사한 프레임의 링크를 붙여 넣습니다.

5) 링크를 붙여 넣으면 위의 사진처럼 밑줄이 그어지며, 마우스를 올려놓게 되면 미리 보기처럼 어디로 이동할지 보입니다. (Go to A Frame)

6) 위의 텍스트를 클릭하면 B Frame에서 A Frame으로 이동합니다.

반응형

2. 텍스트에 페이지 링크 삽입

1) 이동을 원하는 페이지를 마우스 오른쪽 클릭합니다.

2) 'Copy link to page'를 선택합니다.

3) 텍스트에 해당 링크를 붙여 넣습니다. (반복적인 내용은 생략하겠습니다.)

4) 마우스를 올려놓으면 미리 보기로 어디로 이동할지 알 수 있습니다. (Go to Page 2)

 

3. 텍스트에 파일 링크 삽입

1) 오른쪽 상단에 'Share' 버튼을 클릭합니다.

2) 'Copy link'를 선택합니다.

3) 텍스트에 해당 링크를 붙여 넣습니다.

4) 마우스를 올려놓으면 미리 보기로 어디로 이동할지 알 수 있습니다. (Open 썸네일 만들기) > '썸네일 만들기'가 제가 링크를 복사한 파일의 이름입니다. 파일 이름에 따라 다릅니다.

 

4. 텍스트에 외부 사이트 링크 삽입

1) 이동을 원하는 페이지의 url을 복사합니다. (네이버나 아무 곳이나 상관없습니다.)

2) 텍스트에 해당 링크를 붙여 넣습니다.

3) 마우스를 올려놓으면 미리 보기로 어디로 이동할지 알 수 있습니다. (Open naver.com)


Go to ~~라고 하면 동일한 피그마 파일 내에서 이동하는 것이고

Open ~~라고 하면 다른 피그마 파일로 이동하거나, 외부 사이트로 이동하는 것 같습니다.