안녕하세요 찐망고입니다.
오늘은 피그마를 이용하여 말풍선 컴포넌트를 만들어 볼 건데요.
하나 만들어 놓으면 어떤 텍스트를 써도 어떤 방향으로도 사용하기 편한 말풍선이 가능합니다.
일단 기본적인 Auto Layout과 Variant 정도만 알면 될 것 같아요
이전에 썼던 포스팅을 읽으면 피그마 말풍선을 쉽게 만들어 볼 수 있는데,
컴포넌트로 만들기 위해선 몇 가지 작업이 더 필요해서 새로 포스팅해봅니다.
기본적으로 도형을 이용해서 툴팁박스를 만들 때
아래쪽 꼬리 부분은 방향이 top, right, bottom, left로 바뀔 수 있으니 Auto Layout을 이용하여 만들 거예요.
도형 두 개를 합치고 꼭 해야할 것
꼭 constrain을 맞춰주셔야 해요.
이후 컴포넌트로 등록합니다.
컴포넌트 크기 확인해보세요 꼬리를 감싸지 않고 있죠?
등록된 컴포넌트는 복사하여 텍스트와 또 Auto Layout을 해줄 건데
이전 포스팅처럼 일단 텍스트를 오토레이아웃 해주고
그 오토레이아웃한 텍스트와 인스턴스가 된 말풍선을 또다시 Auto Layout 해준다는 점!
피그마 말풍선 만들기
안녕하세요 찐망고입니다. 웹에서 자주 사용 되는 말풍선(툴팁, 채팅 말풍선 등)을 피그마로 만들어 볼 건데요.Auto Layout과 Constraints를 이용해서 만들 수 있습니다. 일단 말풍선 모양을 만들 건
uiweb.tistory.com
자 그렇게 만들어진 툴팁을 컴포넌트로 등록합니다.
이후 작업부턴 Variant가 들어갑니다
컴포넌트를 선택해서 Add variant를 클릭하고
properties에는 direction이라는 이름을 적고
복사된 아래 variant는 bottom, 위에 툴팁은 top이라고 적어줄 거예요
복사된 bottom에 있는 Union을 선택하고 Flip vertical을 해서 뒤집어주세요
다시 Add variant를 클릭하고 left로 이름을 바꿔준 후에
도형을 돌려 방향을 바꿔줍니다. Union인스턴스를 선택해야겠죠?
꼬리 부분이 오토레이아웃이라 알아서 위치를 잡아줄 거예요.
left에서 Add variant를 클릭하고 right로 이름을 지어준 후에 Union인스턴스만 선택해서 좌우 반전 해줍니다.
텍스트하나만 잡고 Stop multi-editing을 누르면 같은 형태의 텍스트들이 모두 선택되는데요.
Creat text Property를 눌러 등록해 줍니다
자 이제 끝났어요 하나의 베리언트만 복사해서 옆에 두고 텍스트를 변경해 볼까요?
완성된 파일입니다
'UIUX디자인 > 피그마' 카테고리의 다른 글
| 피그마 ai 디자인, 플러그인 - Codia Ai Design (1) | 2024.10.16 |
|---|---|
| 피그마 컴포넌트 해제, 베리언트 등록 (2) | 2024.10.15 |
| 피그마 말풍선 만들기 (0) | 2024.08.30 |
| Figma UI3 완벽 해부: 새롭게 달라진 주요 기능과 인터페이스 변화 (0) | 2024.07.18 |
| Figma Config 2024 컨퍼런스 요약 및 주요 업데이트 (0) | 2024.07.03 |