[Figma] 컴포넌트(Component) 활용하기

 

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

 

피그마의 핵심기능이라고 할 수 있는 컴포넌트(Component)에 대해 소개해드리려고 하는데요.

이 기능은 알고 있으면 정말 효율적으로 사용되리라 생각되네요=]

 

---

 

컴포넌트(Component)란?

여러 개의 아이템을 하나의 아이템으로 수행할 수 있도록함을 의미하는데요.

다시 말하자면 공통적으로 들어가는 요소들에 대해 컴포넌트를 사용함과 동시에 불필요한 반복작업을 줄이고, 이로인해 유지보수의 수고로움을 덜 수 있습니다.

 

* 구글 머티리얼 디자인에서 피그마에서 사용가능한 디자인 키트를 제공하고 있으니 Install하셔서 사용하신다면 시간이 더 단축되겠네요 !

Material Design

 

컴포넌트 활용하기

저는 현재 정말 많은 부분에서 컴포넌트를 활용하고 있는데요!

첫 번째로는 앱바(Appbar)입니다.

앱바는 정말 메뉴 이름만 변경 될 뿐 같은 폼을 유지하는 경우가 많기 때문에 이렇게 컴포넌트로 분리하여 사용한다면

보다 효율적인 작업이 되지 않을까 합니다.

두번째로, 가장 흔히 사용되는 버튼(Button) 인데요.

버튼이야말로 정말 많은 화면에서 볼 수 있는데, 크기 변경과 같이 단순한 작업이 필요로 할 때 하나하나 찾아가면서 수정하면 많은 시간이 소요될 뿐만아니라 놓치는 부분이 발생하게 되잖아요.

그래서 이렇게 컴포넌트를 활용한다면 일괄변경이 가능해 정말 빠른 보수가 가능하게 되겠죠?

이외에도 정말 많은 부분에서 컴포넌트를 사용하고 있지만 그 모든걸 반복 설명드리는 것보다 직접 생성해보면 어디에 써야 적합할지, 효율적인지 와닿을 것 같네요 !

728x90

컴포넌트 생성하기

작업의 효율을 위해선 단축키가 빠질 수 없겠죠? 단축키 사용하는걸 습관화 한다면 더 빠른 작업속도로 완벽한 작업물을 생성할 수 있지 않을까 싶네요.

 

정말 간단하게 버튼(Button)을 생성해보겠습니다

빈 화면이 준비 되셨다면 프레임을 통해 버튼을 생성해줄건데요.

✅ 단축키

Frame: 프레임

F

🔵[참고] 그 외 단축키
https://ahnsisters.tistory.com/58

단축키 혹은 좌측 상단 직접선택을 통해 적당한 크기의 프레임을 하나 생성해주세요.

완료가 되었다면 적당한 색상과 텍스트를 작성해주시면 됩니다.

벌써 절반이나 왔는데요..

프레임을 선택한 상태로 단축키 혹은 상단 버튼을 클릭, 오른쪽 마우스 총 3가지 방법이 있습니다.

제일 추천 드리는 방법은 당연 단축키겠죠?

✅ 단축키

Window	OS
Ctrl + Alt + K	Cmd + Option + K

🔵[참고] 그 외 단축키
https://ahnsisters.tistory.com/58

3가지 중 1개의 방법으로 실행하면, 아래와 같은 결과물이 나올텐데요.

이렇게 나왔다면 제대로 만들어주신게 맞습니다.

이건 '원본'과 같은 개념이고, 실질적으로는 컴포넌트는 유지한 채 복제하여 사용합니다.

복제를 하게 되면 좌측 상단 빈 다이아몬드가 생성되는데 이걸 '인스턴스'라고 칭해요.

인스턴스를 많은 화면에 사용하다가 버튼의 색상을 변경해야할 일이 생긴다면 !

이 때는 컴포넌트에서 색상을 변경해주면 됩니다.

실질적으로 이것보다 많은 화면에서 사용하게 되겠지만,

이러한 상황에 놓여있을 때 화면 좌측에 생성해둔 Button 컴포넌트를 선택해 색상을 변경해준다면 일괄 변경 되는 모습을 확인하실 겁니다.

컴포넌트는 피그마에서 정말 활용도가 높은 기능이기 때문에 적합한 부분에 적용시킨다면 쉽게 관리가 가능할 것 같네요 !