인프런 커뮤니티 질문&답변
작성한 질문수
[gif첨부] 아이콘 사이즈 설정 Instant swap property
작성
·
61
0
안녕하세요.
피그마에서 아이콘이 있는 버튼을 만드는데 어려움이 있어 문의드립니다.
내용과 함께 gif를 첨부드렸는데 같이 확인부탁드립니다.
아이콘 사이즈 : 24 / 20px
버튼 사이즈 : default / X-small
아이콘 : Leading(앞) / Tralling(뒤)
Instant swap property를 한후,
->Leading icon , ->Trailing icon을 사용하고 싶은데요.
아이콘 사이즈도 자동으로 사이즈별로 관리하려면 어떻게 해야할까요?
아이콘 Instant swap property를 하고나면,
사이즈가 하나로만 인식을 하는지 전체 사이즈가 변경되는 현상이 있습니다.
사이즈별로 연동되지 않고 전체가 같이 바뀌는 현상이 있습니다
(* 아래 처럼 20px 작은아이콘 영역을 Instant swap property 하면 24px로 커지게 됩니다.
사이즈에서 설정을 바꾸면 기존에 큰 사이즈도 똑같이 따라가고 있습니다.)
두개의 아이콘 사이즈를 각각 다르게 설정하는 방법을 찾고있는데 혹시 좋은 방법 있으시면 알려주시면 감사하겠습니다. 잘부탁드립니다.
감사합니다.
답변 2
1
답변이 늦어져서 죄송합니다.
우선, 인스턴스 스왑을 진행하면 전체가 함께 변경되기 때문에 24px과 20px을 혼용하여 사용하는 것은 어렵습니다.
아래에 참고용 파일을 첨부드렸습니다. 해당 파일에 보다 자세한 내용이 정리되어 있으니 한 번 검토해보시기 바랍니다.
첨부된 파일에서는 세 가지 방법을 제시하고 있으며, 각 방법마다 고유한 특징이 있습니다.
그중 방법 1은 현재 사용하고 계신 방식으로 보입니다.
완벽한 방법은 없으며, 각 접근법마다 장단점이 존재합니다.
개인적으로는 방법 2가 보통 리액트 아이콘 컴포넌트 개발 방향과 가장 잘 맞는다고 생각합니다.
한번 검토해보시고, 추가로 궁금한 점이 있으시면 언제든 말씀해 주세요.
https://drive.google.com/file/d/17A7x7sHrziBRn94LXHqQOQsXk8cYy04T/view?usp=sharing
0
안녕하세요, 인프런 AI 인턴입니다. 호랭이님께서 겪고 계신 피그마에서 아이콘 사이즈를 Instant swap property로 관리하는 문제에 대해 도움을 드리고자 합니다. 관련된 질문과 해결 방법을 찾기 위해 유사한 게시물을 추천드리겠습니다.
텍스트 상자 placeholder의 icon과 텍스트 배열 관련
- 이 답변에서는 텍스트 필드 내 placeholder와 아이콘 배치 문제를 다루고 있으며, 컴포넌트 내 아이콘 사이즈 조정과 관련해 아이콘의 배치와 크기 조절 방법을 참고하실 수 있습니다. Figma에서 아이콘을 서로 다른 크기로 설정하는 데 Auto Layout과 아이콘 컴포넌트의 설정을 활용하는 방법이 있을 수 있습니다.
- 이 답변에서는 텍스트 필드 내 placeholder와 아이콘 배치 문제를 다루고 있으며, 컴포넌트 내 아이콘 사이즈 조정과 관련해 아이콘의 배치와 크기 조절 방법을 참고하실 수 있습니다. Figma에서 아이콘을 서로 다른 크기로 설정하는 데 Auto Layout과 아이콘 컴포넌트의 설정을 활용하는 방법이 있을 수 있습니다.
디자인 시스템을 만드는 중 버튼 관련 질문이 있습니다.
- 이 게시물에서는 버튼 내 아이콘을 영역에 따라서 어떻게 동적으로 변경할 수 있는지에 대한 정보를 제공합니다. 특히, Auto Layout을 사용하여 아이콘의 크기와 배열을 조정하는 데 중요한 팁을 얻을 수 있습니다.
- 이 게시물에서는 버튼 내 아이콘을 영역에 따라서 어떻게 동적으로 변경할 수 있는지에 대한 정보를 제공합니다. 특히, Auto Layout을 사용하여 아이콘의 크기와 배열을 조정하는 데 중요한 팁을 얻을 수 있습니다.
아이콘을 Instant swap property로 설정하면 모든 변수가 동일하게 적용되기 때문에 동일한 크기가 되는 문제가 발생할 수 있습니다. 이를 해결하기 위해서는 특정 조건에 따라 아이콘 사이즈를 다르게 설정할 수 있는 변수를 사용하는 것이 좋습니다. 각각 버튼이나 아이콘의 레이어를 별도로 설정하고, 다양한 상태에 따른 Auto Layout 조정을 통해 각 사이즈에 맞는 아이콘을 설정할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강사님 안녕하세요
자세한 답변과 함께 샘플까지 주셔서 많은 도움이 되었습니다. 너무 감사합니다!
추천해주신 방법 2로 제작해서 사이즈별로 아이콘이 잘 적용되었어요.
바쁘실텐데 시간내주셔서 감사합니다.
그리고 작업하다가 한가지 더 여쭤볼게 있는데요.
저희 프로젝트에 사용되는 버튼에 아이콘이 앞뒤로 두개인데요.
Nested instance로 할 경우 이름 구분이 Leading icon, Trailing icon이 안되고 하나로 인식되서 아래 샘플화면처럼 보이는데
아이콘이 2개인 경우, 이름을 구분할 수 있는 방법이 있을까요?
답변주시면 감사하겠습니다.
잘부탁드립니다.
아래 보내주신 피그마파일 방법 2 >뒤에 Trailing icon을 추가해 보았습니다.
둘다 Leading icon으로 나오는 상태입니다.