작성한 질문수 3

0

저도 궁금한 부분이라 여쭤봅니다!
다운받은 파일에서 보고 따라하는 데 더미 아이콘에서 인스턴스 스왑이 먹히지 않을 경우 왜 그런걸까요? ㅠㅠ

0

안녕하세요, 정민경님

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

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

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

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

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

감사합니다.

0

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

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

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

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

방법 2: Figma의 Auto Layout 활용

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

방법 3: Variants 및 Component Properties 활용

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

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

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

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