[대댓글]아이콘 이름 설정

Question

강사님 안녕하세요 25/10/31 작성한 글에 답변주셨었는데요. 자세한 답변과 함께 샘플까지 주셔서 많은 도움이 되었습니다. 너무 감사합니다! 추천해주신 방법 2로 제작해서 사이즈별로 아이콘이 잘 적용되었어요. 바쁘실텐데 시간내주셔서 감사합니다. 그리고 작업하다가 한가지 더 여쭤볼게 있는데요. 저희 프로젝트에 사용되는 버튼에 아이콘이 앞뒤로 두개인데요. Nested instance로 할 경우 이름 구분이 Leading icon, Trailing icon이 안되고 하나로 인식되서 아래 샘플화면처럼 보이는데 아이콘이 2개인 경우, 이름을 구분할 수 있는 방법이 있을까요? 답변주시면 감사하겠습니다. 잘부탁드립니다. 아래 보내주신 피그마파일 방법 2 > 뒤에 Trailing icon을 추가해 보았습니다. 둘다 Leading icon으로 나오는 상태입니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 호랭이님, 질문 주셔서 감사합니다! 버튼에 아이콘을 두 개 사용하면서 각각의 이름을 구분하고 싶으신 것 같습니다. 피그마에서 여러 인스턴스를 다룰 때, 각각의 아이콘을 구분하는 방법에 대해 안내드리겠습니다. 레이어 이름 변경: 피그마에서 각 인스턴스의 레이어 이름을 수정하여 Leading Icon 과 Trailing Icon 으로 변경해 주세요. 이렇게 하면 특정 인스턴스를 명확히 구분할 수 있습니다. 오토 레이아웃 사용: 오토 레이아웃을 사용하여 버튼 안에 아이콘을 배치하게 되면, 각 위치를 구분하기 쉬워집니다. Leading 과 Trailing 을 레이어 구조 내에서 정확히 배치하여 직관적으로 처리할 수 있습니다. 컴포넌트 속성 설정: 각 인스턴스가 다른 위계나 역할을 가질 때, 컴포넌트 속성으로 Variant(변형) 을 설정하여 Leading Icon 과 Trailing Icon 으로 구별할 수 있습니다. 이렇게 통해, 각 아이콘을 원하는 대로 구분 및 설정할 수 있을 것입니다. 추가적인 질문이 있으시면 언제든지 문의 주세요! 이미지 출처들: - The image appears to show a UI design tool interface - The image shows a UI configuration panel for a &ldquo;Button&rdquo; component