ch04_컴포넌트의 활용

학습목표
- component와 에셋의 개념을 이해하고 활용 할 수 있다.

Ctrl + C  & V 만 계속 할 수 없쟎아

Component

디자인에서 자주 반복되는 UI 요소를 일관되게 재사용할 수 있도록 만든 디자인 모듈을 말한다. 피그마에서 컴포넌트를 사용하면 디자인의 일관성을 유지하면서도 효율적으로 작업을 관리할 수 있다.

컴포넌트의 특징과 장점

1. 재사용 가능:
   • 컴포넌트는 한 번 만들어 두면 다양한 화면이나 페이지에서 반복적으로 사용할 수 있다.
   • 예를 들어, 버튼, 카드, 헤더, 아이콘 등이 컴포넌트로 만들어지면 여러 곳에서 같은 스타일로 재사용할 수 있다.
2. 일관성 유지:
   • 컴포넌트를 사용하면 디자인 전체에 걸쳐 일관된 스타일과 구조를 유지할 수 있다.
   • 예를 들어, 버튼 컴포넌트를 업데이트하면 이 컴포넌트를 사용한 모든 화면에 자동으로 변경 사항이 반영된다.
3. 빠른 수정 및 관리:
   • 컴포넌트를 수정하면 해당 컴포넌트를 사용한 모든 인스턴스에 변경 사항이 반영되므로, 디자인 수정이 훨씬 간편하고 빠르다.
   • 이를 통해 대규모 프로젝트에서도 디자인 유지보수가 용이해진다.
4. 인스턴스 사용:
   • 컴포넌트의 인스턴스(Instance)는 컴포넌트를 복제한 개별 요소로, 인스턴스는 원본 컴포넌트와 연결되어 있다.
   • 인스턴스에서는 일부 속성을 개별적으로 수정할 수 있지만, 기본 구조는 컴포넌트 원본을 따르므로 일관성을 유지할 수 있다.
5. 변형과 상태 관리:
   • 버튼의 다양한 상태(예: 기본, 마우스 오버, 클릭됨)를 각각의 컴포넌트 변형으로 만들어 관리할 수 있다.
   • 상태별로 컴포넌트를 만들면 인터랙션 디자인이 간편해지고, 프로토타입에서 각 상태를 손쉽게 확인할 수 있다.

컴포넌트의 예시

• 버튼: 클릭 가능한 버튼 디자인을 컴포넌트로 만들어, 페이지 여러 곳에서 동일한 버튼을 일관되게 사용할 수 있다.
• 카드 레이아웃: 제품이나 게시물의 정보를 보여주는 카드 레이아웃을 컴포넌트로 만들어, 다양한 곳에 재사용할 수 있다.
• 내비게이션 바: 웹사이트의 헤더나 메뉴를 컴포넌트로 만들어, 여러 페이지에서 일관된 내비게이션을 제공할 수 있다.

---

컴포턴트 생성 : ctrl + alt + K

연습 : card를 만들어 보자.

 

---

대량으로 구성 요소 생성

대량으로 구성 요소를 만들 수 있습니다. 이를 통해 여러 그룹이나 프레임을 선택하고 그 중에서 구성 요소를 만들 수 있습니다. 다음에서 여러 구성 요소를 만듭니다.

• 프레임 내의 객체와 레이어
• 그룹의 객체 및 레이어
• 경로 또는 벡터 네트워크와 같은 단일 레이어
• 부울 연산의 레이어

1. 구성요소를 생성하려는 레이어를 선택하세요.
2. 딸깍 하는 소리 [''']속성 패널에서 선택 항목 이름 옆에 있는
3. 옵션에서 여러 개의 구성 요소 만들기를 선택합니다 .
4. Figma는 각 프레임, 그룹, 부울 연산 또는 경로에 대한 컴포넌트를 생성합니다.

구성 요소 삭제

언제든지 구성 요소를 삭제할 수 있습니다.

주요 구성 요소를 삭제해도 해당 구성 요소의 인스턴스는 파일에서 제거되지 않습니다.

1. 삭제하려는 구성 요소를 선택하세요.
2. 누르다 delete.

구성 요소 복원

삭제된 구성 요소의 기존 인스턴스가 있는 경우 해당 인스턴스를 사용하여 구성 요소를 복원할 수 있습니다.

디자인에 구성 요소 인스턴스를 만들고 삽입하는 방법에는 여러 가지가 있습니다.

• 왼쪽 사이드바의 자산 패널 에서
• 자산 패널에서 접근 가능한 구성 요소 세부 정보 모달 에서
• 작업 메뉴 의 자산 탭 사용
• 인스턴스를 복사하거나 복제 하여

Asset Pannel

왼쪽 사이드바의 Assets 패널 을 사용하면 파일에 추가할 구성 요소를 검색할 수 있습니다. Assets 패널에서 사용할 수 있는 라이브러리를 선택할 수 있습니다.

자산 패널을 열려면:

1. 왼쪽 사이드바에서 자산 탭을 선택 하거나 바로가기를 사용하세요.
   • 맥 :⌥ Option 2
   • 윈도우: Alt 2
2. 사용하고 싶은 구성요소가 있는 라이브러리를 선택하세요
3. 사용하고 싶은 구성요소를 찾으세요
4. 구성 요소를 클릭하고 캔버스로 끌어서 해당 구성 요소의 인스턴스를 만듭니다.

---

연습 : 버튼 컴포넌트 만들기

 

1. 문자 작성하기
2. 프레임 생성 : ctrl + alt + G
3. 스타일링 : 가운데 정렬
4. 컴포넌트로 만들기: 완성된 디자인을 선택하고, 오른쪽 클릭 메뉴 또는 상단 메뉴에서 'Create Component' (컴포넌트 생성)를 선택하여 컴포넌트로 저장한다. ctrl + alt +K
5. 재사용 - 인스턴스 생성
   1. 에셋에서 가져오기
   2. 컴포넌트를 복사하기
6. 인스턴스 관련 메뉴
   1. push to main change  : 인스턴스 속성 변경 시 메인으로 PUSH
   2. reset : 변경 된 속성을 다시 컴포넌트로 리셋
   3. detach instance : 컴포넌트와의 연결 끊기, 다시 일반 프레임으로 변경 됨.
   4. 다른 인스턴스 변경 : 사이드바 > 인스턴스 제목 클릭 > swap instance 선택

---

연습 :대화형 버튼 디자인하기

1. 메인 버튼 컴포넌트를 만듭니다.
2. 버튼 변형을 만듭니다.
3. 프로토타입 상호작용을 추가하여 버튼 변형을 연결합니다.

메인 버튼 컴포넌트를 생성합니다

시작하려면 버튼 변형을 만드는 데 사용될 주요 구성 요소를 만들어야 합니다.

1. 도구 모음에서 텍스트 도구를 선택 하고 캔버스를 클릭한 후, .을 입력합니다 Save.
2. 텍스트 레이어를 선택하고 오른쪽 사이드바의 텍스트 섹션을 사용하여 글꼴 크기를 .으로 변경합니다 16. 이 튜토리얼에서는 기본 Inter 글꼴을 사용하지만 다른 글꼴을 선택해도 좋습니다.
3. 텍스트 레이어를 선택하고 키보드 단축키를 사용하여 Shift A자동 레이아웃 프레임으로 전환합니다.
4. 오른쪽 사이드바에서 수직 크기 조절 및 수평 크기 조절 설정이 모두 Hug 로 설정되어 있는지 확인하세요 .
5. 다음을 조정하여 프레임 스타일을 지정하세요.
   • 클릭하세요Stroke 섹션 에 추가  하고  가중치가 있는 내부 스트로크를  추가합니다  .2
   • 클릭하세요채우기 섹션 에서   채우기를 추가합니다.
   • 모서리 반경을 변경하세요8
   • 객체 사이의 수평 간격을 변경합니다.8
   • 수평 패딩을 변경하세요32
   • 수직 패딩을 변경하세요12

  Phosphor Icons 플러그인을 사용하여  두 개의 북마크 아이콘을 삽입합니다.

1. 딸깍 하는 소리 도구 모음의 작업 .
2. 플러그인 및 위젯 탭을 클릭하세요   .
3. 검색창에 "Phosphor"를 입력하세요.
4.  플러그인을 열려면 Phosphor Icons를 선택하세요  .
5. Phosphor Icons 플러그인에서 검색 필드에 "Bookmark"를 입력합니다.
6. “BookmarkSimple” 아이콘의 Regular  및  Fill 버전을 사용하려고 합니다   . 플러그인의 필터 옵션을 사용하여 두 버전을 모두 찾으세요.
7. 아이콘을 클릭하여 캔버스로 드래그하세요.

버튼에 맞는 아이콘 크기인지 확인해 보겠습니다.

1. 두 개의 아이콘 프레임을 선택하세요.
2. 확실하게 하다 오른쪽 사이드바에서 비율 제한이 활성화되고 프레임 너비가 변경됩니다 24.
3. 지금은 채워진 아이콘을 옆으로 옮길 수 있습니다. 일반 아이콘을 버튼 레이블 왼쪽의 버튼 프레임으로 드래그합니다. 이것은 자동 레이아웃 프레임이므로 프레임이 자동으로 아이콘에 맞게 조정됩니다.

버튼 프레임을 선택하고 클릭하세요 오른쪽 사이드바에 컴포넌트를 만듭니다 . 이것은 다른 버튼 변형을 만드는 데 사용할 주요 컴포넌트가 될 것입니다. 프레임 이름을 두 번 클릭하고 이름을 .으로 바꿉니다 button/default/unsaved.