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

Jennifer님의 프로필 이미지
Jennifer

작성한 질문수

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

Constraint 기능

constraint 버튼에 적용할때 프레임이여야 하는지요

작성

·

223

·

수정됨

1

버튼이 반드시 프레임이여만 되는건가요? 프레임아니고 도형으만들면 적용이 안되는거 같아서요

 

그리고 constraint를 적용해서 버튼을 만든뒤에 버튼이니까 컴포넌트로 만들고 복사해 다른 프레임에서 인스턴스가 되쟎아요.

그런데 문제는 컴포넌트 페이지에서 프레임 위드를 줄이면 복사한 인스턴스 페이지에서도 그 인스턴스 버튼도 똑같이 줄게되는데...이런건 어떻게 생각을 정리해야할까요?? 컴포넌트화 시에는 사용을 말아야하는건가요?

 

실무에서 모든 요소를 다 컴포넌트화하면 초보라그런지 너무할것도 많고 어렵게 느껴지는데 최소한의 것만 만들어서 인스턴스로 쓴다면 어떤것들이 있을까요?

답변 2

0

에릭님의 프로필 이미지
에릭
지식공유자

안녕하세요. 문의 감사합니다.

Constraint를 버튼에 적용하고 싶다면 기본적으로 프레임을 사용하셔야 합니다.

Constraint의 기능 자체가 프레임에 국한해서 사용 가능한 기능이기 때문에 그렇습니다.

컴포넌트는 어떤 오브젝트나 내가 만든 무언가를 재사용하고자 할때 저장을 하는 것인데요. 말씀하신 것처럼 컴포넌트를 변경하게 되면 해당 컴포넌트를 통해 생성된 인스턴스도 모두 영향을 받아 함께 변경이 됩니다. 그래서 가능하시다면, 컴포넌트는 변경하지 마시고, 인스턴스를 생성한 후에 해당 인스턴스 선택후 우클릭을 하셔서 "Detach instance"를 하고 해당 instance(였던) 오브젝트와 컴포넌트 간의 연결고리를 끊어준다음, 해당 instance(였던) 오브젝트를 변경해주시면 될 것 같습니다.

모든 요소를 컴포넌트화할지 말지는 작업자 개인의 판단에 따라 진행을 하면 됩니다. 본질적으로 컴포넌트를 만드는 것은 자주 재사용해서 활용될 것 같다 싶은 오브젝트를 저장하는 것입니다. 어디까지나 생산성 기능으로 컴포넌트를 활용하지 않아도 작업을 할 수는 있습니다. 다만, 작업의 시간이 더 걸릴 수 있는 것이지요. 본인이 생각하시기에 재사용이 많이 될 것 같다 생각되는 것(예를 들어 메인 버튼 등) 위주로 컴포넌트화하시면 되겠습니다.

감사드리고, 혹시 또 궁금한 점이 있다면 문의주세요.

0

안녕하세요, 인프런 AI 인턴입니다.
Jong Eun Oh님, 피그마에서 ‘Constraint’ 기능은 오브젝트가 속한 프레임 내에서의 상대적인 위치나 크기를 설정하기 위해 사용되는 기능입니다. 따라서 ‘Constraint’를 적용하기 위해서는 해당 오브젝트가 반드시 프레임에 포함되어 있어야 합니다. 도형만으로는 ‘Constraint’를 적용할 수 없습니다.

컴포넌트로 만들어진 버튼의 경우, 컴포넌트의 크기를 변경하면 모든 인스턴스의 크기도 같이 변하게 됩니다. 이는 컴포넌트가 일관성을 유지하도록 도와주는 기능 중 하나입니다.

컴포넌트를 사용하는 것이 처음에는 복잡하고 어려워 보일 수 있지만, 일관된 디자인 요소를 사용하여 효율적으로 작업을 진행하고자 할 때 매우 유용합니다. 실무에서는 버튼, 아이콘, 입력 필드 등과 같은 반복적으로 사용되는 요소들을 컴포넌트화하여 관리하는 것이 일반적입니다.

최소한으로 컴포넌트화 할 요소들을 선택하는 것은 프로젝트의 성격과 팀 내부의 규칙에 따라 결정될 수 있으니, 작업 환경에 가장 적합한 방법을 찾아 적용하는 것이 좋을 것입니다.

추가적인 도움이 필요하시면, 아래 소스 링크를 참고해주세요.
- 인프런 FAQ

도움이 되셨길 바랍니다!

Jennifer님의 프로필 이미지
Jennifer

작성한 질문수

질문하기