[피그마 중급 7강] 툴팁(느낌표/물을표) 컴포넌트 UI/UX(ToolTIP) PPT와는 전혀 다른 툴팁(tooltip) 비교(프로토타입 구현)

PPT에서 굉장히 쉽게 그렸던 툴팁이 피그마로 넘어가면서 조금 간단하지 않게 되었습니다. 그렇지만 유저가 무엇인지 궁금해할 때 꼭 필요한 기능인 툴팁 기능에 대해서 배워보겠습니다. 사실상 웹사이트에서 무언가 정보에 대해서 알고 싶을 때 이러한 기능을 많이 사용하는데요. 쉽고 빠르게 아래 글을 따라오시면 되겠습니다. 

 

툴팁(TOOLTIP) 간단하니 따라와 주세요!

1. 텍스트 입력 + 텍스트 굵기

• 텍스트 입력 : Sample text field
• 글씨 굵기 : semi bold

 

2. 오토레이아웃 ▶ 수평 padding ▶수직 padding ▶도형 색상(감도 설정) ▶ 도형 테두리 설정 ▶ 텍스트 색상 설정

• 수평 padding : 20
• 수직 padding : 20
• 도형 색상 : 검은색(투명도 60%)
• 도형 테두리(레디우스) : 20
• 텍스트 색상 : 흰색

 

3. 텍스트 내용 바꾸기 ▶ fill container ▶ 프레임 이름 변경 ▶ 텍스트 굵기 변경 ▶ 글씨 크기 변경 ▶ 도형 투명도 조정

• 텍스트 내용 : 하단 참조
• 수평 리사이징 : fill container
• 텍스트 굵기 변경 : 미디엄
• 글씨 크기 변경 : 16pt
• 도형 투명도  : 65%

 

4. 삼각형 1개 만들기 ▶ 텍스트 창에 넣기 ▶ 텍스트창에서 분리 ▶ 삼각형 옮기기

• 삼각형 도형(너비 x높이) : 21x18
• 삼각형을 텍스트 창에 넣기 : Ctrl+x ▶ 텍스트 창 클릭 붙여 넣기 Ctrl + V

<1번 그림>

<2번 그림> 

<3번 그림> 삼각형을 클릭 시 우측 절대 포지션이라는 아래 빨간색 네모박스가 나옵니다. 저걸 클릭

<4번 그림>  : 텍스트 안에 삼각형의 이동을 자유롭게 할 수 있음 이제 삼각형 밖으로 옮깁니다. 

<5번 그림>

 

5. 삼각형 Contstraints ▶ 텍스트 창에 넣기 ▶ 텍스트창에서 분리 ▶ 삼각형 옮기기

• 삼각형 Contstraints : 수직 ( center ) / 수평 : (left)
  (▶ Contstraints에 대한 기능은 아래 링크를 통해서 자세하게 확인하실 수 있습니다. 이전에 글 올렸음)

 

5. 삼각형 3개 복사 ▶ 프레임명 변경하기 ▶ 텍스트창에서 분리 ▶ 삼각형 옮기기

• 삼각형 3개 복사 : [Ctrl+C]를 3번 눌러 삼각형을 복사합니다.(저절로 중첩될 것)
• 프레임명 변경 : 화살표 방향 왼쪽/오른쪽/위/아래

 

6. 컴포넌트 설정

 

 

6. 삼각형 클릭 ▶ 레이어설정(Layer) ▶ 이름 설정 그대로 해서 창조하기 클릭

• 여기서 주의할 점은 4개의 삼각형을 모두 클릭한 후 각각 레이어를 생성해야 된다는 것입니다. 

7. 텍스트 상자 클릭 ▶ 우측 패널 Content : Create component property ▶ create property

8. 물음표 마크 만들기 ▶ 우측 패널 Content : Create component property ▶ create property

• 물음표를 만들고 글씨 굵기를 세미 볼드로 
• Ctrl+shift+o를 누릅니다.
• color dodge로 물음표를 원안에 위치시키고 물을 표를 윈도(컨트롤+알트+F), 맥(커멘드+옵션+F)으로 프레임으로 바꾼 뒤 컴포넌트로 변환합니다.

9. 모두 컴포넌트로 변환한 후 복사하여 8개를 만들어 줍니다.

10. 이제 만들어진 말 꼬리창을 아래 컴포넌트 있는 곳으로 옮겨야겠죠? 

• ctrl+x -> ctrl+v로 아래 물음표에 붙여 넣고 위로 맞춤을 해줍니다.

11. 컴포넌트 변환 이름 바꾸기

• 위쪽 이름 변형 : 왼쪽부터 바닥/위/우측/좌측, 아래 이름 변형 : 왼쪽부터 바닥_호버/위_호버/우측_호버/좌측_호버
• 이름을 변환하면 왼쪽 세트를 묶어서 이름을 다시 한번 이름을 변형합니다. 왼쪽부터 바닥/위/좌측/우측

 

12. 자산명칭 변경하기

• 전체 자산에 대해서는 툴팁 방향이라고 설정하였지만, 어떻게 설정하든 무방합니다.
• 그리고 새로 자산을 추가하면서 변종(베이언트)을 클릭해서 전체 자산에 대해서 no로 설정합니다. 그리고 두 번째 그림을 보고 해당 자산들만 마우스 호버링 시에 yes로 설정합니다.
• 그리고 다시 툴팁(텍스트창)을 클릭하여 3번째 그림에 있는 nested instances를 클릭합니다. 그리고 텍스트를 클릭합니다.
• 그림 4에서 보는 바와 같이 위에 4개의 툴팁을 이제 텍스트창만 pass through를 0%로 바꿉니다.

그림1

그림2

 

그림3

그림4

13, 이제 프로토타입으로 연결해 줍니다.

• 프로토타입으로 연결 시 아래와 같은 그림이 나옵니다. 
• 이제 프레임 위에 올려서 실험해 봅니다.

그림1

그림2

 

[피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능>

 

[피그마 기초 2강, 도형부문]피그마와 PPT 기능 비교, 피그마의 파워풀한 우측 패널 기능 익히기