컴포넌트 인스턴스 생성 및 삽입 – Figma Learn - 도움말 센터

이 기능을 사용할 수 있는 사람

모든 요금제에서 사용 가능

유료 팀의 파일에 대한 편집 가능 액세스 권한이 있는 사용자는 누구나 컴포넌트 플레이그라운드에 접근할 수 있습니다

파일에 대한 열람 가능 액세스 권한이 있는 사람은 누구나 해당 라이브러리의 컴포넌트를 사용할 수 있습니다

컴포넌트는 디자인 전반에서 재사용할 수 있는 UI 요소입니다.

다음과 같은 몇 가지 방법으로 디자인에 컴포넌트 인스턴스를 생성하고 삽입할 수 있습니다.

팁: Dev Mode에서 인스턴스를 ready for dev로 표시하면 → 파일을 재구성하지 않고 컴포넌트 인스턴스를 개발 단계로 넘길 수 있습니다.

에셋 패널

왼쪽 사이드바의 에셋 패널을 통해 파일에 추가할 컴포넌트를 검색할 수 있습니다. 에셋 패널 에서 사용할 수 있는 라이브러리를 선택할 수 있습니다.

에셋 패널 열기:

왼쪽 사이드바에서 에셋 탭을 선택하거나 바로가기를 사용합니다.
- Mac: ⌥ Option 2
- Windows: Alt 2
사용하려는 컴포넌트가 있는 라이브러리를 선택합니다.
사용하려는 컴포넌트를 찾습니다.
컴포넌트를 클릭하고 캔버스로 드래그하여 해당 컴포넌트의 인스턴스를 생성합니다.

팁: 에셋 탭의 표시 형식을 원하는 대로 사용자 지정할 수 있습니다. 을(를) 클릭하여 그리드 또는 목록 보기를 전환하고 하위 폴더를 표시하거나 숨기세요.

참고: 필요한 라이브러리가 에셋 패널에 없나요? 을 클릭하여 팀 또는 오거니제이션 내에서 사용 가능한 라이브러리를 탐색하고 파일에 추가하세요.

컴포넌트 세부 정보 모달은 다음을 표시합니다.

유료 팀의 라이브러리에 대한 편집 가능 액세스 권한이 있는 경우 추가로 컴포넌트 플레이그라운드에 접근할 수 있습니다.

컴포넌트 플레이그라운드에서, 다음을 수행할 수 있습니다.

빠른 삽입을 이용하여 키보드에서 컴포넌트 인스턴스를 삽입할 수 있습니다. 빠른 삽입은 파일에 추가된 라이브러리의 컴포넌트를 찾아볼 수 있는 작업 메뉴를 엽니다.

팁: 인스턴스 중 하나에서 메인 컴포넌트를 찾아야 하나요? 아무 인스턴스나 마우스 오른쪽 클릭하고 메인 컴포넌트로 이동을 선택하거나 키보드 바로가기를 사용하세요.

같은 파일에서 작업 중인 경우 컴포넌트를 복제하여 인스턴스를 생성할 수 있습니다. 키보드 바로가기를 사용하여 복제:

동일한 파일 내에서 컴포넌트를 드래그하여 복사할 수도 있습니다.

동일한 파일 내에서 모든 컴포넌트를 복사 및 붙여넣어서 인스턴스를 생성할 수 있습니다.

컴포넌트 인스턴스와 게시된 메인 컴포넌트는 파일 간에 복사하여 붙여넣을 수 있습니다.