피그마_컴포넌트 (Component)

1. 컴포넌트 개념

1) 컴포넌트 단축키 : Ctrl + Alt + k

2) 개념 : 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위개념

1) 컴포넌트 단축키 : Ctrl + Alt + k

컴포넌트 : 가장 최소단위

ex. 아이콘 버튼_벡터

2) 개념 : 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위임

- 디자인 요소를 재사용하고 유지보수하기 쉽게 만드는 방법을 제공함

- Figma의 컴포넌트 기능은 디자인 시스템을 구축하고 협업하는 데 큰 도움을 주며,. 특히 대규모 프로젝트에서 효율적인 디자인 작

업을 가능하게 함

- 컴포넌트를 해야 디자인 수정 및 유지보수 반복작업을 줄이는 효율성도 극대화 됨

- ex) 웹 페이지의 헤더, 버튼, 아이콘 등과 같이 반복적으로 사용되는 디자인 요소를 컴포넌트로 정의하면 해당

컴포넌트를 다른 디자인에서도 쉽게 사용할 수 있음

→ 색상 스타일화, 텍스트 스타일화, 이펙트 스타일화, 그리드 스타일 화

한 번 이상 반복적으로 사용되는 부분들은 전부 컴포넌트 및 스타일화를 해야 한다

3. 단일 컴포넌트 만드는 방법

방법 1) 대상 선택 후 상단 툴바에서 컴포넌트 아이콘 클릭

방법 2) 대상 선택 후 우클릭 Create components 클릭

방법 3) 대상 선택 후 단축키 Window: crtl + alt + k, Msck: command + option + k

ㄴ컴포넌트인지 아닌지는 레이어 색상이 보라색이고 심볼을 보면 알 수 있음

ㄴ 단축키 : Window: crtl + alt2 , Mac: option + 2 에셋 패널에서도 보임

여러 개의 객체를 한꺼번에 여러 개의 컴포넌트로 만드는 방법은 여러 객체 선택 후 툴바에서 Create multiple componets 선택합니다.

동일한 버튼인데 디폴트, 호버, 포커스, 활성, 비활성... 등 다양한 상태가 필요하고 색상, 크기... 등 다야한 종류가 필요한 경우 모든 걸 단일 컴포넌트로 만들면 너무 많아서 관리가 어려운 부분이 있습니다. 이때 필요한 게 component set입니다. 아래의 이미지처럼 동일한 컴포넌트의 경우의 수가 많다면 컴포넌트 세트로 관리해 보세요.