인프런 커뮤니티 질문&답변
작성한 질문수
섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문
작성
·
20
0
안녕하세요 강의를 수강하고있는 수강생이자 스타트업 외주제작사의 디자인시스템을 구축중인 인턴입니다.
29번 강의에서 강사님께서 공유해주신 아이콘 Union파일을 다운로드 받아 버튼 제작 중이나, 등록한 버튼의 아이콘 인스턴스 스왑의 컬러부분이 컴포넌트 색상과 연동되지않는 문제로 문의드립니다.
문제상황:
버튼 컴포넌트를 제작하여
1) → Leading Icon인스턴스 스왑을 등록
2) Select preferred values (+버튼)을 통해 다른 아이콘을 등록
3) 가져온 Union Icon 원본 파일에 제가 제작한 베리어블(Primitive 컬렉션)의 색상을 적용하여
4) 제작한 버튼 컴포넌트의 아이콘 역시 Union 아이콘과 일치하는 베리어블(Primitive 컬렉션)를 설정해준뒤,
버튼 컴포넌트와 어울리는 베리어블(Semantic 컬렉션)컬러로 변경하여 베리언츠를 Alt를 활용해 인스턴스를 뽑았습니다.
5) 등록한 프로퍼티의 → Leading Icon에서 다른 아이콘으로 변경 시 컴포넌트에 등록된 컬러와 동일한 컬러가 아닌
3번에서 적용된 베리어블 색상이 적용되어 출력됩니다.
유사 질문의 답변으로 문제가
1. 아이콘 레이어 이름이 반드시 동일해야한다.
2. 아이콘 형태가 반드시 동일해야한다.
라고 확인했는데,
아이콘 레이어 이름은 반드시 동일함을 이해하고 확인했으나 이상없습니다만,
아이콘 형태가 반드시 동일해야한다는 말이 이해되지않습니다.
예로, 제가 강사님께서 공유해주신 Icon 컴포넌트 중 Shape 아이콘을 복사하여 버튼 제작을 위해
사이즈를 16x16px로 조정하여 버튼 컴포넌트를 제작한 경우 2번째 상황으로 인하여 컬러 연동이 안되는 건지 궁금합니다.
답변 2
0
아이콘 형태가 동일해야 된다는 의미는 두가지 조건이 반드시 충족 되어야 합니다.
레이어 이름가 반드시 동일해야합니다. 현재 Shape 컴포넌트 안에 어떤 구조, 이름으로 되어 있는지는 모르겠지만, 만약 레이어 최상위 레이어 이름이 Vector라고 한다면, 다른 아이콘 컴포넌트도 반드시 동일하게 Vector라고 해야합니다.
구조라 하면, 예를 들어, 최상위 레이어가 Union으로 되어 있어서 면으로 구성되어 있는지 아니면 선으로 구성되어 있는지입니다. 예를 들어, Shape는 면에 색이 적용되었다고 가정할 경우, 다른 아이콘은 선으로 구성 되어 있다면, 다른 아이콘으로 변경시에는 선의 색이 따라오게 됩니다.
제공 드린 아이콘 컴포넌트에 잘 이 부분이 되어 있으니 한번 참고해보시기 바랍니다.
감사합니다.
만약 그래도 안되면, boldplus.ux@gmail.com으로 파일 보내주시면 제가 확인 해보고 문제상황에 대한 해결책을 더 자세히 알려드리겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이지미님께서 질문해주신 피그마 디자인 시스템 구축 과정 중 아이콘 인스턴스 스왑 문제에 대해 답변드리겠습니다.
아이콘의 색상이 기대한 대로 변경되지 않는 상황은 여러 요소에 의해 발생할 수 있습니다. 특히 “아이콘 형태가 반드시 동일해야 한다”는 부분에 대한 설명을 드리겠습니다.
아이콘 형태의 일치:
- 아이콘 형태가 동일해야 한다는 것은 단순히 아이콘의 ‘외형’을 넘어서 속성 및 그 구조까지 동일해야 한다는 뜻입니다. 즉, 아이콘이 동일한 레이어 구조로 이루어져 있어야 하며, 이 구조는 색상, 레이어 타입(예: Stroke, Fill) 등도 포함됩니다.
- 예를 들어, 아이콘이 여러 개의 벡터 레이어로 구성되어 있는 경우, 다른 레이아웃의 벡터 레이어가 있다면 그것이 동일한 색상을 공유하지 않을 수 있습니다.
- 아이콘 형태가 동일해야 한다는 것은 단순히 아이콘의 ‘외형’을 넘어서 속성 및 그 구조까지 동일해야 한다는 뜻입니다. 즉, 아이콘이 동일한 레이어 구조로 이루어져 있어야 하며, 이 구조는 색상, 레이어 타입(예: Stroke, Fill) 등도 포함됩니다.
벡터 및 프로퍼티 일치:
- 벡터의 Stroke나 Fill 속성도 동일한 이름과 구조를 가져야 아이콘 인스턴스 변경 시 연동이 제대로 이루어질 수 있습니다. 레이어 안의 요소들이 동일한 이름과 스타일 속성을 공유해야 합니다.
- 벡터의 Stroke나 Fill 속성도 동일한 이름과 구조를 가져야 아이콘 인스턴스 변경 시 연동이 제대로 이루어질 수 있습니다. 레이어 안의 요소들이 동일한 이름과 스타일 속성을 공유해야 합니다.
프로퍼티의 일관성 유지:
- 아이콘의 크기가 변화하는 경우 프로퍼티를 통해 그 크기 및 색상 속성이 동시에 수정되어야 하며, 이를 위해서는 프로퍼티가 일관되게 관리되어야 합니다. 이것은 버튼 컴포넌트를 제작할 때 각자 다른 크기나 색상 대신 동일한 스타일 속성을 이용해 구성하셔야 한다는 점을 의미합니다.
- 아이콘의 크기가 변화하는 경우 프로퍼티를 통해 그 크기 및 색상 속성이 동시에 수정되어야 하며, 이를 위해서는 프로퍼티가 일관되게 관리되어야 합니다. 이것은 버튼 컴포넌트를 제작할 때 각자 다른 크기나 색상 대신 동일한 스타일 속성을 이용해 구성하셔야 한다는 점을 의미합니다.
기존 유사 문제 및 해결 사례:
위의 링크에서 유사한 문제들을 다뤘고, 불일치 문제 및 해결 방법에 대해서 다루고 있습니다. 해당 내용을 참조하시면 더욱 깊이 이해하실 수 있습니다.
위의 정보를 바탕으로 문제를 해결해보신 후 추가적으로 궁금한 점이 있으시면 꼭 이어서 질문 부탁드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.