> ## 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.

# Figma 디자인을 대화형 앱으로 변환하기

> Figma 프레임을 Replit으로 가져오고, React 앱으로 변환하고, 결과를 테스트하고, 대화형 경험으로 다듬으세요.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

⏰ *예상 시간: 15분*

Figma 디자인은 경험이 어떻게 보여야 하는지 보여줍니다. Replit은 Figma 프레임을 테스트, 개선, 공유할 수 있는 React 앱으로 변환할 수 있습니다.

**FitStart**를 예제로 사용할 것입니다: 동작하는 운동 양식, 진행 카드, 주간 목표, 모바일 레이아웃이 필요한 피트니스 트래커 대시보드용 Figma 프레임.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-source.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=1aa070bf0d24decf4c9924c6cf80510b" alt="대화형 Replit 앱으로 변환할 FitStart 피트니스 트래커의 소스 Figma 프레임 — 대시보드, 프로필, 지원 화면이 표시됩니다" width="1920" height="1080" data-path="images/fitstart/turn-mockup-into-app/figma-source.png" />
</Frame>

## 배울 내용

다음을 배우게 됩니다:

* 더 나은 가져오기 결과를 위해 Figma 프레임을 준비하는 방법.
* Figma 프레임을 Replit으로 가져오는 방법.
* Replit이 디자인에서 보존한 것을 확인하는 방법.
* 가져오기 후 동작, 반응성, 세련도를 다듬는 방법.
* 가져온 앱에 변경이 필요할 때 Agent, Canvas, Visual Editor를 사용하는 방법.

## 시작하기 전에

필요한 것:

* [Replit 계정](https://replit.com).
* 가져오려는 프레임이 있는 Figma 파일.
* Figma 계정 연결 접근 권한.
* 앱으로 변환하려는 정확한 Figma 프레임의 URL.

Figma 가져오기 제한은 Figma에 의해 설정됩니다 — 정확한 제한과 계정 요구 사항은 Figma 자체 개발자 문서를 확인하세요.

## Figma 프레임 가져오기

Replit 가져오기 플로우를 사용하여 프레임을 React 앱으로 변환하세요.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-import-page.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=381f46b4437197d7caceb78090467d55" alt="Figma Design 타일이 강조 표시된 Replit 가져오기 페이지 — 선택하면 프레임을 React 앱으로 변환하는 Figma 가져오기 플로우가 열립니다" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-import-page.png" />
</Frame>

<Steps>
  <Step title="Replit 가져오기 열기">
    [replit.com/import](https://replit.com/import)로 이동하세요.
  </Step>

  <Step title="Figma Design 선택하기">
    **Figma Design**을 선택하고 Figma 계정을 연결하세요.
  </Step>

  <Step title="프레임 URL 복사하기">
    Figma에서 가져오려는 정확한 프레임을 선택하고 URL을 복사하세요.
  </Step>

  <Step title="붙여넣기 및 가져오기">
    Replit에 프레임 URL을 붙여넣고 **Import**를 선택하세요.
  </Step>
</Steps>

### 또는 프롬프트에 Figma 직접 첨부하기

가져오기 마법사 대신 빌드 프롬프트와 함께 Agent에게 프레임을 전달하고 싶다면, 프롬프트 작성기의 첨부 메뉴를 사용하세요.

<Steps>
  <Step title="Replit 열기 및 프롬프트 박스에 포커스하기">
    [replit.com](https://replit.com)으로 이동하세요. 프롬프트 작성기가 홈 화면에 있습니다.
  </Step>

  <Step title="첨부 메뉴 열기">
    프롬프트 작성기의 **+** 버튼을 선택하여 **Add attachment** 메뉴를 여세요.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-prompt-plus.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=4678037001e3566c12af0cacf342edca" alt="+ 버튼이 강조 표시된 Replit 프롬프트 작성기 — 선택하면 Figma 디자인을 가져올 수 있는 Add attachment 메뉴가 열립니다" width="760" height="320" data-path="images/fitstart/turn-mockup-into-app/figma-prompt-plus.png" />
    </Frame>
  </Step>

  <Step title="Import a Figma design 선택하기">
    **Import a Figma design**을 선택하고 빌드하려는 정확한 Figma 프레임의 URL을 붙여넣으세요.
  </Step>

  <Step title="빌드할 내용 설명하기">
    디자인으로 무엇을 할지 Agent에게 알려주는 짧은 프롬프트를 입력하세요 — 예: 무엇이 대화형이어야 하는지, 무엇이 시각적으로 유지되어야 하는지, 데스크톱과 모바일 동작에 대해 기대하는 것. 준비되면 제출하세요.
  </Step>
</Steps>

Agent가 프레임을 가져오고 프롬프트를 기반으로 대화형 앱을 빌드합니다. 빌드가 완료되면 Preview에서 테스트하세요.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-build-result.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=9f0643e91740c5d403d8bc92a1914712" alt="Figma 프레임에서 Agent가 빌드한 대화형 FitStart 앱 — 통계 카드, 운동 기록 양식, 오늘의 항목, 7일 트렌드 차트가 있는 브라우저 탭에서 실행 중인 앱" width="1440" height="850" data-path="images/fitstart/turn-mockup-into-app/figma-build-result.png" />
</Frame>

## Replit이 가져오는 것

Replit은 Figma 프레임을 사용하여 React 프로젝트를 만듭니다. 가져오기에는 다음이 포함될 수 있습니다:

* 테마 및 컴포넌트 스타일링.
* 이미지 및 아이콘 에셋.
* React 프로젝트를 위한 앱 스캐폴딩.

가져오기는 동작하는 시작점을 제공합니다. 디자인이 완전히 정의하지 않는 동작, 반응성, 상호 작용을 여전히 테스트해야 합니다.

## Agent가 빌드한 것 확인하기

가져오기 후 Preview를 열고 앱을 Figma 프레임과 비교하세요.

<Frame>
  <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-check-what-agent-built.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=813cffb55c2a94d86eebbd92b188ea07" alt="Agent의 체크포인트 기록 옆 Preview에서 실행 중인 가져온 FitStart Personal Fitness Trainer 랜딩 페이지 — Agent가 Figma 프레임에서 빌드한 히어로, 환불 보증 배지, 통계 행" width="3452" height="1988" data-path="images/fitstart/turn-mockup-into-app/figma-check-what-agent-built.png" />
</Frame>

시각적 확인:

* 레이아웃이 Figma 프레임과 충분히 일치하는지.
* 색상, 타이포그래피, 간격, 에셋이 보존되는지.
* 중요한 이미지와 아이콘이 표시되는지.
* 앱이 데스크톱과 모바일 크기에서 작동하는지.

상호 작용 확인:

* 버튼과 링크가 예상대로 동작하는지.
* 필요한 경우 양식, 메뉴, 탭, 내비게이션이 있는지.
* 새로 고침 후에도 앱이 작동하는지.
* 빠진 것이 Agent에게 추가하도록 요청할 만큼 명확한지.

## 가져오기 후 앱 다듬기

가져오기 후 일부 동작을 추가해야 할 수 있습니다. 변경이 상호 작용, 데이터, 여러 화면, 또는 숨겨진 로직에 영향을 미칠 때 Agent를 사용하세요.

FitStart의 경우, Agent에게 가져온 디자인을 대화형으로 만들도록 요청하세요:

<AiPrompt>
  Review this imported FitStart app.<br />
  Keep the visual design close to the Figma frame.<br />
  Make the workout form interactive: a visitor should choose a workout type, enter minutes and a note, then add the workout.<br />
  After submission, update today's workout list and total minutes.<br />
  Preserve the desktop layout and improve the mobile layout if needed.
</AiPrompt>

변경이 주로 텍스트, 색상, 간격, 레이아웃, 또는 이미지 세련도에 관한 것이라면 [Visual Editor](/learn/design/visual-editor)를 사용하세요.

시각적 피드백에 주석을 달거나, 변형을 비교하거나, 디자인에서 직접 변경해야 할 것을 보여주고 싶다면 [Canvas](/learn/design/canvas)를 사용하세요.

### Canvas에서 레이아웃 비교하고 주석 달기

Canvas는 가져온 앱을 자유 형식 보드로 변환하여 Agent에게 대안적인 레이아웃을 요청하고 텍스트와 스케치로 디자인을 표시할 수 있습니다.

<Steps>
  <Step title="Canvas 열기">
    워크스페이스 창 헤더에서 **Canvas**를 선택하여 오른쪽 창을 Preview에서 Canvas로 전환하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-button.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=2bb7f136351d5fe48d7f8364ac5066f3" alt="Preview 및 Tools & files 탭 옆에 Canvas 탭이 강조 표시된 Replit 워크스페이스 창 헤더" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-button.png" />
    </Frame>
  </Step>

  <Step title="다양한 레이아웃 시도하기">
    가져온 목업을 클릭하고, **Reimagine**을 선택한 다음, **Try different layouts**을 선택하세요. Agent는 콘텐츠를 유지하면서 시각적 계층을 재정렬하는 대안적인 레이아웃을 제안합니다.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-reimagine.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=ebf02908edafd07e2a8b76f694a54332" alt="Try different layouts 옵션이 강조 표시된 Canvas 목업에서 열린 Reimagine 메뉴" width="720" height="450" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-reimagine.png" />
    </Frame>
  </Step>

  <Step title="제안된 레이아웃 검토하기">
    Agent가 대안을 생성할 때까지 기다린 다음, 축소하여 원본 목업 옆에서 검토하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-layouts.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=0611161518c09408ea9b4790c541938a" alt="가져온 FitStart 목업과 채팅 패널에서 Agent의 레이아웃 제안이 있는 Canvas" width="1440" height="900" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-layouts.png" />
    </Frame>
  </Step>

  <Step title="Text와 Draw로 주석 달기">
    **Text**를 사용하여 캔버스에 메모를 추가하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-text-tool.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=d6b2a2422a9199cfa995ddee8f5a6deb" alt="Text 도구가 강조 표시된 Canvas 주석 도구 모음" width="720" height="360" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-text-tool.png" />
    </Frame>

    **Draw**를 사용하여 변경하려는 부분을 가리키는 화살표나 도형을 스케치하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-draw-tool.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=44811ad4c1579c80dd6e1999c97de9ae" alt="Draw 도구가 강조 표시된 Canvas 주석 도구 모음" width="720" height="360" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-draw-tool.png" />
    </Frame>
  </Step>

  <Step title="주석을 Agent에게 보내기">
    메모가 준비되면, Agent에게 피드백을 가져온 앱에 적용하도록 요청하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/turn-mockup-into-app/figma-canvas-annotated.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=6ba511fedb00d712178d5a144359ef0d" alt="히어로 통계 행을 가리키는 텍스트 주석이 있는 Canvas에서의 가져온 FitStart 목업" width="1000" height="800" data-path="images/fitstart/turn-mockup-into-app/figma-canvas-annotated.png" />
    </Frame>
  </Step>
</Steps>

<AiPrompt>
  Use my Canvas annotations to refine the imported FitStart app.<br />
  Keep the workout form behavior unchanged.<br />
  Apply the notes to the progress card, weekly goal area, and mobile spacing only.<br />
  Then test that adding a workout still updates today's list and total minutes.
</AiPrompt>

## 필요할 때 Agent에서 Figma 링크 사용하기

가져오기 후, Agent가 특정 프레임이나 레이어를 검사하거나, 디자인 데이터를 추출하거나, 구현을 디자인과 비교할 때 Agent 채팅에 Figma 링크를 붙여넣을 수 있습니다.

Agent 채팅 기능에는 Figma Dev 또는 Full 시트가 권장됩니다. 자세한 내용은 [Figma MCP 통합](/references/mcp/figma)을 참조하세요.

튜토리얼을 완료하신 것을 축하드립니다! Figma 프레임을 대화형 Replit 앱으로 변환하고 공유하고 테스트할 수 있는 것으로 다듬었습니다.

## 다음 단계

<CardGroup cols={2}>
  <Card title="Visual Editor" icon="wand-magic-sparkles" href="/learn/design/visual-editor">
    텍스트, 색상, 간격, 이미지와 같은 작은 시각적 세부 사항을 다듬으세요.
  </Card>

  <Card title="Canvas" icon="palette" href="/learn/design/canvas">
    시각적 방향을 비교하고 디자인에 직접 피드백 주석을 다세요.
  </Card>

  <Card title="데이터베이스 추가하기" icon="database" href="/build/add-database">
    새로 고침 시에도 양식 데이터를 저장하세요.
  </Card>

  <Card title="로그인 추가하기" icon="lock" href="/build/add-login">
    개인 화면에 인증을 적용하세요.
  </Card>

  <Card title="커스텀 도메인 추가하기" icon="globe" href="/build/add-custom-domain">
    검토자에게 앱을 사용해볼 수 있는 공개 URL을 제공하세요.
  </Card>

  <Card title="팀 워크스페이스에서 협업하기" icon="users" href="/references/collaboration/team-workspaces">
    팀원을 초대하여 가져온 앱을 함께 빌드하세요.
  </Card>
</CardGroup>

## 관련 항목

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

## 크레딧

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