본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Framer에서 컴포넌트 공유하기

Framer에서 동일한 UI 요소를 반복해서 만들 필요 없이, 컴포넌트를 라이브러리에 공유해 여러 프로젝트에서 쉽게 재사용할 수 있습니다. 팀 단위 작업이 많거나 디자인 시스템을 운영 중이라면 이 기능이 큰 장점이 될 수 있는데요. 컴포넌트를 효율적으로 공유/삽입/업데이트 및 가져오는 방법을 아래 단계별로 설명드릴게요.

1. 컴포넌트를 라이브러리에 추가하기

한 프로젝트에서 만든 컴포넌트를 워크스페이스의 모든 프로젝트에서 재사용하고 싶다면 라이브러리에 추가할 수 있습니다.

라이브러리에 추가하는 방법

1. Assets 패널을 엽니다.

2. 컴포넌트 이름 옆의 더보기···아이콘을 클릭합니다.

3. 나타나는 드롭다운에서 Library > Add를 선택합니다.

2. 컴포넌트 삽입하기

라이브러리에 추가된 컴포넌트는 워크스페이스 내 모든 프로젝트에서 사용할 수 있으며, 이름으로 특정 컴포넌트를 검색할 수 있습니다.

라이브러리에서 컴포넌트 찾기

1. ⌘ K (Windows는 Ctrl + K) 를 눌러 Quick Actions 창을 열어주세요.

2. Browse Library 를 선택해주세요.

이때 검색창 위에는 현재 보고 있는 워크스페이스 이름 배지가 표시됩니다. 화살표 키로 이동하고 Enter를 눌러 캔버스에 컴포넌트를 삽입할 수 있습니다.

3. 컴포넌트 업데이트하기

원본(Primary) 컴포넌트를 수정하면, 해당 컴포넌트의 인스턴스를 사용 중인 모든 프로젝트에서 최신 버전을 불러올 수 있으며 수동으로 다시 게시할 필요가 없습니다. Assets 패널에서 “Update” 버튼을 클릭하면, 개별 컴포넌트에 변경사항이 적용됩니다. 필요하다면 업데이트를 취소 할 수도 있습니다.

Note: 컴포넌트 변경사항 일괄 적용은 컴포넌트의 인스턴스를 Detach 하지 않은 경우에만 해당되니 참고해주세요.

4. URL로 컴포넌트 추가하기 (Copy URL)

1. Assets 패널에서 컴포넌트의 더보기···아이콘을 클릭해주세요.

2. “Copy URL”을 선택해주세요.

3. 복사한 URL을 새 프로젝트 캔버스에 그대로 붙여넣어주세요.

컴포넌트를 캔버스에서 더블 클릭해 수정하려고 하면 “Unlink Instance”를 묻는 팝업이 나타나며, 연결을 해제하면 해당 컴포넌트가 에셋 라이브러리에 추가됩니다.

5. 코드 컴포넌트 또는 React 프로젝트에서 컴포넌트 가져오기

Framer에서 만든 컴포넌트는 Framer 외부의 React 환경에서도 사용할 수 있습니다.

사용 방법

1. 컴포넌트의 더보기··· 메뉴에서 “Copy Import”를 선택해주세요.

2. 복사된 import 문을 React 코드에 붙여넣어주세요.

예를 들어 Framer에서 버튼을 디자인하고 특정 조건(예: URL 매개변수 또는 사용자 위치)에서만 나타나도록 하려면 "Copy Import" 옵션을 사용하여 React 코드에 해당 버튼을 포함시켜보세요. 컴포넌트의 메인 함수 앞에 배치하거나, 오버라이드하여 버튼의 동작을 사용자 지정할 수 있습니다.

이러한 단계를 수행한 후에도 문제가 지속되면 Framer의 연락처 페이지를 통해 문의해 주시기 바랍니다.

자주 묻는 질문(FAQ)

Q. 워크스페이스 관리자만 라이브러리 컴포넌트를 수정할 수 있나요?

• 네. 워크스페이스에서 Edit 권한이 있어야 수정 및 업데이트가 가능하며, Viewer는 불가합니다.

Q. 인스턴스를 Detach하면 변경사항 업데이트를 전혀 할 수 없나요?

• 네. Detach된 인스턴스는 원본 컴포넌트와의 연결이 완전히 끊긴 개별적인 요소로 존재하기 때문에, 더 이상 업데이트에 영향을 받지 않습니다.

Q. 컴포넌트를 공유할 때 컴포넌트에 연결된 CMS 데이터도 함께 공유되나요?

• 아닙니다. CMS는 프로젝트 단위이며, 컴포넌트 단위로 공유되지 않기 때문에 공유 시 CMS 데이터는 함께 공유되지 않습니다.

본 글은 Framer 공식 블로그의 ‘Sharing Components’를 번역·각색한 콘텐츠입니다.