인프런 커뮤니티 질문&답변

안녕하세요, 정민경님

인스턴스 스왑 프로퍼티를 적용할 때 말씀하신 단점이 맞습니다. 한 번에 모든 요소가 바뀌어버리는 문제가 있죠.

각각 개별적으로 프로퍼티를 적용하시려면 몇 가지 방법이 있습니다.

첫 번째 방법 아이콘을 각 크기별로 별도 컴포넌트로 만드는 것입니다. 예를 들어 24px 컴포넌트, 48px 컴포넌트를 각각 제작하여 해당 크기의 컴포넌트를 인스턴스로 사용하는 방식입니다. 다만 이 경우 각 인스턴스를 개별적으로 관리해야 한다는 번거로움이 있습니다. 다른 디자인 시스템에서도 이런 방식으로 아이콘을 관리하는 경우를 종종 볼 수 있습니다.

두 번째 방법 더미 아이콘의 24px, 32px, 48px 버전을 먼저 인스턴스 스왑으로 설정합니다. 그 다음 최상위 컴포넌트에서 해당 아이콘을 인스턴스 스왑이 아닌 네스티드 인스턴스의 프로퍼티로 외부에 노출시키는 방법입니다.

혹시 위 설명이 이해하기 어려우시면 말씀해 주세요. 관련 예시 파일을 별도로 제작해서 공유해드리겠습니다.

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. 정민경님.

지금 겪고 계신 문제는 여러 크기의 아이콘들에 대해 단일 프로퍼티를 적용하면서 발생하는 것으로 보입니다. 이러한 현상은 Figma에서 모든 인스턴스가 동일한 프로퍼티 설정을 공유하게 되는 상황에서 나타날 수 있습니다. 아래에 이 문제를 해결할 수 있는 몇 가지 방법을 안내드리겠습니다.

방법 1: 개별 프로퍼티 유지

가장 간단한 해결책은 각각의 아이콘 크기에 대해 별도의 프로퍼티를 유지하는 것입니다. 이렇게 하면 크기 변경이 일어날 때 다른 요소에 영향을 주지 않도록 관리할 수 있습니다. 여전히 이러한 방법이 가장 안정적일 수 있습니다.

방법 2: Figma의 Auto Layout 활용

Auto Layout을 활용하여 아이콘과 텍스트의 크기를 동적으로 조정할 수 있습니다. 아이콘과 텍스트를 각각 다른 Auto Layout으로 감싸고, 크기 변경 시 함께 조정되도록 구성할 수 있습니다. 이 때 관련 스타일이나 콘스트레인트 설정을 통해 크기의 비율을 맞출 수 있습니다.

방법 3: Variants 및 Component Properties 활용

Figma에서 Variants 및 Component Properties를 적극 활용하는 것도 방법입니다. 각 크기를 Variants로 설정하고, 사용자 지정 프로퍼티를 통해 각 인스턴스를 설정할 수 있습니다. 이렇게 하면 상황에 따른 보다 정교한 제어가 가능합니다.

아래의 관련 질문 URL도 참고하시면 도움이 될 수 있습니다:
- 텍스트 상자 placeholder의 아이콘과 텍스트 배열 관련

이 게시물은 텍스트 필드 내 아이콘 크기 조정 문제를 해결하는 다른 접근 방식을 제공합니다.

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