아이콘 컬러 자동 변경

Question

안녕하세요, 강의 듣던 중 제가 까먹은 부분이 무엇인지 알고 싶어서 문의 남겨요! placeholder를 제작할 때, icon을 chevron-down으로 바꿀 때, 전에는 아이콘 변경할때는 컬러랑 사이즈도 고려되어 자동으로 다 변경이 되었던거 같은데, 이번 에는 그렇게 안되어서요! 혹시 전에 어떻게 해야 자동으로 다 변경이 되는지 , 한번만 다시 정리해주실 수 있을까요..? 헷갈리네요 ㅠㅠ 좋은 강의 만들어주셔서 감사합니다 : )

볼드 UX · Answer

안녕하세요, 23강의 아이콘 파트를 다시 보시고, 참고하시면 잘 안되는 부분을 해결할 수 있을 것 같습니다. 간단히 아래에 고려해야할 사항을 적어두었으니, 꼭 확인해 주세요. 레이어 이름과 구조 통일 : 아이콘끼리 레이어 이름과 구조가 동일해야 합니다. 서로 다르면 인스턴스를 바꿨을 때 색상이 유지되지 않습니다. Constraints를 Scale로 설정 : 아이콘의 Constraints를 Scale로 지정해야 크기를 줄이거나 키울 때 비율에 맞게 함께 조정됩니다. 선을 면으로 변환 (Outline stroke 또는 Boolean) : 아이콘을 반드시 면으로 처리해 주세요. 그래야 크기에 따라 선 굵기도 자연스럽게 함께 달라집니다. 이렇게 해도 잘 되지 않으면 boldplus.ux@gmail.com 으로 파일을 보내 주세요. 제가 직접 확인해 보겠습니다. 감사합니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. dhwlsdud9929님. Figma에서 chevron-down 아이콘으로 교체했을 때 컬러와 사이즈가 자동으로 적용되려면, 교체되는 아이콘 컴포넌트의 구조와 속성이 기존 아이콘과 동일해야 합니다. 다음 항목을 확인해 보세요. 아이콘의 레이어 이름이 동일한지 확인합니다. 아이콘이 여러 레이어로 구성되어 있다면, 기존 아이콘과 동일한 구조 인지 확인합니다. 아이콘은 가능하면 Fill 기반의 면(Shape) 으로 구성해야 하며, Stroke 기반이면 컬러 변수나 굵기가 정상적으로 적용되지 않을 수 있습니다. 아이콘의 컬러가 올바른 컬러 변수 또는 토큰 을 참조하고 있는지 확인합니다. 아이콘 컴포넌트의 Constraints가 사이즈에 맞게 설정되어 있는지도 확인해 주세요. 특히 기존 아이콘은 한 개의 벡터 레이어인데 chevron-down 은 여러 레이어로 구성되어 있거나, 레이어 이름이 다른 경우 컬러와 사이즈가 자동으로 변경되지 않을 수 있습니다. 관련된 기존 답변을 함께 참고해 주세요. 칩 아이콘 교체 후 컬러가 적용되지 않거나 굵기가 달라지는 경우, 아이콘이 Stroke 기반으로 제작되었거나 사이즈 변경 과정에서 문제가 생길 수 있다는 답변입니다. 베릴어블, 아이콘에 궁금한점이있습니다 ㅎㅎ 아이콘을 Union한 뒤 교체했을 때 Fill, Stroke, 레이어 구조에 따라 색상 적용이 달라지는 경우를 설명하고 있습니다. 섹션 6 / 29.Button 강의 질문 아이콘 색상이 inverse 색상으로 변경되지 않는 경우, 아이콘 레이어 이름과 아이콘 형태가 동일해야 한다는 답변입니다. 참고 이미지: 아이콘 원본 및 교체 사례 이미지 먼저 chevron-down 아이콘을 기존 아이콘과 동일한 레이어명·구조·Fill 방식으로 정리한 뒤 다시 교체해 보시면, placeholder의 컬러 변수와 사이즈가 자동으로 적용될 가능성이 높습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.