아이콘 컬러 배리어블 적용이 안되어 질문 드려요!

피그마 배리어블을 활용한 디자인 시스템 구축하기

버튼(Button)

해결된 질문

작성

307

수정됨

선생님 안녕하세요!

버튼 컴포넌트 제작 강의를 보며 따라서 만들고 있는데요~

아이콘 fill에 배리어블을 적용해도 아이콘 색상이 변하지 않는 문제가 있습니다~

color/icon/interactive/inverse 색상을 선택해도 적용이 안되며, 다른 배리어블 색상을 적용해도 동일하게 적용이 안됩니다! 이름만 적용되고 색상은 변경이 안되는 상태입니다 ㅠㅠ

(feather icon을 shape 면으로 병합한 형태로 정리하였고, Vector로 동일하게 이름도 적용했습니다. 아이콘 컬러 배리어블 색상도 등록한 상태입니다.

아이콘을 면으로 정리할 때 유니온과 아웃라인이 안되는 경우, 커뮤니티에 공유해주신 Convert SVG Strokes to Fills 웹 사이트를 이용했습니다! )

feather icon 외에 다른 아이콘 컴포넌트로 테스트 해보니 배리어블 색상이 적용됩니다.

해결 방법이 있을까요?

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable 아이콘 icon

답변 2

볼드 UX

지식공유자

작성자 분이 없으셔서 누군지는 잘 모르겠지만 혹시 파일을 boldplus.ux@gmail.com으로 공유해주실 수 있으실까요? 제가 한번 살펴보도록 하겠습니다.

이 경우 Fill이 안된 경우가 많습니다.

askare

안녕하세요 선생님! feather icon 을 원본 색상 그대로 두었더니 적용이 안된 것 같습니다 ㅠㅠ

feather icon 에서 가져온 기본색을 제 피그마 파일에 등록한 배리어블 색상으로 수정해보니,

이후 다른 배리어블 색상도 적용이 가능했습니다!!

도움주셔서 감사합니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

askare 님의 아이콘 컬러 배리어블 적용 문제에 대한 설명을 잘 읽었습니다. 아이콘의 배리어블 색상이 변하지 않는 문제는 여러 요인에 의해 발생할 수 있습니다. 해당 문제에 대해 비슷한 상황을 다루고 있는 게시글 몇 가지를 찾았습니다.

“베릴어블, 아이콘에 궁금한점이있습니다 ㅎㅎ”
- 이 게시물에서는 아이콘의 스트로크 색상이 적용되지 않는 문제와 관련하여 언급되고 있습니다. 비록 askare 님의 질문과 완벽히 동일하지는 않지만, 아이콘의 색상변경과 관련된 비슷한 주제를 다루고 있어서 유용할 수 있습니다.
“Swap instance 질문”
- 아이콘을 변경할 때 색상도 함께 변경되지 않는 문제에 대해 다루고 있습니다. 이 질문도 아이콘과 배리어블 색상의 적용에 관한 해결책이 있는지 확인할 수 있습니다.

이 문제에 대한 정확한 해결 방법이 상기 언급된 게시글에 명확하게 제시되지 않을 수 있으나, 아이콘과 색상변경 그리고 Figma의 변수 사용에 관련된 일반적인 가이드를 제공합니다. 대부분의 경우, 아이콘 컬러가 변하지 않는 문제는 아이콘을 구성하는 요소의 속성에 정확히 배리어블이 적용되었는지, 또는 해당 배리어블의 설정이 올바르게 되었는지에 대한 검토가 필요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

아이콘 컬러 배리어블 적용이 안되어 질문 드려요!