Figma Component 컴포넌트 만들기
기획자의 피그마 Figma - Component
드.디.어 때가 왔습니다!
Figma 를 사용한다면 반드시 알아야 하는 개념, 컴퍼넌트를 학습할 시간이 드디어 오고야 말았습니다.
컴포넌트에 대한 개념을 반드시 익히고 사용해야 피그마를 통해 기획, 디자인 작업을 하는데 그 의미가 있다고 할 수 있을만큼 Component 는 Figma 에 있어 가장 중요한 개념이자 기능 중의 하나입니다.
*** 동영상으로 보기
Component 란 무엇일까요?
우선 컴포넌트Componen의 사전적 의미부터 찾아볼까요?
출처 : 네이버 영어사전 검색결과사전적 의미로 컴포넌트(Component) 는 요소, 부품을 의미합니다.
Figma 에서도 마찬가지입니다.
화면을 구성하는 모든 요소들, 텍스트 / 이미지 / 버튼 / 아이콘 / 입력폼 등등... 모든 요소를 부품으로 만드는 개념을 컴포넌트라고 칭하고 있습니다.
컴퍼넌트 component 만들기
컴포넌트를 만들기 위해서 우리의 실습 대상인 Toss 화면을 다시 한번 살펴볼게요.
어떤 에셋을 컴포넌트로 만들어야 효율적일지를 판단해야하니 분석을 먼저 해야겠죠?
공통적으로 사용할 수 있는 에셋과 영역에 대해 분류를 해보면 다음과 같습니다.
송금 버튼 타입 1 : 파란색 / 타입 2 : 회색
이미지 썸네일 타입 1 : 사용자 프로필 사진 / 타입 2 : 은행 계좌 심볼 / 타입 3 : 카드 이미지
타이틀 : 타이틀 텍스트, 금액, >
데이터 타입 1 : 이미지 썸네일, 타이틀 텍스트 + 금액, 송금 버튼
데이터 타입 2: 이미지 썸네일, 타이틀 텍스트 + 금액
계좌 영역 : 타이틀, 데이터 타입 1
카드 영역 : 타이틀, 데이터 타입 2
컴포넌트는 하위 단위부터 제작한 후 점차 상위 단계로 만들어가는 것이 좋습니다.
오늘은 우리가 이전 시간에 만들었던 송금 버튼과 이미지 썸네일부터 Component 로 만들어보겠습니다.
1. 먼저 송금 버튼을 Component 로 만들어볼게요.
이전 시간에 Auto layout 으로 정렬해준 top 영역에서 버튼 영역만 선택합니다.
작업화면 내에서 송금 버튼만 선택하기가 힘들다면, 좌측의 레이어 패널에서 버튼 그룹만 선택하시면 됩니다.
2. 작업화면의 송금 버튼 또는 좌측 레이어 패널에서 현재 선택되어 있는 버튼 영역 위에서 마우스 오른쪽 클릭을 해주세요.
이때 제공되는 기능 중에서 Create component 를 클릭합니다. 또는 표시되어 있는 단축키로 Create component 해줍니다.
3. 그럼 이렇게 보라색 아이콘과 영역으로 지정이 되었죠? 완성입니다! :)
같은 방법으로 Profile 사진 영역도 컴퍼넌트로 만들어주세요.
Component 적용하기
이제 만들어진 컴포넌트를 화면에 적용해봐야겠죠?
1. 좌측의 레이어 패널에서 Assets 탭을 클릭해주세요.
검색어를 입력하여 컴포넌트를 찾을 수 있습니다.
지금 우리는 작업 파일 안에서 바로 컴포넌트를 만들었기 때문에 Assets 탭을 클릭하면 Local component 라는 이름으로 등록된 컴포넌트 목록이 보여질거에요.
Figma assets tabs2. 목록에서 컴포넌트를 클릭한 후에 작업 화면으로 드래그 해주면, 바로 적용이 됩니다.
이렇게 적용된 컴포넌트를 클릭한 상태에서 좌측의 레이어 패널을 확인해보세요.
아까 우리가 컴포넌트를 등록했을때랑 달라진 부분이 있죠?
무엇일까요?
바로 Component 를 표시하는 아이콘이 달라졌음을 알 수 있습니다.
Figma 의 컴포넌트는 크게 두가지로 나눌 수 있습니다.
Figma component icon속이 꽉 차있는 아이콘은 마스터 컴포넌트를 의미힙니다.
기본적으로 화면 안에 적용된 컴포넌트는 해당 화면의 성격에 따라 변형이 가능하지만 Master Component 에서 정의한 성격에 따라 변경이 불가한 경우도 있습니다. 따라서 해당 컴포넌트가 추후 사용될 성격에 따라 Auto layout 등의 기능을 설정하는 것이 좋습니다.
Component 변경하기
컴포넌트를 수정하는 방법은 두가지가 있습니다.
첫번째, Master Component 수정하기
화면에 이미 적용해놓은 컴포넌트이지만, 원형의 컴포넌트에 대한 변경이 필요한 경우의 방법입니다.
컴포넌트를 클릭한 상태에서 오른쪽 마우스를 클릭한 후 Go to Master component 를 클릭합니다.
우리는 지금 실습을 위해서 작업 파일에서 바로 컴포넌트를 만든 상태라 마스터 컴포넌트를 찾기가 어렵지 않지만, 컴포넌트로 디자인 시스템을 구축한 상태라면 원래의 마스터를 찾기가 쉽지 않습니다. 이런 경우에 이 기능은 아주 유용하게 사용할 수 있습니다.
두번째는 해당 컴포넌트를 Master component 에서 분리시켜 변경하는 방법입니다.
이 방법은 기존에 가져온 컴포넌트와 다른 방법으로 사용해야할 때 사용하기 좋은 방법입니다.
역시나 해당 컴포넌트를 클릭한 후, 오른쪽 마우스를 클릭해주세요. 그리고 Detach instance 를 클릭합니다.
Detach instance 를 클릭하면, 해당 영역은 컴포넌트에서 분리되면서 일반 프레임으로 변경됩니다.
따라서 이 상태에서는 완전히 자유롭게 변형이 가능합니다.
자, 여기까지 오셨다면 figma 기본 기능의 80% 정도는 학습하신 것으로 생각하셔도 됩니다.
저와 함께 Figma master 가 되는 날까지 열심히 달려보아요 :)
#figma #피그마 #컴포넌트 #피그마컴포넌트 #라이브러리 #웹기획 #앱기획 #웹디자인 #디자인협업툴 #figmatutorial #피그마튜토리얼
