피그마의 핵심 기능 컴포넌트(Component) 알아보기

오늘은 피그마의 핵심기능 컴포넌트(Component)에 대해 알아볼게요.

컴포넌트는 피그마를 쓰는 이유라고도 할 수 있겠습니다. 그만큼 중요한 기능이고 잘 익혀두면 매우 효율적인 작업을 할 수 있게 도와줍니다.

​

Component는?

재사용 가능한 UI 요소를 의미합니다. 예를 들어, 버튼, 입력 필드, 드롭다운 등의 UI 요소는 모두 Component로 만들 수 있습니다. 이러한 Component를 제작하면, 해당 Component를 다른 페이지 또는 프로젝트에서도 재사용할 수 있습니다.

​

Component를 사용하면 일관성 있는 UI를 구성할 수 있으며, 수정이 필요한 경우 필요한 만큼 수정하면 모든 페이지에서 해당 Component가 수정됩니다. 이는 작업 시간을 절약하고 일관된 UI를 유지할 수 있게 해 줍니다.

​

Component를 만들 때는 해당 요소의 디자인, 크기, 색상, 텍스트 등을 포함한 모든 속성을 정의할 수 있습니다. 이러한 커스텀 속성을 사용하여 재사용 가능한 Component를 만들 수 있으며, 기존 Component에서 파생된 새로운 Component를 만들 수도 있습니다.

​

또한, 피그마에서는 Component 라이브러리를 제공하여 사용자가 필요한 Component를 빠르게 만들고 재사용할 수 있도록 지원합니다. 이러한 라이브러리를 사용하면 디자인 시간을 단축하고 일관성 있는 UI를 유지할 수 있습니다.

 

 

​컴포넌트를 만들려면 화면 상단 중앙의 Create component 버튼을 누르거나 단축키 Option + Cmd + K를 누르면 컴포넌트가 생성됩니다.

(윈도의 경우 Alt + Ctrl + K)

 

 

컴포넌트 생성 후 왼쪽의 Assets 패널로 가서 만들어 놓은 컴포넌트를 마우스로 드래그해서 작업화면으로 가져오면 됩니다.

​

 

 

가져온 컴포넌트는 복사본인 인스턴스(Instance)가 됩니다.

​

 

 

피그마 Component, Instance 개념 알아보기

컴포넌트가 변경되면 인스턴스도 변경됩니다.

 

 

 

피그마 컴포넌트(Component) 개념 익히기

그런데 인스턴스가 변경되면 컴포넌트는 변경되지 않아요~

​

 

컴포넌트는 여기저기 흩어져 있는 일관된 디자인들을 한꺼번에 수정, 변경이 가능하여 효율적인 디자인 작업을 할 수 있게 도와주는 기능이었습니다.

다음 포스팅은 동일한 기본 디자인 요소를 가지면서 다른 스타일이나 속성을 갖는 여러 가지 버전의 컴포넌트인 Variants에 대해 알아보도록 할게요.

 

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

 

레탑피그마 오픈 채팅방 문의

https://open.kakao.com/o/sJdtEyCe

레탑 피그마