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입니다. 아래의 이미지처럼 동일한 컴포넌트의 경우의 수가 많다면 컴포넌트 세트로 관리해 보세요.
=> 아이콘은 언제든지 교체할 수 있게 단일 컴포넌트 혹은 여러 개를 동시에 컴포넌트로 만드는 멀티플라이를 사용하고,
동일한 컴포넌트의 상태, 크기, 색상... 등 여러 종류가 필요하면 컴포넌트 세트로 만들면 된다. 상황에 맞게 미리 협의해서
만드는 게 가장 이상적임 !!!
출처 : https://fullstack-eun.tistory.com/19
출처 : https://figma-play.tistory.com/10
출처 : https://figma-play.tistory.com/7
'피그마 기능 정리' 카테고리의 다른 글
Figma_Component 기능 알아보기 (0) | 2024.09.04 |
---|