인프런 커뮤니티 질문&답변
작성한 질문수
component, frame, variants 그리고 컴포넌트에 새로운 property 추가하기 관련 질문
작성
·
9
0
안녕하세요. 질문드립니다.
frame과 component, variants, instance의 관계를 다시 설명해주시면 감사하겠습니다.
그리고 실제로 수행하는 부분에서 잘 안되는게 있어서 질문드립니다.
Icon/Button component에 새로운 1,2번 아이콘을 추가하려고 합니다. 그런데 기존 Icon/Button variants로 합쳐지지 않아요. 1,2번을 선택하면 우측에 combine as variants 버튼이 확인되는데 Icon/Button 자체가 variants라서 그런가? 잘 안되네요.
이렇게 variants 자체를 클릭하면 추가할 수는 있는데 제가 새로 만든 1,2번을 추가하는 것이 원활하게 잘 안되고 있습니다 ㅜㅜ
이때부터 어떻게 바꿔야 하는지 잘 모르겠어서 추가가 잘 안되고 있는데, 혹시 알려주실 수 있으실까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. platform_Biz님.
피그마의 frame, component, variants, instance의 관계와 각각의 기능을 간단히 설명드리겠습니다.
- Frame: 기본 레이아웃 도구로, 여러 UI 요소(텍스트, 이미지 등)를 그룹화하여 구성할 수 있습니다. 페이지나 화면별로 레이아웃을 잡기 좋습니다.
- Component: 재사용 가능한 요소의 기본 단위입니다. 버튼 등 반복해서 사용하는 UI 요소를 정의할 때 사용합니다. 컴포넌트를 만들면, 이를 기반으로 instance(인스턴스)를 생성하여 수정 및 재사용할 수 있습니다.
- Variants: 같은 컴포넌트의 다양한 상태(e.g., 기본, 호버, 클릭)를 관리하기 위한 기능입니다. 예를 들어, 버튼의 색상 변화나 아이콘 변경 등을 비슷한 구조의 컴포넌트에서 쉽게 관리할 수 있습니다.
질문 주신 내용에 따르면, 기존 아이콘/버튼에 새로운 아이콘을 추가하고 싶지만 Variant로 통합되지 않는다고 말씀하셨는데요. 아마도 새로 추가한 아이콘들이 기존 Variant 들과 속성이나 구조가 맞지 않아 생기는 문제일 수 있습니다. 해결책은 다음과 같습니다:
Combine as Variants 사용: 새로 추가할 아이콘들이 같은 속성(Property)을 가지도록 정의되어 있는지 확인하세요. 실제로 새로운 아이콘들을 선택 후 “Combine as Variants” 버튼을 클릭해 동일한 속성 안에 통합되는지 확인해 보세요.
속성 확인 및 조정: 기존 Variant와 속성(Property)이나 설정이 얼마나 일치하는지 점검합니다. 기존 Variant의 속성(Property 1, Property 2 등) 구조를 따라 새로 만든 아이콘에도 동일하게 속성을 추가하고 정의해보세요.
Variant Set에 추가하기: (Paste Here 또는 Add New를 통한 추가) 새로운 아이콘이 추가된 상태에서 기존 Variant Set을 선택하면 새로 추가한 아이콘을 포함하도록 Property 설정을 확장할 수 있습니다.
관련하여 도움이 될 만한 게시물을 확인해 보세요:
- 컴포넌트 생성시 질문: 컴포넌트 생성과 활용에 대한 기본 개념을 이해할 수 있는 답변입니다.
- 컴포넌트 관련해서: 컴포넌트의 생성, Instance 및 Detach에 대해 다루고 있습니다.
이 질문이 충분한 도움이 되었기를 바랍니다. 그래도 해결되지 않는다면, 해당되는 부분을 스크린샷으로 상세히 보여주시거나, 디테일한 설명을 덧붙이셔서 다시 질문해 주세요. 곧 지식공유자께서 추가적인 조언을 드릴 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.