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

# Replit Design으로 Figma 디자인 가져오기

> Figma 프레임을 Replit Design으로 가져와 제안과 채팅으로 다듬고 대화형 앱으로 빌드하세요.

⏰ *예상 시간: 15분*

Figma 디자인은 경험이 어떻게 보여야 하는지 보여줍니다. Replit Design은 Figma 프레임을 탐색하고 다듬고 대화형 앱으로 빌드할 수 있는 디자인 프레임으로 변환합니다.

예제로 Figma Community의 [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411)을 사용합니다.

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-import-result.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=5def987784c7ec7b20e07c1c5bc422d0" alt="Replit Design의 디자인 프레임으로 가져온 Personal Fitness Trainer 랜딩 페이지, 채팅 패널에 실행 완료로 표시됨" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-import-result.webp" />
</Frame>

## 시작하기 전에

다음이 필요합니다:

* [Replit 계정](https://replit.com).
* 가져오려는 파일이나 위 예제 파일이 있는 [Figma](https://www.figma.com) 계정.

## Figma 프레임 가져오기

프레임을 Replit Design으로 가져와 Agent가 동작하는 디자인으로 만들도록 하세요.

<Steps>
  <Step title="Figma 프레임 링크 가져오기">
    직접 만든 Figma 파일을 사용하거나, 이 가이드의 예제인 Figma Community의 [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411)을 따라 해보세요.

    Figma에서 가져오려는 프레임을 마우스 오른쪽 버튼으로 클릭하고 **Copy/Paste as**를 선택한 다음 **Copy link to selection**을 선택하세요.

    <Frame caption="Figma에서 열린 Personal Fitness Trainer Template과 가져올 Cover 프레임.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-example-file.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=f33611aecd9b2d5be89aa1f571648f41" alt="Figma에서 열린 Personal Fitness Trainer Template — 레이어 패널과 캔버스에 Cover 프레임이 표시됨" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-example-file.webp" />
    </Frame>
  </Step>

  <Step title="Replit Design 열기">
    [replit.com/design](https://replit.com/design)으로 이동해 프롬프트 박스 아래에서 **Import Figma**를 선택하세요.

    <Frame caption="Replit Design 홈의 Import Figma: Figma 프레임을 가져오면 Agent가 동작하는 디자인으로 만들어줍니다.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/design-import-figma.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=fc26c263f135d7e07f96ae0fda91b7e8" alt="프롬프트 박스 아래에서 Import Figma 옵션이 선택된 Replit Design 홈 화면과 'Bring in a Figma frame and Agent will turn it into a working design'이라는 툴팁" width="2293" height="1322" data-path="images/fitstart/turn-mockup-into-app/design-import-figma.webp" />
    </Frame>
  </Step>

  <Step title="URL 붙여넣고 빌드 시작하기">
    **Import Figma design** 대화 상자에 프레임 URL을 붙여넣고 **Attach to prompt**를 선택하세요. 프레임이 프롬프트에 첨부되며, 제출하면 빌드가 시작됩니다.

    <Frame caption="프레임 URL이 붙여넣어져 프롬프트에 첨부할 준비가 된 Import Figma design 대화 상자.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/design-figma-url.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=a23e7d3006334164da7494a8dd76591e" alt="Replit Design의 Import Figma design 대화 상자 — 필드에 Figma 프레임 URL이 붙여넣어져 있고 Attach to prompt 버튼이 표시됨" width="2293" height="1440" data-path="images/fitstart/turn-mockup-into-app/design-figma-url.webp" />
    </Frame>
  </Step>
</Steps>

Agent가 프레임을 가져와 프로젝트의 디자인 프레임으로 다시 빌드합니다.

<Frame caption="Replit Design의 프레임으로 가져온 Personal Fitness Trainer 랜딩 페이지.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-import-result.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=5def987784c7ec7b20e07c1c5bc422d0" alt="Replit Design의 디자인 프레임으로 가져온 Personal Fitness Trainer 랜딩 페이지, 채팅 패널에 실행 완료로 표시됨" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-import-result.webp" />
</Frame>

## 내 것으로 만들기

가져온 프레임을 선택하고 형태를 바꿔보세요:

* **[제안](/ko/design/explore-suggestions)을 따라가기**: 가져오기 결과에는 다크 에디토리얼 변형, 가격 정책 섹션, 모바일 뷰포트 같은 제안된 다음 단계가 함께 제공됩니다. 각각 새로운 프레임으로 생성되므로 원본은 비교를 위해 그대로 남습니다.
* **[채팅으로 이야기하기](/ko/design/chat-about-your-design)**: 프레임 아래 입력창을 사용해 원하는 내용을 직접 말로 전달하세요. *"히어로 사진을 바꿔줘"*, *"콜투액션을 더 굵게 해줘"* 같은 식으로요.

<Frame caption="가져온 프레임이 선택된 상태이며, 다크 에디토리얼 변형, 가격 정책 섹션, 모바일 뷰포트를 제안하는 제안들이 표시됨.">
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/fitstart/turn-mockup-into-app/figma-make-it-yours.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=5a7cc45a8468893d26bdc4ef2490b3f1" alt="Replit Design에서 선택된 가져온 Personal Fitness Trainer 프레임과 그 옆에 세 개의 제안 카드: Dark editorial variant, Add a pricing section, Mobile viewport" width="3440" height="2160" data-path="images/fitstart/turn-mockup-into-app/figma-make-it-yours.webp" />
</Frame>

## 다음 단계

<CardGroup cols={3}>
  <Card title="제안 살펴보기" icon="lightbulb" href="/ko/design/explore-suggestions">
    클릭 한 번으로 다음에 무엇을 디자인할지 살펴보세요.
  </Card>

  <Card title="Visual Editor" icon="pen-to-square" href="/ko/design/visual-editor">
    텍스트, 색상, 간격, 이미지를 직접 다듬으세요.
  </Card>

  <Card title="디자인 빌드하기" icon="hammer" href="/ko/design/build-your-design">
    완성된 프레임을 동작하는 앱으로 만드세요.
  </Card>
</CardGroup>

## 관련 항목

* [Figma MCP 통합](/ko/features/mcp/figma)
* [Canvas](/ko/design/canvas)
* [Visual Editor](/ko/design/visual-editor)

## 크레딧

이 가이드에서 사용한 예제 디자인은 Figma Community의 [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411)입니다.