Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
component, frame, variants 그리고 컴포넌트에 새로운 property 추가하기 관련 질문
Viết
·
81
0
안녕하세요. 질문드립니다.
frame과 component, variants, instance의 관계를 다시 설명해주시면 감사하겠습니다.
그리고 실제로 수행하는 부분에서 잘 안되는게 있어서 질문드립니다.
Icon/Button component에 새로운 1,2번 아이콘을 추가하려고 합니다. 그런데 기존 Icon/Button variants로 합쳐지지 않아요. 1,2번을 선택하면 우측에 combine as variants 버튼이 확인되는데 Icon/Button 자체가 variants라서 그런가? 잘 안되네요.
이렇게 variants 자체를 클릭하면 추가할 수는 있는데 제가 새로 만든 1,2번을 추가하는 것이 원활하게 잘 안되고 있습니다 ㅜㅜ
이때부터 어떻게 바꿔야 하는지 잘 모르겠어서 추가가 잘 안되고 있는데, 혹시 알려주실 수 있으실까요?
Quiz
Những lợi ích chính của việc sử dụng grid là gì?
Tốc độ thiết kế chậm lại
Cải thiện căn chỉnh thiết kế và tính nhất quán
Tạo ra sự bố trí ngẫu nhiên
Hạn chế sáng tạo của nhà thiết kế
Câu trả lời 3
0
첫번째 질문과 관련해서는 해당 강의에서는 베리언츠는 따로 다루지는 않습니다. 베리언츠 기능을 활용하는 것과 관련해서 괜찮은 영상들이 있어 공유합니다.
0
안녕하세요. 관련해서 ericworld121@gmail.com으로 해당 피그마 링크를 보내주실 수 있을까요? 아이콘이 왜 추가가 안 되는지 저도 확인을 해봐야 알 수 있을 것 같아요. 감사합니다.
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에 대해 다루고 있습니다.
이 질문이 충분한 도움이 되었기를 바랍니다. 그래도 해결되지 않는다면, 해당되는 부분을 스크린샷으로 상세히 보여주시거나, 디테일한 설명을 덧붙이셔서 다시 질문해 주세요. 곧 지식공유자께서 추가적인 조언을 드릴 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.