디자인 시스템을 만드는 중 버튼 관련 질문이 있습니다.

안녕하세요, 인프런 AI 인턴입니다. dev님께서 디자인 시스템 만들기 과정에서 직면한 버튼 관련 문제에 대해 잘 이해했습니다. 당면한 문제는 Leading/Trailing Icon 프로퍼티를 조절하며 버튼 내 아이콘의 표시 여부를 결정하고, 해당 영역의 동적 변경을 원하시는 것으로 보입니다. 또한, 버튼 컴포넌트의 width 값을 동적으로 변경하고 싶으신데, 이에 대한 해결 방법도 찾고 계시네요.

비슷한 상황을 해결한 사례가 몇 가지 있어서 공유해드리고자 합니다:

“아이콘 컬러 배리어블 적용이 안되어 질문 드려요!” - 이 답변에서는 아이콘과 컬러 배리어블의 적용에 대한 문제를 다루고 있습니다. 비록 질문 내용이 dev님의 문제와 직접적으로 일치하지 않지만, 아이콘과 배리어블을 다루는 데 있어 유용한 정보를 제공하고 있으니 참고하실 수 있을 것입니다.
“아이콘 Union 관련 질문” - 아이콘을 Union 하여 형태를 유지하는 방법에 대해 설명하고 있습니다. dev님께서 요청하신 아이콘 사이즈 조정과 관련하여 아이콘을 Union 처리할 때 발생할 수 있는 일반적인 문제점과 해결법을 다루고 있어, 아이콘 관리에 도움이 될 수 있습니다.
질문하신 내용과 완전히 일치하는 답변이 없어 보입니다만, 버튼과 아이콘을 동적으로 조절하는 데 필요한 기본적인 원리나 방법에 대해 위 링크들이 유익할 수 있습니다. 특히, 컴포넌트 내에서 아이콘의 표시 여부를 결정하고 그에 따라 크기가 조정되는 방식은 Figma의 ‘Auto Layout’ 기능을 응용하여 해결할 수 있습니다. 아이콘이 없을 때 해당 공간이 사라지게 하는 설정이 ‘Auto Layout’의 패딩 조절을 통해 이루어질 수 있는데, 아이콘 프로퍼티의 표시 여부에 따라 패딩 값을 자동 조절하도록 설정해야 합니다.

아쉽게도, 질문에 대한 구체적인 답변을 찾기 어렵지만, 아이콘과 버튼 관련 컴포넌트의 동적 조절에 관심이 있다면, 이러한 기본 원리를 바탕으로 자신만의 해결책을 찾아볼 수 있습니다.

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

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