Figma 디자인으로 작동하는 앱 만들기

Q: 파일 대신 Figma 링크를 붙여 넣어도 되나요?

이 창에서는 안 됩니다. .fig 파일 자체를 읽기 때문입니다. Figma에서 File → Save local copy…를 사용하세요. (일부 디자인 도구는 내 코딩 에이전트를 통해 작업 결과를 보낼 수도 있습니다.)

핵심 요약Figma에서 File → Save local copy…로 .fig 파일을 저장하세요. 프로젝트 페이지에서 Figma를 클릭하고 파일을 넣으면 MonstarX가 브라우저에서 파일을 읽어 모든 화면을 보여 줍니다. 만들 화면을 최대 30개까지 선택하고, 디자인에 드러나지 않는 내용을 적은 뒤 이 앱 만들기를 누르세요. 만들기 전에 몇 가지 질문에 답하고 싶다면 먼저 계획을 누르세요.

앱 디자인이 이미 Figma에 있다면 MonstarX가 그 디자인으로 바로 앱을 만들 수 있습니다. 실제 이미지와 아이콘, 색상과 글꼴, 프로토타입의 화면 이동까지 내 화면과 똑같이 생긴 작동하는 앱이 만들어지고, 화면에서 짐작할 수 있는 데이터, 양식, 로그인도 함께 갖춥니다.

무엇이 필요한가요?

디자인의 .fig 파일이 필요합니다. Figma에서 디자인을 열고 File → Save local copy…를 선택하면 MonstarX가 읽는 파일이 저장됩니다. Figma Design 파일이어야 합니다. FigJam 보드와 Figma Slides 자료는 지원하지 않으며, 이런 파일을 넣으면 MonstarX가 알려 줍니다.

Figma 파일로 앱을 만들려면 어떻게 하나요?

프로젝트 페이지에서 가져오기 옆의 Figma를 클릭하세요(가져오기 메뉴에도 있습니다). .fig 파일을 프롬프트 입력란에 끌어다 놓거나 붙여 넣어도 됩니다.
.fig 파일을 넣거나 선택하세요. MonstarX가 브라우저에서 파일을 읽습니다(“파일을 읽는 중…”, “모든 페이지를 여는 중…”, “화면을 그리는 중…”). 아직 아무것도 업로드되지 않습니다.
만들 화면을 선택하세요. 파일의 모든 페이지가 작게 그린 프레임과 함께 나열됩니다. 화면처럼 보이는 프레임은 처음부터 선택되어 있고, 표지, 디자인 시스템, 보관함처럼 관리용으로 보이는 페이지는 접힌 채 선택 해제되어 있습니다. 페이지마다 모두 선택이나 모두 선택 해제를 쓸 수 있습니다.
어떤 기능을 해야 하나요? (선택 사항)에 디자인에 드러나지 않는 내용을 적으세요. 누가 쓰는지, 데이터는 어디서 오는지, 누군가 가입하거나 결제하면 어떻게 되는지 등입니다.
왼쪽 아래 모서리의 모델을 확인하세요(프롬프트 입력란에서 고른 모델이며, 원하면 여기서 바꿀 수 있습니다).
이 앱 만들기 · 화면 4개를 누르세요. 또는 먼저 계획을 누르면 MonstarX가 화면을 살펴보고, 만들기 전에 디자인에 드러나지 않는 내용을 질문합니다.

화면이 업로드되고(“디자인 업로드 중…”), 파일 이름을 딴 프로젝트가 만들어진 뒤 첫 빌드가 시작됩니다.

MonstarX는 디자인에서 무엇을 가져오나요?

화면별 이미지: MonstarX가 내가 그린 그대로를 보고, 작업하면서 자신이 만든 페이지와 비교합니다.
화면별 정밀한 설명: 레이아웃, 간격, 모든 텍스트의 글꼴과 크기, 색상, 테두리, 모서리, 그림자.
이미지와 아이콘: 디자인 속 모든 이미지와 아이콘이 앱의 파일이 됩니다. 스톡 사진으로 바뀌는 것은 없습니다.
디자인 시스템: 색상 변수(밝은 테마와 어두운 테마), 글꼴, 모서리 반경, 그림자.
컴포넌트: 화면 열 개에 쓰인 버튼은 앱에서 컴포넌트 하나가 됩니다.
프로토타입 링크: 탭했을 때 이동하는 곳이 실제 화면 이동이 됩니다.

이름이 같은 화면(모두 “Desktop”이라는 이름의 프레임이 이어지는 흐름 등)은 첫 몇 단어로 구분해 보여 주므로 어느 화면인지 알 수 있습니다.

대화에는 무엇이 표시되나요?

첫 요청은 예를 들어 ‘내 Figma 디자인 “bloom.fig” (화면 4개: 환영, 홈, 식물 상세, 식물 추가)를 바탕으로 이 앱을 만들어 주세요. 디자인과 똑같이 보이고 실제로 작동하도록 만들어 주세요.’처럼 표시되고, 그 아래에 화면이 한 줄로 나열됩니다. 화면을 클릭하면 크기, 페이지, 파일 정보와 함께 크게 볼 수 있습니다. 만드는 동안 대화에는 “홈 디자인 살펴보기”, “/와 홈 디자인을 비교했습니다.” 같은 단계가 표시됩니다.

나중에 화면을 더 추가할 수 있나요?

네. 프로젝트 대화에 .fig 파일을 끌어다 놓거나, 붙여 넣거나, 첨부하면 Figma에서 화면 추가 창이 열립니다. 새 화면을 선택하고 어떤 기능을 해야 하는지 적은 다음 이 화면 만들기를 누르세요. 새 화면은 프로젝트의 디자인에 추가되고, 앱의 나머지 부분과 어울리게 만들어집니다. 프로젝트 하나에는 디자인 화면을 최대 60개까지 둘 수 있습니다.

한도는 어떻게 되나요?

한도	값
빌드당 화면	최대 30개
프로젝트당 화면	최대 60개
디자인당 이미지와 아이콘	최대 400개 파일, 150 MB(파일당 8 MB)

.fig 파일은 최대 250 MB까지 가능하지만, 디자인 시스템 키트 전체처럼 아주 큰 파일은 브라우저가 열기에 무리일 수 있습니다. 앱 화면만 별도 파일로 옮기고(디자인 시스템 페이지는 제외), 그 파일의 로컬 사본을 저장하세요.

자주 묻는 질문

파일 대신 Figma 링크를 붙여 넣어도 되나요?

이 창에서는 안 됩니다. .fig 파일 자체를 읽기 때문입니다. Figma에서 File → Save local copy…를 사용하세요. (일부 디자인 도구는 내 코딩 에이전트를 통해 작업 결과를 보낼 수도 있습니다.)

디자인을 넣으면 바로 업로드되나요?

아니요. 파일은 브라우저에서 읽고, 만들기를 누를 때 선택한 화면만 업로드됩니다.

앱이 디자인과 정확히 똑같아지나요?

디자인과 똑같이 만드는 것이 목표입니다. MonstarX는 각 화면을 정확한 값에 맞춰 만들고, 만드는 동안 자신이 만든 페이지를 내 화면과 비교합니다. 다른 부분은 대화에서 짚어 주거나 편집 모드로 고칠 수 있습니다.

디자인에 휴대폰 화면만 있다면 컴퓨터에서는 어떻게 보이나요?

휴대폰 디자인은 넓은 화면에서 가운데 정렬된 열로 만들어지므로, 컴퓨터에서도 앱이 잘 작동합니다.

MonstarX가 Figma 파일이 아니라고 하는 이유는 무엇인가요?

FigJam 보드, Figma Slides 자료, 또는 다른 프로그램의 .fig 파일일 수 있습니다. Figma에서 디자인을 열고 File → Save local copy…로 Figma Design 파일을 저장하세요.