프롬프트에 디자인과 이미지 첨부하기

시작하기 전에

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

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

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

Figma Make를 사용하여 작동 가능한 프로토타입, 웹 앱 및 인터랙티브 UI를 만들 때, 프롬프트에 디자인과 이미지를 첨부하여 AI가 만족스러운 결과를 내도록 안내할 수 있습니다.

프롬프트당 최대 3개의 첨부 파일을 추가할 수 있으며, 디자인과 이미지 파일을 섞어 첨부할 수 있습니다.

디자인 첨부

대화에서 프롬프트에 디자인을 첨부하면 Figma Make에 사용된 AI 모델이 디자인을 해석하고 레이어와 콘텐츠를 기능적 코드로 변환할 수 있습니다. 디자인의 형식(텍스트 및 이미지 포함)을 최대한 정확히 반영하는 동시에 사용자의 지침 및 기타 첨부 파일도 준수하여 결과를 내려고 노력합니다.

Figma 디자인을 프롬프트에 첨부하는 방법은 두 가지가 있습니다.

• 프롬프트 상자에서 +를 클릭한 후 Figma에서 가져오기를 선택하고 첨부할 디자인, 컴포넌트 또는 커뮤니티 파일을 검색합니다.

• Figma Design 파일에서 디자인을 복사하여 프롬프트 상자에 붙여 넣습니다.

디자인 검색

Make를 생성하거나 편집하고 Figma에서 가져오기를 클릭하면 디자인 첨부 모달이 나타납니다. 디자인 첨부 모달에서 팀과 오거니제이션의 프로젝트 속 컴포넌트와 프레임을 검색할 수 있습니다.

디자인과 커뮤니티 콘텐츠를 찾으려면 검색 상자에 입력하세요.

디자인 첨부 모달의 검색 상자는 비주얼 검색도 지원합니다. 비주얼 검색을 사용하려면 검색창에서 비주얼 검색을 클릭하고, 지침으로 사용할 이미지를 선택하세요.

더 보기를 클릭하여 검색어에 맞는 컴포넌트나 다른 디자인을 찾아보세요.

컴포넌트를 선택할 때 클릭할 수 있는 항목:

• 프롬프트 상자에 직접 추가할 수 있는 삽입
• 원본 디자인 파일을 새 탭에서 열 수 있는 메인 컴포넌트로 이동

기타 디자인에서 디자인을 선택할 때 클릭할 수 있는 항목:

• 프롬프트 상자에 추가할 수 있는 디자인 첨부
• 원본 디자인 파일을 새 탭에서 열 수 있는 파일 열기
• 디자인을 크게 미리 볼 수 있는 미리보기

오거니제이션에 속해 있다면, 리소스로 승인되고 기본적으로 사용하도록 설정된 라이브러리가 검색에 나타납니다.

커뮤니티를 클릭하여 검색어와 일치하는 Figma 커뮤니티의 디자인을 탐색할 수도 있습니다.

오거니제이션의 다른 디자인과 유사하게, 커뮤니티 디자인을 선택할 때 클릭할 수 있는 항목:

• 프롬프트 상자에 추가할 수 있는 디자인 첨부
• 커뮤니티 목록을 새 탭에서 열 수 있는 커뮤니티에서 열기
• 디자인을 크게 미리 볼 수 있는 미리보기

이미지 첨부

모델이 작동 가능한 프로토타입이나 웹 앱을 생성할 때 지침으로 활용하도록 이미지를 제공할 수 있습니다. 모델은 이미지를 똑같이 만들 수 없습니다. 모델이 취하는 방향을 제안하는 이미지라고 생각해야 합니다. 모델은 이미지의 텍스트, 색상, 요소의 위치를 최대한 재현하려고 하지만, 결과는 이미지에 표현된 것과 다를 수 있습니다.

프롬프트에 이미지를 첨부하는 방법에는 두 가지가 있습니다.

• 프롬프트 상자에서 +를 클릭한 다음  이미지 업로드를 클릭하고 시스템의 파일 브라우저에서 이미지를 선택합니다.

• 이미지를 복사하여 프롬프트 상자에 붙여 넣습니다.

첨부 파일 작업의 모범 사례

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

일반적 모범 사례

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

단일 첨부 파일

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

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

여러 개의 첨부 파일

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

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

문제 해결하기

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

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