[Figma] 피그마 컴포넌트 활용법

안녕하세요. 오랜만에 피그마 튜토리얼 포스팅이네요. 

 

오늘부터 스스로 매일 30분만이라도 피그마 연습에 투자하고자 합니다. 

 

아직 학생이라 피그마를 매일 쓸일은 없어서, 오랫동안 안쓰면 배워놓은 기능들 다 까먹게 되는게 너무 아깝더라구요.

 

툴 자체는 배우기 쉽지만 손에 익어야 작업 속도가 빨라지기 때문에 꾸준한 연습이 필요한 것 같아요! 

 

오늘은 피그마 컴포넌트 기능에 대해 자세하게 포스팅해보겠습니다. 

 

피그마를 사용하실줄 아는 분들은 컴포넌트 기능이 어떤 역할을 하는지 알고 계실텐데요! 

 

 

보통 UI 구성요소들은 반복적으로 여러 화면에 사용됩니다. 가장 쉽게 들 수 있는 예시는 버튼인데요. 

같은 색, 모양의 버튼이지만 텍스트만 바뀌는 경우는 해다 버튼은 컴포넌트로 만들어주고 그 컴포넌트를 복사해서 instance로 만들어 줍니다. (컴포넌트화 시키는 방법은 아시는 것으로 간주하며...) 

 

그렇게 되면 나중에 버튼 디자인을 바꾸게되었을 때 그 컴포넌트에서 복사된 인스턴스에 대해서는 한꺼번에 수정할 수 있어서 어마어마하게 편리한 기능이에요~

 

오늘은 이 컴포넌트 기능을 한 단계 더 나아가 활용해보는 방법을 버튼 예시를 통해 가져와봤습니다. 

 

마스터 컴포넌트와 인스턴스의 관계를 이해해보자 

 

가장 쉽게 들 수 있는 예시인 버튼으로 작업을 해보겠습니다. 

 

먼저, 컴포넌트로 만들어주는 법을 모르시는 분들이 계실 수 있어, 

 

피그마에서 만든 버튼을 선택한 후 가운데 네개의 다이아몬드 아이콘을 눌러줍니다. 

그렇게되면 오른쪽 그림처럼 Layers 창에서는 이 컴포넌트가 마스터 컴포넌트라는 표시로 바뀝니다. 이제 이 컴포넌트를 복사하면 인스턴스가 생기는 것입니다. (부모-자식 개념으로 생각하면될거같아요) 컴포넌트를 바꾸면 인스턴스는 똑같이 바뀝니다. 

 

아래 캡처에서 보시면 선택되어 있는 버튼은 마스터 컴포넌트라는 것을 알수 있고, 그 밑으로 동일한 버튼들은 인스턴스입니다. 복사할 때 꼭 일일히 마스터 컴포넌트에서 복사하지 않고 다른 인스턴스를 복사해도 마스터컴포넌트랑 연결이 되어 있습니다. 

 

 

마스터 컴포넌트에서 색상이나, Border Radius, Text, 패딩 사이즈 등을 바꾸면 인스턴스에서 똑같이 바뀌는 것을 볼 수 있는데요. 

이렇게 모든 버튼이 토씨하나 다르지 않고 동일하다면 이렇게만 해주면 됩니다!

 

하지만 컴포넌트에는 숨겨진 기능이 더 있는데요

 

보통 여러 앱에서는 버튼의 스타일은 비슷해도 텍스트 크기나 버튼의 상태에 따라 색상이 다르거나 하는 경우가 대부분이잖아요~? 

 

하지만 제각기 다른 속성을 가진 버튼을 일일히 컴포넌트화하는 것보다는 하나의 마스터 컴포넌트를 가지고 인스턴스 내에서 바꿔야하는 속성값만 바꿔주면 더 간결하게 디자인 시스템을 운영할 수 있을 듯 하죠! 

 

예시를 들어보겠습니다. 

 

인스턴스중 하나는 버튼의 색상과 텍스트를 변경했고, 또다른 한개의 인스턴스는 텍스트만 변경한 것을 확인 할 수 있습니다. 

 

이때 인스턴스에서 변경된 속성들은 마스터 컴포넌트에서 더이상 컨트롤 하지 못하게됩니다. 

마스터에서 텍스트와 컬러를 바꿔도 초록색 인스턴스 버튼의 색상과 텍스트는 바뀌지 않습니다.

아래 그림과 같이, 마스터 컴포넌트의 텍스트와 색상이 바뀌었는데 첫번째 인스턴스는 그대로고, 두번째 인스턴스는 텍스트만 마스터를 따르지 않고 색상은 마스터를 따릅니다. 

아래 그림처럼, 인스턴스에서 변경하지 않았던 속성의 경우, 마스터 컴포넌트의 변화를 따릅니다.

마스터컴포넌트에서 Border Radius를 바꾸니, 인스턴스 세개 모두 적용이 된것을 볼 수 있습니다. 

인스턴스에서 직접 Border Radius를 건들지 않았기 때문입니다. 

 

이렇게 같은 시스템 내에서 다양한 버튼디자인을 일관적인 스타일로 운영하기 위해 꼭 필요한 기능인 것 같습니다. 

 

 

변경한 인스턴스를 다시 원상복귀할 수도 있습니다. 

복귀하고자하는 인스턴스 선택후 상단에 표시한 아이콘을 누르면 다시 원래의 마스터 컴포넌트와 동일한 상태로 돌아갑니다. 

그리고 지금 예시는 간단해서 잘 안느껴지겠지만, 수많은 버튼들 중에서 마스터 컴포넌트가 어떤 것인지 찾아야할 때도 있을 텐데요~ 

 

그때는 아무 인스턴스를 선택하고 우클릭>Main Component > Go to Main Component 를 선택하면 마스터 컴포넌트가 있는 위치로 바로 이동시켜줘서 매우 편리한 숨은 기능이에요! 

 

오늘은 피그마 컴포넌트 활용법을 간단하게 설명을 드렸습니다!

도움이 되셨길 바랍니다 :)