[Figma] 피그마 색상 선택과 변경 방법
디자인하다 보면 자연스럽게 "어떤 색상을 쓸까?", "이미 적용한 색을 바꾸려면 어떻게 할까?"
이런 고민을 하게 됩니다. 특히 피그마는 웹 기반이기 때문에 버튼, 텍스트 ,배경 등 모든 요소에 색을 자유롭게 적용할 수 있기 떄문에 고민이 더 깊어질 수 있습니다.
그래서 일단은 피그마에서 색상을 선택하고 변경하는 방법에 대해서 알아볼 예정입니다.
색상 선택 방법
피그마에서 색상을 선택하는 기본 방법은 아주 간단합니다.
오브젝트를 먼저 선택해 주세요
색상을 바꾸고 싶은 도형, 텍스트, 아이콘 등이 있겠죠
오브젝트를 선택한 후에 오른쪽 속성 패널에서 Fill(채우기)에서 색상을 클릭하면 아래 이미지처럼 색상을 선택할 수 있는 UI가 나옵니다.
변경하고자 하는 색상을 선택해 주면 됩니다.
이때 색상을 변경하는 방법은 총 세 가지입니다.
색상 피커를 직접 드래그 해서 색상을 변경하는 방법
HEX 코드를 입력(예시: #FF0000, #00FF00 등)
RGBA 값 입력 - Red, Green, Blue, Alpha(투명도) 값을 직접 입력합니다.
이렇게 하면 원하는 색상을 아주 정밀하게 선택할 수 있습니다.
색상 변경 & 관리 방법
색상을 고른 뒤에는 프로젝트 전반적으로 일관성 있게 사용하거나 상황에 맞게 변경해야 합니다.
색상 변경하기
이미 적용한 색상을 바꾸려면 위의 방법과 동일하게 Fill 항목을 클릭해서 변경합니다.
새로운 색상을 선택하면 바로 적용됩니다.
색상 스타일 만들기
자주 쓰는 색은 Style로 지정할 수 있습니다.
Fill > 우측 상단 + 버튼을 클릭해서 원하는 이름을 입력하고 색상을 저장합니다.
라이브러리에 추가된 게 보이시죠?
스타일로 지정한 색상은 그 색이 적용된 모든 오브젝트가 자동으로 업데이트됩니다.
예를 들면 "메인 버튼 색상"을 초록에서 파랑으로 변경한 경우 전체 버튼이 모두 변경됩니다.
이 외에도 그라데이션과 이미지 활용, 투명도 조절 등의 방법이 있습니다.
그럼 정리해 보겠습니다.
- 피그마에서 색상 코드를 어디에 입력할까요?
- Fill 영역을 클릭하면 열리는 색상 선택 창 하단에 HEX를 입력하면 됩니다.
- RGB 값으로 색을 추가할 수 있을까요?
- 가능합니다. HEX 대신 RGB 값을 입력해 줘야 합니다.
- 투명한 색을 적용하려면 어떻게 해야 할까요?
- 색상 창의 Opacity(투명도) 값을 조정하면 됩니다.
- 그라데이션은 어떻게 만들 수 있을까요?
- Fill > Silid > Linear를 적용하거나 다른 옵션을 선택하면 그라데이션이 적용됩니다.
- 색상 스타일을 공유할 수 있을까요?
- 팀 라이브러리에 색상 스타일을 저장하면 다른 팀원들도 활용할 수 있습니다.
- 색을 변경했을때 적용이 안 됩니다. 왜 그럴까요?
- 오브젝트에 Fill이 아니라 Stroke(테두리)에 색이 적용된 경우일 수 있습니다.
- 여러 개 오브젝트 색을 동시에 바꿀 수 있을까요?
- 오브젝트 여러 개 선택한 뒤 Fill 색을 바꾸면 동시에 적용됩니다.
- 텍스트 색상도 같은 방식일까요?
- 텍스트를 선택하면 Fill 항목이 텍스트 색상으로 젹용됩니다. 동일한 방식입니다.
- 피그마 기본 팔레트를 추가할 수 있을까요?
- 색상 스타일을 등록해 두면 프로젝트마다 기본 팔레트처럼 쓸 수 있습니다.
- HEX 코드와 RGBA 중 무엇을 사용하는 게 좋을까요?
- 웹 디자인이라면 HEX가 편하고, 세밀한 조정이 필요하다면 RGBA가 좋습니다.
