피그마 말풍선 만들기

 

안녕하세요 찐망고입니다.

 

웹에서 자주 사용 되는 말풍선(툴팁, 채팅 말풍선 등)을 피그마로 만들어 볼 건데요.

Auto Layout과 Constraints를 이용해서 만들 수 있습니다.

 

도형에 면색 선색 넣기

 

일단 말풍선 모양을 만들 건데요.

사각형 도형과 삼각형 도형을 합치고

컴포넌트로 등록해야 합니다.

말풍선 컴포넌트

 

 

 

텍스트를 쓰고 섹션 프레임을 씌워서 Auto Layout을 먼저 해줍니다.

텍스트 오토레이아웃

말풍선과 Auto Layout을 해줄 건데요

말풍선 컴포넌트를 잘라서 Frame1안에 붙여 넣어줄 거예요

 

둘이 겹쳐야 하는데 겹쳐지지 않고 저렇게 따로 놀아요

그래서 저 Union컴포넌트를 앱솔처리해줄 거예요.

피그마 말풍선 만들

 

위 아이콘을 누르면 Union컴포넌트 아이콘 모양이 달라지면서 텍스트와 겹쳐집니다.

참고로 오토레이아웃방향은 세로나 가로나 상관없고요

중요한 건 레이어 위치!!

말풍선 오토레이아웃

 

 

Outline 보면서 Frame이랑 컴포넌트랑 사이즈 맞춰주세요

피그마 말풍선 컨스트레인츠

 

그리고 마지막으로 Union 컴포넌트는 Constraints를 조정해줘야 해요

그래야 텍스트 길이에 따라 늘어나고 줄어듭니다.

 

피그마 말풍선 완성

 

 

컴포넌트로 등록하면 말풍선 꼬리를 변경할 수도 있는데요.

그 부분은 바로 이어서 포스팅할게요 시간이 없어서 요까지만!!!!

 

 

피그마말풍선.fig

0.03MB