피그마의 Selection colors를 사용하면 선택한 디자인 안의 같은 색상을 모아 수정할 수 있습니다. 카드 두 개로 직접 따라 해보겠습니다.
1. 색상을 바꿔볼 카드 2개 준비하기
카드의 배지와 제목, 버튼이 모두 같은 파란색이라면 각각 선택해서 고칠 필요가 없습니다. Selection colors에서 선택한 디자인 안의 색상을 모아 확인하고 바꿀 수 있습니다.
이번에는 #2563EB → #7C3AED로 강조색을 변경하겠습니다. 먼저 왼쪽 카드만 수정하고, 이어서 두 카드의 강조색을 맞춰보세요. 예상 실습 시간은 약 20분입니다.
실습 시작 파일을 자신의 초안에 복사해 사용하면 같은 화면으로 따라 할 수 있습니다. 직접 만들고 싶다면 아래 값으로 준비하세요.
| 항목 | 실습 값 |
|---|---|
| 카드 프레임 | 320 × 240px, 흰색, 좌우 여백 24px |
| 배지 | 80 × 28px, 입문 강의 |
| 제목 | 오늘부터 피그마, 24px |
| 설명 | 하루 20분, 하나씩 배워요, 16px |
| 버튼 | 272 × 40px, 강의 살펴보기 |
| 강조색 | 배지 배경·제목 글자·버튼 배경 모두 #2563EB |
첫 번째 카드 이름은 CardA, 두 번째는 CardB입니다. 설명 문구와 흰색 글자는 강조색을 바꿔도 그대로 유지할 예정입니다.
2. 왼쪽 카드 프레임과 Selection colors 확인하기
왼쪽 레이어 목록에서 CardA 프레임을 선택합니다. 제목 글자나 버튼 안의 텍스트만 선택하지 않도록 확인하세요. 캔버스에서는 카드 전체가 선택되어 있어야 합니다.
오른쪽 Design 패널 아래쪽에서 Selection colors를 찾습니다. 접혀 있다면 항목을 펼쳐보세요. 선택한 카드에 들어 있는 색상을 한곳에서 확인할 수 있습니다.
CardA의 Fill은 카드 자체의 배경입니다. 흰색 카드 배경을 바꾸려는 것이 아니므로, 이번에는 Selection colors 목록의 파란색 항목을 사용합니다.
공식 도움말에 따르면 Selection colors는 서로 다른 채우기 색상을 포함한 선택에서 나타납니다. 파일을 수정하려면 편집 권한도 필요합니다. Figma 공식 도움말
3. 파란색 HEX 값을 보라색으로 바꾸기
- Selection colors에서 #2563EB 항목을 찾습니다.
- 해당 색상 값 입력란에 7C3AED를 입력합니다. 색상 견본을 눌러 열린 색상 선택기에서도 HEX 값을 수정할 수 있습니다.
- 입력값을 확정한 뒤 왼쪽 카드의 배지 배경·제목 글자·버튼 배경을 확인합니다.
배지와 버튼의 흰색 글자, 회색 설명 문구, 카드의 흰색 배경이 유지되는지도 함께 살펴보세요. 강조색 세 곳만 바뀌었다면 첫 번째 실습은 완료입니다.
4. 두 카드를 함께 선택해 색상 맞추기
이번에는 두 카드의 강조색을 모두 보라색으로 맞춰보겠습니다. 왼쪽 레이어 목록에서 CardA와 CardB 프레임을 함께 선택하세요. 하나를 선택한 뒤 Shift를 누른 채 다른 프레임을 추가로 선택하면 됩니다.
Selection colors에는 앞서 바꾼 #7C3AED와 아직 남아 있는 #2563EB가 함께 보입니다. 남은 파란색 항목을 7C3AED로 바꿔주세요.
이제 오른쪽 카드도 같은 보라색이 됩니다. 다음에 두 카드의 강조색을 다른 색으로 바꾸고 싶다면 두 프레임을 선택한 상태에서 해당 색상을 한 번 수정하면 됩니다.
카드 하나만 선택하면 그 카드 안에서, 두 카드를 선택하면 두 카드 안에서 해당 색상을 수정합니다. 페이지 전체가 자동으로 바뀐다고 생각하지 말고 선택한 프레임을 먼저 확인하세요.
5. 비슷한 파란색이 남아 있다면?
눈으로는 같아 보여도 HEX 값이 다르면 별개의 색입니다. 예를 들어 #2563EB와 #2563EA는 매우 비슷하지만 같은 값은 아닙니다. 어떤 요소만 색상이 남았다면 원래 사용한 값을 확인해보세요.
카드 배경만 바뀌었어요
프레임의 Fill을 수정했는지 살펴보세요. 이번 실습의 대상은 Selection colors 안에 있는 강조색입니다.
버튼 하나만 바뀌었어요
버튼이나 텍스트만 선택했을 수 있습니다. 레이어 목록에서 카드 프레임 전체를 선택하고 다시 확인하세요.
사진 속 파란색도 바뀌나요?
이 기능을 사진의 특정 색을 바꾸는 도구로 생각하면 안 됩니다. 공식 문서는 이미지·영상 채우기, 숨겨진 채우기, 마스크 등을 Selection colors의 표시 대상에서 제외합니다. 실습의 배지·제목·버튼처럼 편집 가능한 색상 요소를 대상으로 진행하세요. 표시되는 색상 범위 확인
색상 스타일이나 변수가 연결돼 있어요
일반 색상과 스타일·변수 항목은 구분되어 표시됩니다. 이번 예제는 직접 지정한 일반 색상으로 준비했습니다. 실제 업무 파일에서는 연결된 스타일·변수를 확인하고, 연결을 해제하는 작업은 의도한 경우에만 진행하세요.
6. 복습 과제와 완료 체크
혼자 해보세요
- 두 카드의 강조색 #7C3AED를 #0F766E로 바꿉니다.
- 한 카드의 제목만 #2563EA로 바꿔봅니다.
- 두 카드를 함께 선택해 별도 색상이 목록에 나타나는지 확인하고, 다시 같은 강조색으로 맞춥니다.
마지막으로 확인할 것
- CardA와 CardB의 배지·제목·버튼 색상이 같은가요?
- 이번 완성 예제에서는 모두 #7C3AED인가요?
- 카드 배경과 흰색 글자, 회색 설명은 그대로인가요?
- 일부 요소만 남았다면 HEX 값과 선택 범위를 확인했나요?
프레임 선택 → Selection colors → 바꿀 색상 확인 → HEX 수정 → 결과 검수 순서입니다. 같은 색을 모아서 수정하되, 먼저 어디까지 선택했는지 확인하는 습관을 들여보세요.
피그마 초간단 이어보기
다음 실습 후보: 원형 진행률 만들기.