Figma Make 사용을 위한 8가지 필수 팁

Config 2025에서는, 디자이너와 제품 팀이 몇 가지 프롬프트만으로 개념에서 작동하는 프로토타입까지 제작할 수 있는 새로운 프롬프트-투-앱 기능인 Figma Make를 선보였습니다. Figma의 디자이너 옹호자, 디자이너, 제품 관리자들은 몇 달 동안 Figma Make에 깊이 파고들어, 그 기능을 실험하고 한계를 넓혀왔습니다. 이제, 이 실무 경험을 바탕으로 Figma Make의 잠재력을 최대한 활용하도록 도와줄 8가지 실용적인 팁과 모범 사례를 영감을 주기 위한 일부 샘플 프롬프트와 함께 제공하고자 합니다.

1. 첫 번째 프롬프트에 세부 사항 집중 배치하기

디자인에 대한 세부 사항을 초기 프롬프트에 많이 포함할수록 원하는 결과를 얻기 위해 필요한 후속 대화가 줄어듭니다. 디자이너 옹호자 Ana Boyer는 "최초 생성 결과를 가능한 한 비전과 가깝게 만들고 이후에는 약간의 수정만 거치는 것이 좋습니다. 여러 번의 후속 프롬프트로 결과물을 고치면 훨씬 더 많은 시간이 걸리죠"라고 얘기합니다.

초기 프롬프트에 포함 주요 세부 사항은 다음과 같습니다.

• 작업: Figma Make가 해야 할 작업
• 컨텍스트: 이 흐름 또는 화면이 적용되는 위치
• 주요 디자인 요소: Figma Make에 포함돼야 할 중요한 기능
• 기대 동작: 인터랙션 시 이러한 요소들에 일어나는 반응
• 제약 사항: 기기, 레이아웃 또는 시각적 스타일링 등

이 전면 배치 전략에는 Figma Make에 프롬프트를 입력하기 전 제품 흐름과 사양에 대해 명확한 비전을 갖는 것뿐만 아니라, 적절한 프롬프트를 통해 그 컨텍스트를 공유하는 것도 필요합니다. 또한 AI 어시스턴트를 활용하여 당신의 프롬프트를 개선할 수도 있습니다. AI 어시스턴트는 상세한 안내와 바로 사용할 수 있는 코드 스니펫을 제공하여, 고급 효과를 위해 Make에 직접 붙여 넣을 수 있습니다.

추가 팁: 초기 프롬프트로 원하는 결과를 나오지 않는다면, 다른 문구로 작성해 보세요. 예를 들어, 두 요소를 수직으로 정렬해 줘라고 프롬프트를 입력하는 대신, 요청을 이 요소를 아래로 20픽셀 옮겨줘 또는 이 버튼들 사이를 16픽셀 간격으로 띄워 줘와 같이 재구성해 보세요.

실제 사례

Figma 디자이너 옹호자 매니저 Greg Huntoon은 여러 가지 접근 방식을 반복하여, 마우스 효과 시각화 키트의 작동 가능한 v1 버전을 만들어내는 프롬프트를 찾아냈습니다. 가장 성공적인 프롬프트에는 다음과 같은 내용이 포함되었습니다.

• 프로젝트 개요
• 플랫폼 사양
• 목적 및 사용 사례
• 핵심 기능 목록
• 디자인 스타일 가이드
• 기술 사양

Greg는 또한 자신의 프롬프트에 다음과 같은 명확한 첫 단계를 포함했습니다. 첫 번째 단계: 조절 가능한 치수와 입력 예시 호버 상태가 있는 기본 그리드 오버레이 컴포넌트를 구축합니다.

2. Figma Make로 가져오기 전에 디자인 파일 정리하기

Figma Make는 처음부터 디자인을 만드는 것(0→1)뿐만 아니라, 기존의 Figma 디자인을 인터랙티브 프로토타입으로 전환하는 것(1→1)에서도 뛰어납니다. Figma Make가 최상의 결과를 생선할 수 있도록 파일 정리와 관리에 시간을 투자하세요. 프롬프트 상자에 복사해 붙여넣을 프레임을 정리해 두어야 합니다. 입력 디자인이 깔끔할수록 출력 결과물도 좋아집니다. 올바른 프레임 제약 조건과 오토레이아웃 설정을 사용하는 것은 디자인 파일이 Figma Make로 잘 변환되도록 하는 가장 중요한 매개변수이지만, 내용이나 목적에 따라 레이어의 이름을 지정하는 것도 도움이 될 수 있습니다.

Figma Design의 기존 AI 기능 중 일부인 오토레이아웃 제안 및 AI로 레이어 이름 변경과 같은 기능을 사용하거나, 문서 정리와 같은 플러그인을 사용하여 Figma Make로 가져오기 위한 준비 과정에서 프레임을 빠르게 정리할 수 있습니다.

추가 팁: 아무리 최상의 레이어 설정을 하더라도, Figma Make는 가끔 디자인 파일을 자체 제약 조건에 맞춰 약간 문자 그대로 번역할 수 있습니다. 디자인이 미리보기 가장자리를 넘어간 경우, 다음과 같은 프롬프트를 입력하세요. 화면 크기에 맞춰 크기를 조정하고 반응형으로 만들어줘. 또는, 정해둔 구체적인 치수가 있으시다면, 다음과 같은 프롬프트를 시도해 보세요. 이것을 모바일 크기로 유지해 줘.

실제 사례

Figma 제품 관리자인 Holly Li는 Figma Design에서 먼저 강력한 오토레이아웃 구조를 설정한 덕분에, 단 한 번의 프롬프트로 음악 플레이어 마이크로 인터랙션을 성공적으로 구축할 수 있었습니다.

여기 그녀의 요청입니다: 이 CD 플레이어를 인터랙티브하게 만들어줘. 트랙을 재생할 때 CD가 회전해야 해. 고마워!

3. 복잡한 프로젝트를 관리 가능한 단계로 나누기

확고한 첫 번째 프롬프트가 있더라도, 복잡한 프로젝트에는 여러 개의 추가 후속 프롬프트가 필요할 수 있습니다. 모든 것을 한꺼번에 고치려 하기보다는 후속 작업을 더 작고 집중적인 단계로 나누는 것이 더 나은 결과를 가져옵니다. "범위가 작을수록 LLM이 더 자세해질 수 있습니다"라고 제품 디자이너인 Tammy Taabassum은 말합니다. Figma Make가 얼마나 잘 작동하는지는 요청이 얼마나 크고 복잡한지, 그리고 언어가 얼마나 구체적인지에 달려 있습니다.

큰 규모의 상세한 첫 번째 프롬프트는 작업에 대한 기초를 마련하는 데 도움이 되며, 그 후에 조금씩 작은 변경을 적용하는 것이 좋습니다. 초기 프롬프트 후 이러한 점진적인 접근 방식을 사용하면 복잡한 인터페이스를 단계적으로 제작하고, 여러 페이지의 흐름을 프레임별로 구축하며, 전체 디자인 방향을 제어할 수 있습니다.

추가 팁: 각 요소에 대해 별도의 코드 폴더를 생성하도록 Figma Make에 명시적으로 지시해서 이러한 단계별 접근 방식을 한 단계 더 발전시켜 보세요. 이렇게 하면 코드 구조를 개선하고, 여러 프롬프트에서 유지보수할 수 있게 되며, 가장 복잡한 빌드에서 발생할 수 있는 오류를 격리할 수 있습니다.

실제 사례

온보딩 흐름이 포함된 모든 기능을 갖춘 금융 대시보드를 만들기 위해 알파 테스터 Antonella Rodriguez는 150개 이상의 프롬프트를 사용했습니다. 그녀는 필요로 하는 핵심 기능들의 개략적인 설명, 원하는 레이아웃, 시각적 기준점을 제시한 후, v1 출력물을 정리하고 각 개별 페이지의 내용을 살펴보며 하나씩 채워 나갔습니다.

Antonella가 사용한 몇 가지 후속 프롬프트:

• 저널 페이지에 메모를 추가할 수 있는 스티커 메모를 추가해 줘.
• 재정 페이지에 카테고리, 지출 유형, 달러 금액(USD), 페소 금액, 메모, 날짜가 포함된 표를 추가해 줘.
• USD와 ARS 중 어떤 통화를 사용 중인지 설명할 수 있는 확인란을 추가해 줘.

올해의 Config London 키노트를 위한 3D 인터랙티브 세계를 만들기 위해, 제품 디자이너 Tammy Taabassum은 여러 다양한 요소를 통해 작업했습니다. 유명 랜드마크가 포함된 3D 런던 탐색기를 만들라는 첫 프롬프트를 입력한 후, Tammy는 Figma Make에 빅 벤, 런던 아이, 타워 브릿지 등 각 3D 랜드마크를 별도의 코드 파일로 분리하도록 지시했습니다. 이는 전체 파일의 환경에 영향을 주지 않고 개별 컴포넌트를 더 쉽고 더 빠르게 개선할 수 있게 했습니다.

Tammy의 프롬프트:빅벤 코드를 새 파일로 옮길 수 있어?

4. 자체 컴포넌트를 활용해 시각적 일관성 확보하기

Figma Make에서 작업할 때, 컴포넌트 또는 여러 컴포넌트가 있는 프레임을 복사하여 붙여넣는 것은 매우 강력할 수 있습니다. 오토레이아웃과 일관된 레이어 이름이 적용된 라이브러리의 컴포넌트들은 Make에서 아주 잘 변환됩니다.

또한 Figma Make의 프롬프트 상자에 컴포넌트를 시각적 참조 자료로 붙여 넣을 수도 있습니다. 인터페이스의 일부가 어떻게 생겼는지 파악함으로써, Figma Make는 그 스타일과 간격에 맞출 수 있으며 추가적인 설명이나 명확한 지시 없이도 효과적으로 디자인 시스템 규칙을 따를 수 있습니다.

추가 팁: Figma Make의 지정 및 편집 기능은 v1에서 있는 일반적인 컴포넌트를 라이브러리의 특정 UI로 교체하는 훌륭한 방법입니다. 미리보기에서 요소를 선택하고, 프롬프트 박스에 본인의 컴포넌트를 붙여넣은 뒤 다음과 같은 프롬프트를 입력하세요. 이 컴포넌트를 이 디자인으로 교체해 줘.

실제 사례

디자이너 옹호자 팀은 최신 Material 3 Design 키트의 컴포넌트를 사용하여 아래의 생산성 앱을 구축했습니다. 이 앱을 만들기 위해 그들은 디자인 시스템 파일에서 두 개의 컴포넌트를 Figma Make에 붙여넣고 다음과 같 프롬프트를 입력했습니다.

사용자가 작업을 관리하고 우선순위를 지정하며, 일정을 관리하고 텍스트 메모와 음성 메모를 수집할 수 있도록 돕는 생산성 앱을 구축해 줘. 첨부된 탐색 컴포넌트를 사용하고 내용은 필요에 맞게 조정해 줘. 캘린더 탭에는 첨부된 캘린더 컴포넌트를 사용해 줘. 나머지 페이지들은 이러한 컴포넌트들의 시각적 스타일과 일치해야 해.

그런 다음 팀은 지정 및 편집 기능을 통해 컴포넌트를 선택하고, 이를 Material 3 디자인 시스템 변형으로 교체하도록 Figma Make에 지시하여 기초적인 v1 버전을 향상했습니다.

5. 지정 및 편집 도구를 사용하여 시각적 조정하기

지정 및 편집 도구를 사용하여 요소를 지정하고 클릭한 다음 도구 모음이나 추가 프롬프트를 사용해 편집하여 색상 또는 글꼴 변경과 같은 빠르고 기본적인 조정을 할 수도 있습니다. 이러한 직접 조작을 통해 색상, 코너 반경, 간격 및 타이포그래피와 같은 시각적 속성을 원활하게 즉시 변경할 수 있습니다.

추가 팁: 지정 및 편집 도구를 사용할 때, 사용할 수 있는 편집 옵션은 선택한 요소 유형에 따라 다릅니다. 텍스트 요소는 글꼴, 색상 및 서식을 조정할 수 있는 반면, 컨테이너는 배경색과 간격 조정에 중점을 둡니다. 이미지는 자체적인 옵션 세트를 가지고 있으며, 대체 이미지를 업로드하는 기능도 포함되어 있습니다.

실제 사례

아래의 음악 플레이어 예제에서, 지정 및 편집 기능은 글꼴 크기와 서식 같은 세부 사항을 빠르게 조정하는 데 사용됩니다.

6. 빠른 편집을 위해 코드 탭에 액세스하기—개발 기술 필요 없음

Figma Make에서 구축할 때, 시각적이지 않은 일부 작은 변경 사항은 코드 내에서 편집하는 것이 가장 좋습니다. 소스로 이동 버튼은 요소 뒤의 코드를 찾아주는 바로가기 버튼으로, 내부 구조를 들여다보고 값을 조정할 수 있게 해줍니다. Figma Make는 모든 코드를 이해하기 쉬운 방식으로 라벨링하므로 코딩 경험이 없는 사람들도 빌드 내에서 어느 부분의 코드가 어떤 동작을 제어하는지를 쉽게 파악할 수 있습니다.코드 내에서 수정된 값은 별도의 새로 고침 없이 미리보기에 즉시 반영되어, 다양한 제품 동작을 빠르게 테스트하기가 매우 수월합니다.

추가 팁:소스로 이동을 사용하여 페이지 수준의 설정에 접근할 수 없는 경우, cmd+F (Mac) 또는 Ctrl+F (PC) 바로가기를 사용해 코드 폴더 내의 시맨틱 레이어들을 탐색해 보세요.

실제 사례

이 방법은 애니메이션과 같은 속성을 빠르게 반복하는 데에 매우 효과적입니다. 만약 우리가 Holly의 음악 플레이어 파일에서 레코드가 회전하는 방식을 테스트하고 싶다면, 간단하게 요소의 소스 코드로 이동하여 코드 베이스에서 속도 매개변수를 빠르게 찾아낸 뒤, 미리보기에서 딱 원하는 느낌이 날 때까지 코드에서 수동으로 속도를 조정할 수 있습니다.

7. 실제의 데이터를 Make에 통합하기

동적인 프로토타입을 구현하기 위해 Figma Make는 주가부터 일기 예보까지 맞춤형 데이터나 실시간 데이터를 사용하는 인터페이스 구축을 지원합니다. API에 연결하지 않고 Figma Make 파일에 데이터를 가져오는 몇 가지 방법이 있습니다.

• 표시되길 기대하는 데이터의 유형을 Figma Make에 요청하세요.
• 데이터 세트를 더 세밀하게 제어하고 싶다면, 인터페이스 내에 데이터 가져오기 진입점을 포함하도록 Figma Make에 명시적으로 지시하세요.

추가 팁: 필요할 경우, Figma Make는 브라우저가 접근할 수 있는 모든 컴퓨터 하드웨어에 연결할 수 있다는 점을 명심하세요. 제품 디자이너 Daniela Muntyan의 미니 포토부스 앱 예시처럼, 이는 다양한 유형의 키보드 입력, 음성 입력, 심지어 카메라 입력을 포함하는 인터랙션 프로토타입 제작의 가능성을 열어줍니다.

실제 사례

제품 디자이너 Ryan Reid가 MTA API를 사용하여 뉴욕 지하철 시간 추적기를 만들었을 때, Figma Make는 API 연결 없이도 자동으로 지하철 노선과 역에서 데이터를 수집하고 실시간 열차 도착을 모방하는 모의 데이터를 스마트하게 생성했습니다.

Ryan의 프롬프트: 뉴욕 MTA의 API를 사용하여 뉴욕 지하철 시간을 추적하는 웹사이트를 만들어줘. 사용자가 노선과 역을 선택하면 모든 열차 시간을 시간순으로 볼 수 있어야 해. 웹사이트는 단일 페이지여야 하며, 노선과 역을 선택하면 오른쪽에 더 많은 정보가 나타나게 해서 탐색을 깔끔하고 단순하게 만들어 줘.

마찬가지로, Figma 옹호 팀도 내부 GPT를 사용하여 러닝 세션의 가짜 데이터 세트를 생성하고 .CSV 파일로 다운로드한 후, 마라톤 트레이너 내부에 업로드 메커니즘을 추가하도록 Figma Make에 지시했습니다. 그 결과 올바른 형식을 사용하여 업로드된 모든 .CSV 데이터베이스에 동적으로 적응하는 대시보드 디자인이 완성되었습니다.

프롬프트 샘플:

시간에 따라 내 마라톤 훈련의 진행 상황을 보여주는 분석 대시보드를 만들고 싶어.

대시보드에는 핵심 수치와 시간에 따른 진행 상황을 보여주는 선 그래프를 포함하여 내 최근 훈련 요약 정보가 표시되어야 해. X축은 훈련 날짜, Y축은 각 날짜별 러닝 거리로 설정해 줘.

분석 내용이 나타나기 전까지 페이지는 비어 있어야 하며, .csv 파일을 업로드하도록 안내하는 입력 예시를 보여줘. 그런 다음 distance_km, time_minutes, avg_pace, heart_rate, calories_burned, elevation_gain과 같은 정보로 구성된 CSV 파일을 받아서 위에 설명한 대시보드로 변환해 줘.

8. Figma Make를 핸드오프 어시스턴트로 전환하기

프로덕션 환경에서 바로 사용할 수 있는 코드 스니펫을 생성하는 인터페이스를 만들도록 Make에 지시함으로써, 디자인 선택을 생성하고 개발자와 공유할 코드 출력을 만드는 나만의 핸드오프 도구를 만들 수 있습니다. 이러한 접근 방식은 다음 단계로 넘어가기 전, 더 시도하고 실험하며 반복할 수 있는 여유를 제공합니다.

추가 팁: Figma Make에서 생성된 코드가 개발 요구 사항에 맞지 않는 경우, 대신 채팅에서 특정 요소와 동작을 일반적인 의사코드로 제공해달라고 지시할 수 있습니다. 샘플 프롬프트: 코드는 있는 그대로 유지하되, 이 부분이 어떻게 구현되었는지 의사코드로 설명해 줘. 가능하다면 (플랫폼 이름 삽입)을 위한 특정 플랫폼 고려 사항도 상세히 알려줘.

실제 사례

디자이너 옹호자 Luis Ouriach는 자신만의 OKLCH 팔레트 빌더를 제작할 때 Figma Make를 핸드오프 어시스턴트로 사용했습니다. 그의 앱은 기본 브랜드 색상을 시작으로 전체 색상 시스템을 생성할 수 있게 해주며, 개발자에게 즉시 전달할 수 있는 CSS 변수와 Tailwind CSS 출력을 포함합니다.

Luis의 프롬프트:기본 브랜드 색상을 입력하면 녹색, 파란색, 빨간색, 노란색, 주황색, 회색 등 일반적인 색상들에 대해 완성된 형태의 램프를 생성하는 OKLCH 색상 팔레트 빌더를 만들어줘. 각 색상 램프 내에 몇 개의 색상을 넣을지도 결정할 수 있게 해 줘(예: 각 색상별로 서로 다른 색조 3개씩).

마찬가지로, 개발자 옹호자 Jake Albaugh는 특정 UI 요소(이 경우 럭셔리 은행 카드)에 적용된 애니메이션을 개선하기 위해 자신만의 미니 앱을 구축했습니다. Jake는 시각적 효과 제어와 애니메이션 매개변수의 JSON 출력 기능을 포함하도록 Figma Make에 요청하여 자신이 제작 중인 다른 제품에 재사용할 수 있는 코드를 만들었습니다.

Jake의 프롬프트 중 하나: 입력이 바뀔 때마다 모든 매개변수(각 축의 최소/최대 기울기 포함)를 설명하는 JSON 코드 출력이 나타나도록 해 줘.

탐색 과정에서 스스로에게 여유를 가지세요

다른 모든 AI 도구와 마찬가지로, 프롬프트 작성은 자신에게 맞는 방식을 찾을 때까지 시행착오를 겪는 과정입니다. 이제 풀 시트 권한을 가진 모든 Figma 사용자가 Figma Make 베타 버전을 사용할 수 있게 되었으므로, 이 도구를 사용하여 새로운 아이디어를 현실로 구현하는 창의적인 방법을 보게 되어 기쁩니다.

우리는 이 도구가 가진 잠재력의 일부분을 이제 막 확인하기 시작했을 뿐이며,이를 여러분과 함께하게 되어 기쁩니다.

Ready to dive deeper? We followed up with seven tips for using Figma Make credits more efficiently.