> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstep과 Figma 간에 디자인 이동하기

> 모든 Flowstep 프레임을 복사-붙여넣기로 Figma에 복사하거나, Figma 프레임을 Flowstep으로 가져와 편집할 수 있습니다. 두 도구를 전환하지 않고도 작업합니다.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.04.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=0e31f66d221bc267a060704be409d9f2" alt="Screenshot 2026 05 06 At 14 19 04" width="1838" height="1266" data-path="images/Screenshot-2026-05-06-at-14.19.04.png" />
</Frame>

Flowstep은 이미 사용 중인 디자인 워크플로에 맞춰지도록 만들어졌습니다 — 이를 대체하려는 것이 아닙니다. Flowstep에서 디자인을 생성하고 간단한 복사-붙여넣기로 즉시 Figma에 가져오거나, 반대로 Figma 프레임을 Flowstep으로 가져올 수 있습니다. 이는 AI 기반 디자인 생성의 속도와 Figma에서 의존하는 정확도 및 협업 기능을 함께 제공합니다.

<Note>
  Flowstep과 Figma는 경쟁 도구가 아니라 상호 보완적입니다. Flowstep은 UI 디자인 아이디어를 빠르게 생성하고 탐색하는 데 도움이 되고, Figma는 정제하고, 협업하고, 프로덕션 준비 작업을 구축하는 곳입니다. 둘을 함께 사용하면 최고의 이점을 얻을 수 있습니다.
</Note>

## Flowstep 디자인을 Figma로 복사하기

<Steps>
  <Step title="Flowstep에서 하나 이상의 화면 선택하기">
    화면을 클릭하여 선택합니다 — 또는 여러 화면을 선택하여 한 번에 모두 복사합니다. 캔버스에서 선택 항목이 강조 표시되어 있는지 확인합니다.
  </Step>

  <Step title="선택 항목 복사하기">
    Mac에서 **Cmd+⇧+C**를 누르거나 Windows에서 **Ctrl+⇧+C**를 누릅니다. Flowstep은 작업 중에 "Preparing your design — stay on this tab and keep the screen selected"를 표시합니다. 복사는 곧 완료됩니다.
  </Step>

  <Step title="Figma 파일에 붙여넣기">
    Figma로 전환하고 디자인을 배치하려는 파일을 엽니다. Mac에서 **Cmd+V**를 누르거나 Windows에서 **Ctrl+V**를 누릅니다. Flowstep 화면이 Figma 캔버스에 나타나고 편집할 준비가 됩니다.
  </Step>
</Steps>

<Note>
  Figma로 복사하기는 브라우저의 클립보드를 사용하므로 브라우저가 Flowstep 클립보드 액세스를 허용해야 합니다 — 권한 오류가 표시되면 브라우저 설정에서 클립보드 액세스를 허용하고 다시 시도합니다. 복사 중에 탭을 전환하면 전송이 중단되므로, 복사가 완료될 때까지 Flowstep 탭에 포커스를 두십시오.
</Note>

<Tip>
  Figma의 전용 "AI imports" 페이지에 프레임을 붙여넣어 작업 파일을 정리된 상태로 유지합니다. 거기에서 자신의 속도에 맞게 요소를 디자인 시스템 또는 구성 요소 라이브러리로 이동할 수 있습니다.
</Tip>

## Figma에서 디자인 가져오기

반대로 Figma 프레임을 Flowstep으로 편집 가능한 화면으로 가져올 수도 있습니다. 가져오기는 모든 사람이 사용 가능합니다 — Figma 계정을 한 번 연결한 다음 프레임 링크에서 가져옵니다.

<Steps>
  <Step title="Figma 연결하기">
    설정에서 Figma 계정을 Flowstep에 연결합니다. Flowstep은 Figma 권한을 사용하여 액세스 권한이 있는 파일을 읽습니다.
  </Step>

  <Step title="Figma에서 프레임 링크 복사하기">
    Figma에서 원하는 프레임을 마우스 오른쪽 클릭하고 **Copy link to selection**을 선택합니다. 페이지 링크를 복사하여 한 번에 모든 최상위 프레임을 가져올 수도 있습니다.
  </Step>

  <Step title="Flowstep으로 가져오기">
    Flowstep 도구 모음에서 Figma 가져오기 옵션을 사용하고 링크를 붙여넣습니다. Flowstep은 프레임을 캔버스의 편집 가능한 요소로 변환합니다. 동일한 프레임을 다시 가져오면 제자리에서 업데이트됩니다.
  </Step>
</Steps>

### 가져오는 항목

Flowstep은 Figma 프레임을 기본 편집 가능한 요소로 재생성합니다 — 평면 이미지가 아닙니다. 가져오기에는 다음이 포함됩니다.

* 프레임 및 중첩 레이어
* 텍스트(굵기, 색상, 굵게 등 문자당 스타일 포함)
* Figma 변수의 색상
* 이미지 채우기, SVG 아이콘 및 셰이프
* 드롭 및 내부 그림자, 레이어 및 배경 흐림
* 대시 및 점선 스트로크

<Note>
  파일의 조직에서 Figma를 연결해야 합니다. 프레임을 가져올 수 없는 경우 Flowstep은 다음에 수행할 작업을 알려주는 실행 가능한 메시지를 표시합니다 — 예를 들어, 권한이 만료된 경우 Figma를 다시 연결하거나, Figma가 속도 제한을 하거나 느린 경우 기다렸다가 다시 시도하거나, Community 템플릿의 경우 먼저 팀으로 복제한 다음 새 링크를 붙여넣습니다.
</Note>