[Figma] 설렉션 컬러

피그마에서 여러 요소를 선택하다 보면 오른쪽 속성 패널 하단에 **‘Selection Colors(선택 색상)’**라는 영역이 나타납니다. 이 기능은 디자인을 효율적으로 관리하고, 색상을 빠르게 수정할 수 있도록 도와주는 매우 유용한 기능입니다.

 

아래 이미지처럼 여러 개의 오브젝트를 선택했을 때, 해당 오브젝트들이 공통적으로 사용하고 있는 모든 색상이 리스트로 정리되어 표시됩니다.

 

1. Selection Colors는 무엇인가?

Selection Colors는

“현재 선택된 모든 요소가 사용 중인 색상을 한눈에 보여주는 기능”

입니다.

 

즉, 선택한 영역 안에서

• 어떤 색이 몇 개의 요소에 쓰였는지
• 투명도(Opacity)와 컬러 값은 무엇인지
• 어떤 색을 일괄 변경할 수 있는지

를 빠르게 확인할 수 있습니다.

 

2. 왜 유용할까?

Selection Colors는 특히 다수의 요소를 한 번에 스타일링할 때 강력한 도구입니다.

 

1️⃣ 여러 색을 한 번에 수정 가능

 

예를 들어, 200개의 사각형이 있고 그중 50개가 같은 색을 쓰고 있다면,
일일이 클릭할 필요 없이 Selection Colors에서 해당 색을 한 번에 수정할 수 있습니다.

 

2️⃣ 색을 빠르게 교체할 수 있음

 

색상 팔레트 변경, 다크 모드 전환, 브랜드 컬러 업데이트 등
디자인 리뉴얼 작업에서 필수 기능입니다.

 

3️⃣ 혼합된 색상도 자동으로 정리해줌

선택한 객체마다 컬러가 달라도
피그마가 알아서 색 리스트로 정리해 보여주기 때문에 작업 구조를 파악하는 데 도움됩니다.

 

 

3. 어떻게 사용하면 될까?

1️⃣ 여러 오브젝트를 드래그하거나 Shift로 다중 선택

2️⃣ 우측 패널의 Selection Colors 영역 확인

3️⃣ 특정 색을 클릭하면 컬러 피커가 열림

4️⃣ 원하는 색으로 변경하면 선택된 요소들에 일괄 적용

 

특히 이미지에서처럼

• 하늘색
• 초록색
• 노란색

같이 서로 다른 색들이 리스트로 한눈에 정리됩니다.
디자인 요소가 많을 때 작업 효율이 크게 올라갑니다.

 

 

 

정리하면

 

Selection Colors는 피그마에서 색상을 관리할 때 가장 실무적으로 유용한 기능 중 하나입니다.
특히 많은 요소를 다루는 UI 디자인에서는 작업 시간을 크게 줄여주는 강력한 도구죠.

 

선택된 요소들이 어떤 색을 쓰는지 직관적으로 파악하고,
필요할 때 단 한 번의 클릭으로 일괄 수정해보세요!