⏰ 예상 시간: 15분 Figma 디자인은 경험이 어떻게 보여야 하는지 보여줍니다. Replit은 Figma 프레임을 테스트, 개선, 공유할 수 있는 React 앱으로 변환할 수 있습니다. FitStart를 예제로 사용할 것입니다: 동작하는 운동 양식, 진행 카드, 주간 목표, 모바일 레이아웃이 필요한 피트니스 트래커 대시보드용 Figma 프레임.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으로 가져오는 방법.
- Replit이 디자인에서 보존한 것을 확인하는 방법.
- 가져오기 후 동작, 반응성, 세련도를 다듬는 방법.
- 가져온 앱에 변경이 필요할 때 Agent, Canvas, Visual Editor를 사용하는 방법.
시작하기 전에
필요한 것:- Replit 계정.
- 가져오려는 프레임이 있는 Figma 파일.
- Figma 계정 연결 접근 권한.
- 앱으로 변환하려는 정확한 Figma 프레임의 URL.
Figma 프레임 가져오기
Replit 가져오기 플로우를 사용하여 프레임을 React 앱으로 변환하세요.
Replit 가져오기 열기
replit.com/import로 이동하세요.
또는 프롬프트에 Figma 직접 첨부하기
가져오기 마법사 대신 빌드 프롬프트와 함께 Agent에게 프레임을 전달하고 싶다면, 프롬프트 작성기의 첨부 메뉴를 사용하세요.Replit 열기 및 프롬프트 박스에 포커스하기
replit.com으로 이동하세요. 프롬프트 작성기가 홈 화면에 있습니다.
Replit이 가져오는 것
Replit은 Figma 프레임을 사용하여 React 프로젝트를 만듭니다. 가져오기에는 다음이 포함될 수 있습니다:- 테마 및 컴포넌트 스타일링.
- 이미지 및 아이콘 에셋.
- React 프로젝트를 위한 앱 스캐폴딩.
Agent가 빌드한 것 확인하기
가져오기 후 Preview를 열고 앱을 Figma 프레임과 비교하세요.
- 레이아웃이 Figma 프레임과 충분히 일치하는지.
- 색상, 타이포그래피, 간격, 에셋이 보존되는지.
- 중요한 이미지와 아이콘이 표시되는지.
- 앱이 데스크톱과 모바일 크기에서 작동하는지.
- 버튼과 링크가 예상대로 동작하는지.
- 필요한 경우 양식, 메뉴, 탭, 내비게이션이 있는지.
- 새로 고침 후에도 앱이 작동하는지.
- 빠진 것이 Agent에게 추가하도록 요청할 만큼 명확한지.
가져오기 후 앱 다듬기
가져오기 후 일부 동작을 추가해야 할 수 있습니다. 변경이 상호 작용, 데이터, 여러 화면, 또는 숨겨진 로직에 영향을 미칠 때 Agent를 사용하세요. FitStart의 경우, Agent에게 가져온 디자인을 대화형으로 만들도록 요청하세요: 변경이 주로 텍스트, 색상, 간격, 레이아웃, 또는 이미지 세련도에 관한 것이라면 Visual Editor를 사용하세요. 시각적 피드백에 주석을 달거나, 변형을 비교하거나, 디자인에서 직접 변경해야 할 것을 보여주고 싶다면 Canvas를 사용하세요.Canvas에서 레이아웃 비교하고 주석 달기
Canvas는 가져온 앱을 자유 형식 보드로 변환하여 Agent에게 대안적인 레이아웃을 요청하고 텍스트와 스케치로 디자인을 표시할 수 있습니다.
다양한 레이아웃 시도하기
가져온 목업을 클릭하고, Reimagine을 선택한 다음, Try different layouts을 선택하세요. Agent는 콘텐츠를 유지하면서 시각적 계층을 재정렬하는 대안적인 레이아웃을 제안합니다.
필요할 때 Agent에서 Figma 링크 사용하기
가져오기 후, Agent가 특정 프레임이나 레이어를 검사하거나, 디자인 데이터를 추출하거나, 구현을 디자인과 비교할 때 Agent 채팅에 Figma 링크를 붙여넣을 수 있습니다. Agent 채팅 기능에는 Figma Dev 또는 Full 시트가 권장됩니다. 자세한 내용은 Figma MCP 통합을 참조하세요. 튜토리얼을 완료하신 것을 축하드립니다! Figma 프레임을 대화형 Replit 앱으로 변환하고 공유하고 테스트할 수 있는 것으로 다듬었습니다.다음 단계
Visual Editor
텍스트, 색상, 간격, 이미지와 같은 작은 시각적 세부 사항을 다듬으세요.
Canvas
시각적 방향을 비교하고 디자인에 직접 피드백 주석을 다세요.
데이터베이스 추가하기
새로 고침 시에도 양식 데이터를 저장하세요.
로그인 추가하기
개인 화면에 인증을 적용하세요.
커스텀 도메인 추가하기
검토자에게 앱을 사용해볼 수 있는 공개 URL을 제공하세요.
팀 워크스페이스에서 협업하기
팀원을 초대하여 가져온 앱을 함께 빌드하세요.