> ## 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에서 실제 App으로 전환하기

> Figma 프레임을 레이아웃, 타이포그래피, 색상이 일치하는 게시 가능한 Replit 앱으로 바꾸세요.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

이미 Figma에 화면이 있는 경우입니다. Agent가 이를 편집, 미리보기, 게시할 수 있는
실제 Replit 앱으로 빌드합니다: 레이아웃, 타이포그래피, 색상, 여백까지입니다. 결과물은
스크린샷이 아니라 실제로 작동하는 제품입니다. 파일에 흐름이 여러 개 있다면 Agent에게
특정 프레임을 알려주세요.

## 적합한 대상

* 이미 보유한 프레임을 바탕으로 코드로 구현된 Replit 앱이 필요한 프로덕트 디자이너
* Figma 파일을 처음부터 다시 만들지 않고 실제로 작동하게 만들어야 하는 창업자

## 커넥터

<Connectors
  items={[
{
  id: "figma",
  name: "Figma",
  why: "구현할 프레임, 컴포넌트, 타이포그래피, 색상",
},
]}
/>

## 시작하기 전에

이름이 지정된 프레임(홈, 제품, 체크아웃 등)이 있는 Figma 파일을 준비하세요. Figma를
연결하세요. 파일을 Agent와 공유하거나 파일 링크와 관심 있는 프레임 링크를 붙여넣으세요.
이것이 마케팅 사이트인지, 앱인지, 단일 랜딩 페이지인지 알려주세요.

## Agent에게 요청하기

<AiPrompt>
  이 Figma 파일\[링크]을 바탕으로 다음 프레임들\[프레임 이름 또는 링크]로 실제
  작동하는 Replit 앱을 빌드해 주세요. 레이아웃, 타이포그래피, 색상, 여백,
  브레이크포인트(데스크톱과 모바일)를 일치시켜 주세요.
</AiPrompt>

## 예상되는 결과

Agent는 선택된 프레임을 읽고 Replit에서 게시할 수 있는 일치하는 페이지를
빌드합니다. Figma와 비교해 여백, 타이포그래피, 색상을 샘플로 확인하세요. 인터랙티브
요소(내비게이션, 폼, 호버)는 직접 검토하세요. 대개 한 번 더 다듬어야 합니다. 데스크톱과
모바일 너비에서 미리보기하세요. 내비게이션과 폼을 클릭해본 다음, 게시하기 전에
스크린샷을 Figma와 비교하세요.

## 나에게 맞게 조정하기

<AiPrompt>
  모바일 프레임만 먼저 구현해 주세요. Figma의 오토 레이아웃과 여백을 맞춰
  주세요. 모바일을 승인하면 데스크톱을 진행할게요.
</AiPrompt>

<AiPrompt>
  버튼, 입력창, 카드에 하나의 컴포넌트를 재사용해 주세요. Figma 변수가 있다면
  거기서 색상과 타이포그래피를 가져와 주세요.
</AiPrompt>

## 문제 해결

* **Agent가 파일을 읽지 못함:** Figma를 연결하고 파일을 공유한 다음, 파일 URL뿐 아니라 프레임 링크를 붙여넣으세요. 파일에 흐름이 여러 개라면 프레임 이름(홈, 제품, 체크아웃)을 지정하세요.
* **호버, 내비게이션, 폼이 미완성처럼 느껴짐:** 레이아웃과 색상이 먼저 적용되는 경우가 많습니다. 인터랙티브 요소에 대해 한 번 더 다듬어 달라고 요청하고, Figma와 비교해 여백을 샘플로 확인하세요.

## 관련 문서

<CardGroup cols={2}>
  <Card title="랜딩 페이지 디자인하기" href="/ko/use-cases/design-landing-page">
    Notion 브리프를 바탕으로 프레임이 먼저 필요한 프로덕트 디자이너를 위한 문서입니다.
  </Card>

  <Card title="온라인 스토어 구축하기" href="/ko/use-cases/build-online-store">
    다음 단계로 Shopify 스토어프론트가 필요한 창업자와 프로덕트 디자이너를 위한 문서입니다.
  </Card>
</CardGroup>