피그마 UI 버튼 만들다 컴포넌트에서 막힌 날

 

안녕하세요 🙂
피그마로 UI 버튼을 만들어보려고 하는데,
오랜만에 해보려니… 다 까먹었더라고요 ㅋㅋ

 

자료를 찾아보면 웹 UI 위주라서
포토샵으로 만들까 하다가,
관리 생각하면 피그마가 나을 것 같아 다시 써봤습니다.

 

피그마 공식 가이드 영상도 봤지만
영어라서 이해가 잘 안 됐어요

 

그러다 아래 영상을 찾았습니다.

https://youtu.be/aOdRQ1sUG-w?si=5PNiRLmw8BkQ46eI

우리나라 분이 설명해 주시는데,
버튼 컴포넌트 설명이 딱 필요한 만큼만 나와서 좋았어요.

 

제가 가장 헤맸던 건
컴포넌트 / 배리언트 구조였습니다.

 

마스터 버튼을 만들고
배리언트도 추가했는데,
텍스트는 버튼 밖에서 놀고
마스터를 수정해도 배리언트에 영향이 없더라고요.

버튼 안에 들어가지 않는 텍스트

 

‘이럴 거면 마스터 버튼은 왜 만드는 거지…?’ 싶어서
제미나이한테도 물어보고
이것저것 눌러보다가
1시간 넘게 헤맸습니다 😭

 

거기에 버튼 색도 못 넣고
계속 글자 색만 바꾸고 있었는데,
버튼 색은 오른쪽 패널의 채우기(Fill)를 설정해야 하는 거였어요… 😇

채우기로 버튼 색을 파란색으로 설정한 모습

 

---

정리해 보면 흐름은 이렇습니다.

• 텍스트 만들기
• Shift + A → 오토 레이아웃
• Ctrl + Alt + K → 컴포넌트
• 컴포넌트 복사 후 상태 변경

복사한 버튼이
마스터 컴포넌트의 영향을 받는 구조였어요.

파란색 버튼: 컴포넌트, 빨간색 버튼: 배리언트

이걸로 몇 시간을 헤맸네요.

그래도 덕분에 개념은 확실히 잡았습니다.