> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/plugin-figma-to-qshop.md).

# 큐샵 피그마 플러그인 활용

큐샵 피그마(Figma) 플러그인을 사용하면 피그마에서 만든 프레임(Frame)을 큐샵 페이지로 변환할 수 있습니다. 변환한 페이지는 스튜디오 에디터에서 수정하거나 다른 페이지로 복사해 사용할 수 있습니다.

프레임 안의 레이어와 오토레이아웃 규칙은 큐샵의 스택 구조로 변환되어 큐샵 디자인 에디터에서 추가 작업이 가능해집니다. 단, 입력폼, 상품 리스트, 게시판 등 데이터(DB)와 관리자 기능과 연결되는 요소는 변환 후 별도로 설정이 필요합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F5OWMA7bjlIhI4inym95b%2F000.gif?alt=media&amp;token=bf8a8ced-2d68-4387-a278-f75b75102fdd" alt=""><figcaption></figcaption></figure>

***

### 시작에 앞서

큐샵 피그마 플러그인을 사용하기 앞서 다음의 조건을 확인해 주세요.

1. **큐샵 사이트 생성**: 큐샵에 회원으로 가입되어 있고 사이트가 생성되어 있어야 합니다.
2. **에디터 지원 유형**: **스튜디오 에디터**로 생성된 사이트만 사용할 수 있습니다.
3. **사이트 편집 권한**: 로그인한 계정에 해당 사이트에 대한 편집 권한이 있어야 합니다.
4. **변환 대상**: 가져올 내용을 피그마 프레임 안에 넣고, **프레임 전체를 선택**해야 합니다.
   * 변환할 내용을 하나의 프레임 안에 모은 다음, 해당 프레임 전체를 선택해 주세요. (여러 프레임에 있는 레이어를 부분적으로 선택하면 변환할 수 없습니다.)
   * 콘텐츠가 많다면 여러 프레임으로 나누고, 각 프레임을 개별적으로 변환해 주세요. 레이어가 복잡하게 중첩되어 있거나 콘텐츠가 지나치게 많으면 프레임 용량 제한으로 변환이 중단될 수 있습니다.
   * 오토레이아웃 기반의 반응형 구조로 디자인하면 더 매끄럽게 변환할 수 있습니다.

{% hint style="info" %}
**도움말**: 아직 사이트가 없다면 큐샵에서 스튜디오 에디터로 새 사이트를 만든 후 진행해 주세요. [큐샵 바로가기](https://qshop.ai/)
{% endhint %}

***

### 1단계: 플러그인 설치하기

1. [큐샵 피그마 플러그인 페이지](https://www.figma.com/community/plugin/1674351027848934209/qshop-ai-figma-to-website)에 접속합니다.
2. **Qshop AI - Figma to Website** 플러그인을 찾아 설치합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FUIJca5hr7wD4xwGruPyD%2F001.png?alt=media&amp;token=bbcb8893-d660-430a-b717-0b50abde0306" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**도움말**: 피그마에서 직접 찾으려면 캔버스에 **마우스 포인터**를 올리고, **오른쪽 버튼**을 클릭 후 **\[플러그인 → 플러그인 관리]**&#xB85C; 이동해 'Qshop AI’를 검색/설치할 수 있어요.
{% endhint %}

***

### 2단계: 피그마 디자인 파일을 열고 플러그인 열기

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FONpGc1pabcwlsR2cHJph%2F002.png?alt=media&amp;token=23cd3649-1654-4c6a-8286-d2e4d7a1bb95" alt=""><figcaption></figcaption></figure>

1. 피그마에서 미리 작업해둔 **디자인 파일**을 열어주세요.
2. 빈 캔버스에 **마우스 포인터**를 올리고, **마우스 오른쪽 버튼**을 클릭합니다.
3. **\[플러그인 > 플러그인 관리]**&#xB97C; 클릭 후 **Qshop AI - Figma to Website** 플러그인을 열어줍니다.\
   **도움말**: 최근 항목에 큐샵 피그마 플러그인이 표시될 수 있습니다. 해당 항목을 클릭해 열 수도 있습니다.

***

### 3단계: 플러그인을 큐샵 계정 연결하기

1. 플러그인 창이 켜지면 **연결** 버튼을 클릭합니다.\
   ![](https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJbpdJEATSJsNv7EQCW8j%2F003.png?alt=media\&token=538745c5-da70-4ef9-8fd9-ea6030264514)
2. 큐샵 계정 연결이 완료되면 **시작하기** 버튼을 클릭합니다.\
   ![](https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fc3AmQP3rugo0T0ICluBJ%2F004.png?alt=media\&token=a2c3afb2-634e-49f0-9d51-297c83bb0324)
3. 플러그인이 열리면 상단에 위치한 **사이트 선택**을 누르고, 디자인을 변환할 **사이트를 선택**합니다.\
   **도움말**: 큐샵 피그마 플러그인은 '스튜디오 에디터'에서만 동작합니다.\
   ![](https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FKtRufQEaXfHTskEQMr21%2F005.png?alt=media\&token=2370215d-906e-448a-b373-603ddd3eb4ee)
4. 플러그인이 열린 상태에서 아래 이미지를 참고하여 프레임을 선택 후 변환을 시작합니다.
   1. 피그마 레이어에 **변환할 프레임을 선택**합니다.\
      **도움말**: 모든 디자인 요소가 포함된 전체 프레임을 선택해야 합니다.
   2. 큐샵 피그마 플러그인에 **선택된 프레임이 표시**됩니다.
   3. 레이어 목에 선택된 프레임이 표시되면 **큐샵으로 변환하기** 버튼을 클릭해 주세요.

      <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F5PgxIpJJKH0n32DlJbHK%2F006.png?alt=media&amp;token=35643cea-b9ba-4794-8590-b2d5948a1e46" alt=""><figcaption></figcaption></figure>

***

### 4단계: 스타일 적용 방식 선택하기

피그마 디자인을 큐샵으로 변환하는 과정에서 적용할 스타일을 선택할 수 있습니다. 옵션은 두 가지입니다.

<div align="left"><figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FS54OScYrOUoYAflMnikL%2F007.png?alt=media&amp;token=b71f1fa8-22f6-42ca-9efe-b8791b289f68" alt=""><figcaption></figcaption></figure></div>

1. **큐샵 스타일 유지**: 큐샵 사이트 테마에 따라 변환합니다. 기존 큐샵 헤더·푸터를 사용하며, 감지된 피그마의 헤더·푸터는 제거됩니다. 또한, 기존 큐샵 사이트 적용된 텍스트, 색상 스타일이 큐샵에 적용된 스타일로&#x20;
2. **Figma 스타일 적용**: 피그마에 적용된 스타일을 유지합니다. 다른 큐샵 페이지에는 영향을 주지 않습니다.

기존 사이트의 테마에 맞추려면 **큐샵 스타일 유지**를 선택하세요. 피그마의 색상 등 스타일과 피그마에 포함된 헤더·푸터를 유지하려면 **Figma 스타일 적용**을 선택하는 걸 추천합니다.

***

### 5단계: 변환된 페이지 확인하기

1. 변환이 완료되면 선택한 사이트의 스튜디오 에디터를 열어 주세요.
2. 변환 결과는 **Figma Import Page**라는 새로운 페이지로 추가됩니다. 해당 페이지에서 디자인을 이어서 수정할 수 있으며, 페이지 안의 콘텐츠를 다른 페이지로 복사·붙여넣기 할 수도 있습니다.<br>

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FxkXEucw3V45NleHps3T2%2F008.png?alt=media&amp;token=7ff79463-d633-40e2-a959-9fc6057c055e" alt=""><figcaption></figcaption></figure>

***

### 6단계: 관리자 기능과 버튼 링크 설정하기

피그마의 디자인을 변환해도 큐샵 관리자 기능에 자동으로 연결되지는 않습니다. 다음 요소를 페이지에 이용 중이라면 큐샵으로 변환 후 스튜디오 에디터에서 직접 추가하거나 설정해 주세요.

<table><thead><tr><th width="140.3671875">요소</th><th>변환 후 설정할 내용</th><th>별도 설정이 필요한 이유</th></tr></thead><tbody><tr><td><strong>입력폼</strong></td><td>해당 위치에 큐샵 입력폼을 추가하고 필요한 항목을 설정합니다.</td><td>방문자가 입력한 데이터를 큐샵 관리자의 입력폼 관리로 전달해야 합니다.</td></tr><tr><td><strong>상품 리스트</strong></td><td>큐샵 상품 리스트 기능을 추가하고 표시할 상품을 연결합니다.</td><td>상품명, 가격, 재고 등 실제 상품 관리 데이터와 연동해야 합니다.</td></tr><tr><td><strong>게시판</strong></td><td>큐샵 게시판 기능을 추가하고 사용할 게시판을 설정합니다.</td><td>게시글을 등록하고 큐샵 관리자에서 관리할 수 있도록 연결해야 합니다.</td></tr><tr><td><strong>버튼 링크</strong></td><td>버튼에 실제 이동할 링크를 설정합니다.</td><td>버튼 디자인만으로는 원하는 페이지나 주소로 이동하도록 설정되지 않을 수 있습니다.</td></tr></tbody></table>

***

### 문제 해결하기

<details>

<summary><strong>Q. 원하는 사이트가 목록에 표시되지 않아요</strong></summary>

로그인한 큐샵 계정에 해당 사이트의 편집 권한이 있는지 확인해 주세요. 편집 권한이 없는 사이트는 선택 목록에서 제외됩니다.

</details>

<details>

<summary><strong>Q. 페이지 생성에 개수 제한이 있나요?</strong></summary>

요금제 플랜에 따라 다릅니다. Free 플랜에서는 10 페이지까지만 가능하지만, Starter 플랜 이상 유료 요금제에서는 제한이 없습니다.

</details>

<details>

<summary><strong>Q. 사이트가 표시되지만 선택할 수 없어요</strong></summary>

스튜디오 에디터로 만든 사이트인지 확인해 주세요. 클래식 에디터 사이트는 목록에 표시되더라도 선택할 수 없습니다.

</details>

<details>

<summary><strong>Q. 선택한 디자인을 변환할 수 없어요</strong></summary>

여러 프레임의 레이어를 부분적으로 선택하지 않았는지 확인해 주세요. 변환할 내용을 하나의 프레임 안에 모은 후 프레임 전체를 선택해야 합니다.

</details>

<details>

<summary><strong>Q. “프레임이 너무 커서 변환할 수 없습니다”라는 메시지가 표시돼요</strong></summary>

안정적인 변환을 위한 프레임 용량 제한을 초과한 경우입니다. 복잡한 레이어 구조나 많은 콘텐츠가 원인일 수 있습니다. 프레임을 여러 개로 나눈 후 각각 다시 변환해 주세요.

</details>

<details>

<summary><strong>Q. 변환이 실패했어요</strong></summary>

**처음부터 다시 시도하기** 버튼을 클릭해 주세요. 이전에 선택한 프레임과 사이트 정보가 유지된 상태에서 다시 시도할 수 있습니다.

</details>