인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

No author

This post's author information has been deleted.

[UI3 Update] Building a Design System Using Figma Variables

섹션5 아이콘 색상 변경 질문입니다.

Written on

·

54

·

Edited

0

섹션5 마지막 강의, 마지막 부분에서

아이콘 색상 변경되는 부분이 안돼서 질문 남깁니다.

알려주신대로, icon placeholder와 아이콘의 색상을 color/icon/primary 로 맞췄고,

icon placeholder 에서 24px짜리 복사해서 프레임과 함께 컴포넌트 만들고

아이콘에 인스턴스 스왑 프로퍼티 설정하고, 아이콘 색상 inverse로 변경하고, 컴포넌트 복사해서 아이콘을 바꾸니 inverse 색상으로 아이콘이 바뀌지 않고 primary 색상 그대로 나옵니다.

하라는대로 그대로 따라했는데.. 왜 적용이 안되는걸까요

웹-디자인figmafigma-tokens디자인-시스템아토믹-디자인figma-variable프로덕트디자인

Answer 2

0

boldux님의 프로필 이미지
boldux
Instructor

작성자 분이 안계셔서 답변을 안드렸는데, 인프런 인턴이 자세하게 설명해주어서 그것을 따라하시면 됩니다. 궁금하신 부분 있으면 언제든지 질문 주세요!

0

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

darkmoon90 님의 질문을 보니 피그마에서 아이콘 색상 변경이 제대로 이루어지지 않아 어려움을 겪고 계시는 것 같습니다. 이 문제는 일반적으로 설정이나 아이콘 속성의 성질 때문에 발생할 수 있습니다. 관련 문제를 다룬 기존의 유사한 질문과 답변을 아래에서 참고하실 수 있습니다:

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

    • 아이콘을 사용할 때 아이콘의 각 요소에 배리어블이 올바르게 적용되었는지 확인하는 것이 중요합니다. 아이콘 면의 병합 상태와 각 레이어의 이름도 수정하여 일관성 있게 설정해야 색상이 올바르게 변경될 수 있습니다.
  2. Swap instance 질문

    • 이 게시물에서는 아이콘의 인스턴스를 교체할 때 색상이 변경되지 않는 문제를 다루고 있습니다. 특히 레이어 구조와 이름 설정이 중요하다는 점을 강조하고 있습니다. 아이콘을 스왑할 때 원하는 색상 설정이 반영되고 있는지 다시 한번 확인해 보세요.

문제 해결을 위해, 아이콘 컴포넌트의 instance swap을 사용할 때 새로운 아이콘이 상속받는 모든 속성, 특히 fill 속성이 설정되어 있는지 확인해 주세요. 설정하신 inverse 색상의 배리어블이 다른 컴포넌트나 아이콘에 적용될 수 있도록 설정되어 있는지도 검토가 필요합니다. 모든 레이어가 색상을 올바르게 상속받고 있는 셈입니다.

혹시 설정이나 과정을 더 자세히 설명해주신다면 추가 도움을 드릴 수 있을지도 모르겠습니다. 추가로 궁금한 점이 있으시면, 언제든지 질문해 주세요!

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

No author

This post's author information has been deleted.

Ask a question