컴포넌트 라이브러리 가져오기

Pixso는 Sketch와 Figma의 컴포넌트 라이브러리를 가져올 수 있습니다. 두 플랫폼에서 만든 라이브러리와 해당 컴포넌트를 사용하는 디자인 파일을 함께 가져오면, 디자인 파일의 인스턴스와 라이브러리 사이의 연결을 유지할 수 있습니다. 라이브러리가 업데이트되면 가져온 파일에서도 변경 내용을 확인하고 적용할 수 있습니다.

1. Sketch 리소스 가져오기

1.1 시작하기 전 준비

1. 작업 공간에서 컴포넌트 라이브러리 가져오기를 누릅니다.

2. 라이브러리를 가져올 팀을 선택합니다. 리소스 연결을 유지하려면 올바른 팀을 선택해야 합니다. 다음 사항을 확인하세요.

• 가져온 컴포넌트 라이브러리는 선택한 팀에서만 사용할 수 있습니다. 디자인 파일도 같은 팀으로 가져와야 합니다.
• 같은 팀에 동일 라이브러리의 여러 브랜치 파일이나 복사본을 중복으로 가져오지 마세요. 현재 사용 중인 버전인지 확인하세요.
• 팀 라이브러리는 팀 관리자만 가져올 수 있습니다. 디자인 파일을 올릴 때 필요한 라이브러리가 없다면 관리자에게 문의하세요.
• 라이브러리와 디자인 파일을 가져오는 순서는 정해져 있지 않습니다.

1.2 Sketch 컴포넌트 라이브러리 가져오기

팀 관리자는 다음 순서로 라이브러리를 올릴 수 있습니다.

1. 가져오기 창에서 대상 팀을 확인한 뒤 Sketch 컴포넌트 라이브러리를 선택하고 파일을 지정합니다. 여러 파일을 한 번에 가져올 수도 있습니다.

2. 가져온 라이브러리는 팀 리소스 라이브러리로 자동 게시됩니다. 같은 팀에 있는 Sketch 디자인 파일 중 해당 컴포넌트를 사용하는 파일과 연결됩니다.

참고: 같은 팀에 여러 브랜치나 복사본을 중복으로 올리지 마세요. 동일한 파일이 있으면 다음 작업을 선택할 수 있는 안내가 표시됩니다.

1.3 Sketch 디자인 파일 가져오기

팀의 편집자는 Sketch 디자인 파일을 가져올 수 있습니다. 라이브러리와 연결하려면 다음과 같이 진행합니다.

1. Sketch 디자인 파일을 선택하고 가져올 파일을 지정합니다.

2. 팀에 연결 가능한 Sketch 라이브러리가 있다면 가져온 파일을 열고 인스턴스를 선택합니다. 메인 컴포넌트로 이동을 누르면 해당 라이브러리가 열립니다. 라이브러리를 열려면 접근 권한이 있어야 합니다.

3. 라이브러리 파일이 업데이트되면 오른쪽 아래에 알림이 표시됩니다.

4. 보기를 눌러 변경 내용을 확인한 뒤 업데이트를 눌러 적용합니다.

2. Figma 리소스 가져오기

2.1 내보내기 확장 프로그램 준비

1. Google Chrome에서 내보내기 확장 프로그램을 설치합니다. 확장 프로그램 다운로드

2. 브라우저 오른쪽 위의 점 세 개 메뉴를 누릅니다.

확장 프로그램에서 확장 프로그램 관리를 선택합니다. 새 페이지 오른쪽 위에서 개발자 모드를 켭니다.

내려받은 확장 프로그램 ZIP 파일을 해당 페이지로 끌어다 놓습니다.

3. 아래와 같은 확장 프로그램 카드가 표시되면 설치가 완료된 것입니다.

참고: 설치 후에는 Figma 파일을 새로고침하거나 다시 연 다음 내보내기를 실행하세요.

2.2 가져오기 시작

1. Pixso 작업 공간 오른쪽 위에서 컴포넌트 라이브러리 가져오기를 누르고 Figma 탭으로 전환합니다. 먼저 Figma에서 라이브러리와 디자인 파일을 내려받아야 합니다.

참고: Figma 컴포넌트 라이브러리는 Figma에서 팀 라이브러리로 게시한 파일을 말하며, 클라우드 컴포넌트와 스타일이 포함됩니다. 디자인 파일은 팀 리소스를 사용한 파일입니다. 메인 컴포넌트와 인스턴스가 함께 들어 있는 파일은 컴포넌트 라이브러리 항목으로 가져오세요.

2. 가져오기 전에 다음 사항을 확인합니다.

• 라이브러리를 가져올 팀을 올바르게 선택합니다. 팀이 같아야 리소스를 연결할 수 있습니다.
• 팀 라이브러리는 팀 관리자만 가져올 수 있습니다.
• 라이브러리에 스타일이 포함되어 있어야 합니다. 스타일이 없으면 가져온 라이브러리와 인스턴스의 연결이 유지되지 않을 수 있으므로 스타일을 만들어 두는 것이 좋습니다.
• Pixso는 파일 중복 여부를 확인합니다. 같은 팀에 동일한 파일이 있으면 건너뛰거나 덮어쓰도록 안내합니다.

2.3 Figma 컴포넌트 라이브러리 가져오기

팀 관리자는 파일을 끌어다 놓거나 선택한 뒤 안내에 따라 라이브러리를 가져올 수 있습니다.

가져온 라이브러리는 팀 리소스 라이브러리로 게시되며, 같은 팀에서 해당 컴포넌트를 사용하는 Figma 디자인 파일과 연결됩니다.

2.4 Figma 디자인 파일 가져오기

팀의 편집자는 Figma 디자인 파일을 가져올 수 있습니다.

1. Figma 디자인 파일을 선택하고 대상 파일을 지정합니다.

2. 팀에 연결 가능한 Figma 라이브러리가 있다면 가져온 파일에서 인스턴스를 선택하고 메인 컴포넌트로 이동을 누릅니다. 접근 권한이 있는 경우 해당 라이브러리가 열립니다.

3. 라이브러리 파일이 업데이트되면 오른쪽 아래에 알림이 표시됩니다.

4. 보기로 변경 내용을 확인하고 업데이트를 눌러 적용합니다.