컴포넌트 ( Component ) 개념과 등록
1. 컴포넌트 개념
컴포넌트 :
단축키 : [ ctrl ] + [ Alt ] + [ k ]
컴포넌트는 디자인 요소를 재사용하고 유지보수하기 쉽게 만드는 방법을 제공합니다.
예를 들어, 웹 페이지의 헤더, 버튼, 아이콘 등과 같이 반복적으로 사용되는 디자인 요소를 컴포넌트로 정의하면 해당 컴포넌트를 다른 디자인에서도 쉽게 사용할 수 있습니다.
Figma의 컴포넌트 기능은 디자인 시스템을 구축하고 협업하는 데 큰 도움을 주며, 특히 대규모 프로젝트에서 효율적인 디자인 작업을 가능하게 합니다.
장점
재사용성: 한 번 디자인한 컴포넌트를 다른 곳에서 간편하게 재사용할 수 있습니다. 수정하거나 업데이트할 때에도 모든 인스턴스에 일괄적으로 적용됩니다.
일관성: 컴포넌트를 사용하여 디자인 요소들을 일관성 있게 유지할 수 있습니다. 따라서 디자인 시스템을 구축하는 데 매우 유용합니다.
효율성: 컴포넌트를 사용하면 디자인 작업이 훨씬 빨라집니다. 동일한 디자인 요소를 반복해서 디자인하지 않아도 되기 때문입니다.
업데이트 관리: 컴포넌트를 수정하면 해당 컴포넌트를 사용한 모든 인스턴스에 변경 사항이 적용되므로 디자인의 업데이트가 간편하게 이루어집니다.
인스턴스(Instance)
컴포넌트를 설계할 때, 해당 컴포넌트를 여러 번 재사용할 수 있도록 만들 수 있습니다. 이때 각각의 재사용된 사본을 인스턴스라고 합니다.
마스터 컴포넌트 : 원본, 인스턴스 : 사본
인스턴스 수정 가능 : 오토레이아웃, 투명도, 텍스트, 색상, 선, 그림자효과
인스턴스 수정 불가능 : 레이어정렬, 위치, 크기, 컨스트레인트
- 마스터와 인스턴스의 종속관계
- 마스터안에 오브젝트 가능
- 마스터 안에 인스턴스 가능
- 인스턴스 안에 인스턴스 가능
- 마스터 안에 마스터 불가능
- 인스턴스 안에 마스터 불가능
# 인스턴스
2. 컴포넌트 등록
순서
- 컴포넌트 만들기
- 여러 개 오브젝트를 컴포넌트 만들기
- 인스턴스 만들기
- 컴포넌트 연결 해제
- 마스터 컴포넌트 지웠을 경우 꺼내오기
- 인스턴스 폴더를 구분하기
- 마스터 컴포넌트에서 텍스트 수정하기
- 인스턴스를 마스크터 컴포넌트로 교체하기
| 참고 | 사이트 |
| material components | 바로가기 |
1. 컴포넌트 만들기
1) 객체 선택, 상단 중앙 컴포넌트 아이콘 클릭
2) 객체 오른쪽 클릭> Create component
Local components : 해당 파일에서 생성된 컴포넌트
2. 마스터 여러 개를 한 번에 컴포넌트 만들기
다중 컴포넌트 옵션은 객체 2개 이상 선택하고, 컴포넌트 아이콘 옆 화살표를 클릭
Create multiple components 선택
그룹이름 : [ ctrl ] + [ R ]
여러개의 컴포넌트를 만들고 [ ctrl ] + [ R ]
여러개를 그룹으로 설정하기
스왑 인스턴스 ( Swap instance )
해당 인스턴스를 다른 인스턴스로 교체
2. 인스턴스 만들기
1) 객체 선택 => alt 드래그 앤 드롭
2) 객체 선택 => Ctrl + C, Ctrl + V (제자리 복사)
3) Asset 탭 켜고 드래그 앤 드롭
3. 컴포넌트 연결을 해제하여 일반 객체로 만들기
인스턴스를 디테치 하기
인스턴스 객체 오른쪽 클릭> Detach instance 클릭
단축키 : [ CTRL ] + [ ALT ] + [ B ]
변경 후 다시 컴포넌트 만들기 가능
4. 컴포넌트 마스터 해제하기
- 원본 컴포넌트는 해제하는 기능이 존재하지 않는다
- 원본 마스터 컴포너트 선택 - Detach component 플러그인 사용
5. 마스터 컴포넌트 지웠을 경우 꺼내오기
인스턴스 마우스 오른쪽 클릭-> Main component > Restore main component
6. 인스턴스 폴더를 구분하기
- 컴포넌트 설정 : 레이어명에 ‘/’를 사용하면 폴더로 구분
ex) icons/home , icons/login , icons/menu
7. 마스터 컴포넌트에서 텍스트 수정하기
8. 인스턴스를 마스터 컴포넌트로 교체하기
인스턴스 선택 - 마우스 오른쪽 Push changes to main component 클릭하면 인스턴스가 마스터 컴포넌트로 교체된다
# 인스턴스
# 컴포넌트명
- 카멜 케이스 (Camel Case)
- 첫 단어는 소문자, 두 번째 단어부터는 대문자로 시작
- 예시: iconMenu
- 케밥 케이스 (Kebab Case)
- 모든 단어를 소문자로 표기하고, 단어와 단어 사이에 -를 사용하여 연결
- 예시: icon-menu
- 파스칼 케이스 (Pascal Case)
- 각 단어의 첫 글자를 대문자로 표기
- 예시: IconMenu
- 스네이크 케이스 (Snake Case)
- 모든 단어를 소문자로 표기하고, 단어와 단어 사이에 _를 사용하여 연결
- 예시: icon_menu
# 컴포넌트 관리 : 하나의 페이지에 정리
'figma' 카테고리의 다른 글
| [ figma ] 12. prototype 프로토타입 구조와 예시 (1) | 2023.12.25 |
|---|---|
| [ figma ] 15. 베리어블 사용하기 (0) | 2023.12.22 |
| [ figma ] 06. 이미지 누끼 플러그인 Remove BG (0) | 2023.07.27 |
| [ figma ] 05. 이미지 가져오기, 보정과 속성, 이펙트, 마스크 (4) | 2023.07.27 |
| [ figma ] 04. 그룹 프레임 섹션, 펜툴, Boolean operations ( 패스파인더 ), 텍스트 (0) | 2023.07.26 |