작동 가능한 프로토타입 또는 웹 앱 생성 및 편집

시작하기 전에

이 기능을 사용할 수 있는 사람

Figma Make는 유료 요금제의 풀 시트에서 사용할 수 있습니다.

다른 시트와 요금제에서 Figma Make를 사용해 볼 수 있습니다.

Figma Make를 사용하면 채팅 인터페이스로 작동 가능한 프로토타입, 웹 앱, 인터랙티브 UI 등을 만들 수 있습니다. Figma Make는 AI 기반으로 작동하여, 인터랙티브 Figma Make 프로토타입을 만드는 작업이 예시를 공유하거나 짧은 대화를 나누는 것만큼 간단합니다. 대화를 계속하면서 기능 프로토타입과 웹 앱을 편집하거나 개선할 수 있으며, 미리보기와 코드를 직접 편집할 수도 있습니다.

작동 가능한 프로토타입 또는 웹 앱 만들기

Figma Make를 사용하여 작동 가능한 프로토타입, 웹 앱 또는 인터랙티브 UI를 만드는 방법:

1. Figma Make 파일을 생성합니다. 파일 브라우저에서 초안으로 이동한 후 오른쪽 상단 모서리에서 Make를 클릭합니다.

2. AI 채팅에서 모델에게 무엇을 만들고 싶은지 말합니다. 다음 중 하나 이상을 수행하여 AI를 안내할 수 있습니다.
   • Figma 디자인을 첨부합니다.
   • Figma Design 라이브러리 중 하나에서 스타일 컨텍스트를 가져옵니다. (유료 요금제만 해당)
   • 데이터와 시크릿을 안전하게 저장하고 관리할 수 있게 백엔드를 추가합니다.
   • Figma 디자인의 프레임과 이미지를 채팅에 직접 붙여 넣습니다.
   • 프롬프트 상자에 아이디어와 지침을 입력합니다.
3. 보내기를 클릭합니다.

프롬프트를 보내면 Figma Make가 작동 가능한 프로토타입이나 웹 앱의 코드 생성을 시작합니다. 최종 결과물의 복잡성에 따라 Figma Make가 코드를 생성하는 데 몇 분 정도 걸릴 수 있습니다.

프로세스가 완료되면 Figma Make는 변경 사항 요약으로 응답하고, 대화형 미리보기가 나타납니다.

최초 결과를 얻는 동안 문제가 발생하면 Figma Make 문제 해결에 대한 권장 사항을 확인하세요.

작동 가능한 프로토타입 또는 웹 앱 편집하기

기존의 작동 가능한 프로토타입이나 웹 앱을 편집하려면 작동 가능한 프로토타입 또는 웹 앱 만들기의 단계를 따르세요. 기존 대화를 이어가면서 원래 결과를 반복 개선하세요. 원본 결과의 특정 부분을 지목하여 AI가 수정하게 만들 수도 있습니다.

다음 방법을 사용하여 작동 가능한 프로토타입 또는 웹 앱을 편집하세요.

• 지정 및 편집 도구를 사용하여 Figma Make가 집중해야 하는 작동 가능한 프로토타입이나 웹 앱의 특정 부분을 가리킵니다.
• 버전 기록을 사용하여 작동 가능한 프로토타입이나 웹 앱의 이전 버전을 편집합니다.
• Figma 디자인을 첨부합니다.
• Figma Design 라이브러리 중 하나에서 스타일 컨텍스트를 가져옵니다. (유료 요금제만 해당)
• 데이터와 시크릿을 안전하게 저장하고 관리할 수 있게 백엔드를 추가합니다.
• Figma 디자인의 프레임과 이미지를 채팅에 직접 붙여 넣습니다.
• 프롬프트 상자에 아이디어와 지침을 입력합니다.

미리보기는 다른 프롬프트를 보낼 때마다 업데이트되며 AI에 의해 변경됩니다.

업데이트 중 문제가 발생하면 Figma Make에서 문제 해결 권장 사항을 확인하세요.

지정 및 편집 도구

지정 및 편집 도구를 사용하면 작동 가능한 프로토타입이나 웹 앱의 요소를 지목할 수 있습니다. 요소의 유형과 생성 방식에 따라 색상, 패딩, 여백, 텍스트 스타일링 등 다양한 속성을 변경할 수 있습니다. 모델에게 그 요소를 직접 변경하도록 요청할 수도 있습니다.

지정 및 편집 도구를 사용하는 방법:

1. 프롬프트 상자의 맨 아래에서 지정 및 편집을 클릭합니다.
2. 미리보기에서 수정하고 싶은 요소를 클릭합니다.
3. 도구 모음을 사용하여 변경합니다.
4. 선택 사항인 버튼을 클릭하여 선택한 요소를 변경하도록 모델에 요청할 수도 있습니다.

편집할 수 있는 정확한 속성은 선택한 요소의 유형에 따라 다릅니다. 일부 요소는 아래에 설명된 속성이 섞여 있을 수 있습니다.

이미지 편집

이미지를 편집할 때 가능한 작업:

• 새 이미지를 업로드하여 기존 이미지 대체
• 테두리 반경 변경
• 이미지 주변의 간격(여백 및 패딩) 변경
• 소스 코드로 이동

텍스트 편집

텍스트가 포함된 요소(예: 단락이나 제목)를 편집할 때 할 수 있는 작업:

• 오픈 소스 Google Fonts 간 전환
• 텍스트 색상 변경
• 텍스트 크기 조정
• 텍스트를 굵게 표시
• 텍스트를 이탤릭체로 표시
• 텍스트에 밑줄 표시
• 텍스트의 정렬 조정
• 텍스트 주변의 간격(여백 및 패딩) 변경
• 소스 코드로 이동

컨테이너 편집

div나 section과 같은 컨테이너 요소를 편집할 때 할 수 있는 작업:

• 배경색 변경
• 테두리 반경 변경
• 컨테이너의 간격(여백 및 패딩) 변경
• 소스 코드로 이동

편집 프롬프트

편집 도구로 요소를 선택하면 모델에게 그 요소를 직접 변경하도록 요청할 수 있습니다. 요소에 편집 가능한 속성이 없으면 기본적으로 도구 모음에 프롬프트 상자가 나타납니다. 상자가 나타나지 않으면 버튼을 클릭하여 프롬프트 상자를 표시하세요.

버전 기록

AI 채팅에서 대화할 때 작동 가능한 프로토타입이나 웹 앱의 각 버전에 대한 체크포인트가 생성됩니다. AI 채팅을 스크롤하여 작동 가능한 프로토타입이나 웹 앱의 이전 버전을 복원할 수 있습니다. 작동 가능한 프로토타입이나 웹 앱의 이전 버전에서 작업하려면 버전 기록을 사용하세요. 대화 단계에서 문제가 발생할 때도 버전 기록을 활용할 수 있습니다.

이전 버전을 복원하려면 이 버전 복원을 클릭하세요.

버전을 복원해도 대화의 모든 단계가 유지되며, 복원한 버전 이후의 버전도 유지됩니다. 언제든지 해당 버전으로 돌아갈 수 있습니다.

다음 단계는 무엇인가요?

Figma Make가 작동 가능한 프로토타입, 웹 앱 또는 인터랙티브 UI의 코드 생성을 완료하면 다음과 같은 작업을 할 수 있습니다.

• 다른 사람에게 미리보기 공유하기
• Figma 커뮤니티에 작동 가능한 프로토타입 또는 웹 앱 게시하기
• 작동 가능한 프로토타입 또는 웹 앱 게시하기

모범 사례

Figma Make를 사용할 때 확인할 만한 모범 사례는 다음과 같습니다. 일반적인 모범 사례뿐만 아니라, 첨부 파일 작업 및 문제 해결을 위한 모범 사례도 포함되어 있습니다.

일반적 모범 사례

Figma Make에서 채팅 작성기를 사용할 때 따르면 유용한 몇 가지 모범 사례가 있습니다.

• 명확하고 직접적이어야 합니다. AI 채팅에서 프롬프트를 입력할 때는 원하는 최종 결과의 유형을 구체적으로 명시하는 게 좋습니다. 원하는 것을 구체적으로 명시하면, 모델의 추측이 줄어들고, 의도하지 않은 기능을 모델이 추가하려고 시도할 가능성도 줄어듭니다.

  ✅ 프롬프트:

  메모 작성 앱을 만들어줘. 앱에서 다음과 같은 작업이 가능하면 좋겠어.

  1. 파일 이름 지정
  2. 텍스트 추가 및 편집
  3. 굵게, 기울임꼴, 취소선 등으로 텍스트 서식 지정
  4. 텍스트에 링크 추가
  5. 파일을 마크다운 형식으로 저장

  ⛔ 프롬프트:

  내가 메모를 할 수 있는 앱을 만들어줘.

• 예시를 드세요. AI 채팅에서 프롬프트를 입력할 때는 원하는 최종 결과의 예시를 제공해야 합니다. 예시를 작성할 수 있으며, Figma 디자인을 사용하여 더 많은 지침을 제공할 수도 있습니다. 이미지를 사용하여 모델이 원하는 사항을 더 자세히 제공할 수 있지만 몇 가지 제한이 있습니다. 예를 들어, 모델은 이미지에서 정확한 색상을 추출할 수 없습니다.

  ✅ 이러한 방법은 개별적으로 사용하거나 하나의 프롬프트에서 함께 사용할 수 있습니다.

  작성

  로그인 화면을 추가해줘. 로그인 화면에 공통 요소를 포함해. 예를 들어, '이메일'이라는 라벨이 붙은 사용자 이름 필드와 '계정이 필요하세요? 여기에서 가입하세요'라는 라벨이 붙은 계정 생성 링크를 포함해야 해.

  디자인

  첨부된 디자인을 쇼핑 카트의 예시로 사용해.

• 민감한 정보를 제공하지 마세요. Figma Make는 앱과 인터랙티브 UI를 만드는 데 뛰어나지만, 채팅 작성기 자체에 API 키, 이메일 및 주소, 개인 데이터, ID 번호와 같은 민감한 정보를 제공해서는 안 됩니다. API 요청을 처리할 수 있는 앱을 원한다면, 모델에게 구축하고자 하는 보안 또는 민감한 기능의 종류를 알려주세요. Figma Make는 데이터를 처리할 수 있는 백엔드를 추가하는 데 도움을 줄 것입니다.

  ✅ 프롬프트:

  개인 API에 요청을 보내고 싶어. 키를 붙여 넣을 수 있는 입력 상자를 추가해 줘.

  ⛔ 프롬프트:

  API 요청에 11qYAYKxCrfVS_7TyWQHOg 키를 사용해.

첨부 파일 작업

프롬프트에 이미지와 디자인을 첨부할 때 따를 수 있는 몇 가지 모범 사례는 다음과 같습니다.

• 디자인에서 가능한 경우 오토레이아웃을 사용하세요. 디자인이나 컴포넌트를 첨부하면 시스템이 오토레이아웃을 사용하여 콘텐츠 흐름을 잘 이해합니다.
• 레이아웃에 먼저, 기능에는 나중에 집중하세요. 원하는 레이아웃으로 시스템에 프롬프트를 보내고, 그 다음 프롬프트를 사용하여 해당 레이아웃에 기능을 추가하세요.
• 단계별로 작업하세요. 시스템에 원하는 결과를 처음부터 끝까지 완벽하게 설명하려고 하기보다는, 원하는 것에 대한 개략적인 설명으로 시작하세요. 그 다음, 작업을 하면서 점차적으로 더 세부적인 디테일과 기능을 추가하세요. 더 복잡한 디자인의 컴포넌트와 이미지를 첨부할 때는 한꺼번에 첨부하지 말고 프레임별로 첨부하세요.
• 결과를 반복해서 얻으세요. 복잡한 작동 가능 프로토타입이나 웹 앱의 경우, 원하는 요구 사항을 모두 충족하는 결과를 얻으려면 대화에서 몇 단계를 거쳐야 할 수도 있습니다. 기능이 잘못된 부분을 시스템에 알려주세요. 그 과정에서 바람직한 결과가 무엇인지 예를 들어서 설명해 주세요.
• 공통 디자인 요소와 레이아웃은 단 한번의 시도로 최고의 결과를 제공합니다. 예를 들어, 단일 기본 프레임을 사용하는 간단한 갤러리와 웹 앱은 디자인이 유사한 경우 잘 작동합니다. 더 복잡하거나 새로운 레이아웃은 추가 프롬프트가 필요할 수 있습니다.
• 데스크톱 및 전체 화면에 친화적인 결과에 집중합니다. 당사는 모바일 출력을 개선하기 위해 노력하고 있지만, 지금은 전체 화면 디스플레이에 맞는 콘텐츠가 가장 잘 작동합니다.

단일 첨부 파일

개별 첨부 파일을 작업할 때 따라야 할 몇 가지 모범 사례는 다음과 같습니다.

• 정확한 1:1 빌드 또는 스타일 참고 자료를 명시하세요. 프롬프트에서 첨부 파일을 정확히 1:1로 빌드할지, 아니면 스타일 영감/참고 자료로 사용할지 시스템에 알려주세요.
• 빌드의 각 섹션에 세부 사항을 추가하세요. 원본에 가장 가깝게 1:1로 재현하는 빌드는 원하는 사항을 더 정확하게 지정할 수 있습니다. 디자인에서 섹션별로 시도해 보세요. 모델에게 더 자세한 프롬프트를 작성하도록 도와달라고 요청할 수도 있습니다.

여러 개의 첨부 파일

여러 개의 파일을 첨부할 때는 다음과 같은 모범 사례를 따르세요.

• 화면별로 빌드하세요. 여러 디자인이나 이미지를 첨부할 수도 있지만, 최상의 1:1 결과를 얻으려면 한 번에 한두 개의 디자인만 첨부하여 빌드해 보세요. 시스템은 첨부 내용을 기억하므로, 시스템이 처음에 잘 이해를 못했다면 첨부한 것을 다시 상기시키고 다시 시도해 보세요.
• 여러 화면을 스타일 참조로 사용하세요. 원하는 스타일로 빌드하는 데 도움이 되도록 여러 디자인이나 이미지를 첨부할 수 있지만, 이미지를 1:1로 똑같이 빌드하는 것이 아니라 영감으로 사용되도록 시스템에 지정하는 것을 잊지 마세요.

문제 해결하기

문제를 해결하거나 우회하려고 할 때 따라야 할 몇 가지 모범 사례는 다음과 같습니다.

• 더 작은 디자인을 사용해 보세요. 디자인이 충실하게 재현되지 않는다면, 더 정확한 빌드를 위해 더 작은 첨부 파일을 사용해 보세요.
• 이미지를 줄이고 콘텐츠가 적은 디자인을 시도해 보세요. 이미지, SVG 또는 벡터 일러스트레이션이 많은 디자인을 첨부하면 시스템이 가끔 어려움을 겪을 수 있습니다. 이미지의 품질 또는 크기를 줄이거나, 콘텐츠가 적은 첨부 파일을 사용해 보세요.