Skip to main content
⏰ 예상 시간: 15분 Figma 디자인은 경험이 어떻게 보여야 하는지 보여줍니다. Replit Design은 Figma 프레임을 탐색하고 다듬고 대화형 앱으로 빌드할 수 있는 디자인 프레임으로 변환합니다. 예제로 Figma Community의 Personal Fitness Trainer Template을 사용합니다.
Replit Design의 디자인 프레임으로 가져온 Personal Fitness Trainer 랜딩 페이지, 채팅 패널에 실행 완료로 표시됨

​
시작하기 전에

다음이 필요합니다:

​
Figma 프레임 가져오기

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

Figma 프레임 링크 가져오기

직접 만든 Figma 파일을 사용하거나, 이 가이드의 예제인 Figma Community의 Personal Fitness Trainer Template을 따라 해보세요.Figma에서 가져오려는 프레임을 마우스 오른쪽 버튼으로 클릭하고 Copy/Paste as를 선택한 다음 Copy link to selection을 선택하세요.
Figma에서 열린 Personal Fitness Trainer Template — 레이어 패널과 캔버스에 Cover 프레임이 표시됨

Figma에서 열린 Personal Fitness Trainer Template과 가져올 Cover 프레임.

2

Replit Design 열기

replit.com/design으로 이동해 프롬프트 박스 아래에서 Import Figma를 선택하세요.
프롬프트 박스 아래에서 Import Figma 옵션이 선택된 Replit Design 홈 화면과 'Bring in a Figma frame and Agent will turn it into a working design'이라는 툴팁

Replit Design 홈의 Import Figma: Figma 프레임을 가져오면 Agent가 동작하는 디자인으로 만들어줍니다.

3

URL 붙여넣고 빌드 시작하기

Import Figma design 대화 상자에 프레임 URL을 붙여넣고 Attach to prompt를 선택하세요. 프레임이 프롬프트에 첨부되며, 제출하면 빌드가 시작됩니다.
Replit Design의 Import Figma design 대화 상자 — 필드에 Figma 프레임 URL이 붙여넣어져 있고 Attach to prompt 버튼이 표시됨

프레임 URL이 붙여넣어져 프롬프트에 첨부할 준비가 된 Import Figma design 대화 상자.

Agent가 프레임을 가져와 프로젝트의 디자인 프레임으로 다시 빌드합니다.
Replit Design의 디자인 프레임으로 가져온 Personal Fitness Trainer 랜딩 페이지, 채팅 패널에 실행 완료로 표시됨

Replit Design의 프레임으로 가져온 Personal Fitness Trainer 랜딩 페이지.

​
내 것으로 만들기

가져온 프레임을 선택하고 형태를 바꿔보세요:
  • 제안을 따라가기: 가져오기 결과에는 다크 에디토리얼 변형, 가격 정책 섹션, 모바일 뷰포트 같은 제안된 다음 단계가 함께 제공됩니다. 각각 새로운 프레임으로 생성되므로 원본은 비교를 위해 그대로 남습니다.
  • 채팅으로 이야기하기: 프레임 아래 입력창을 사용해 원하는 내용을 직접 말로 전달하세요. “히어로 사진을 바꿔줘”, “콜투액션을 더 굵게 해줘” 같은 식으로요.
Replit Design에서 선택된 가져온 Personal Fitness Trainer 프레임과 그 옆에 세 개의 제안 카드: Dark editorial variant, Add a pricing section, Mobile viewport

가져온 프레임이 선택된 상태이며, 다크 에디토리얼 변형, 가격 정책 섹션, 모바일 뷰포트를 제안하는 제안들이 표시됨.

​
다음 단계

제안 살펴보기

클릭 한 번으로 다음에 무엇을 디자인할지 살펴보세요.

Visual Editor

텍스트, 색상, 간격, 이미지를 직접 다듬으세요.

디자인 빌드하기

완성된 프레임을 동작하는 앱으로 만드세요.

​
관련 항목

​
크레딧

이 가이드에서 사용한 예제 디자인은 Figma Community의 Personal Fitness Trainer Template입니다.