Figma Make: 5가지 핵심 기능은 알아두자
Figma Make로
아이디어를 실현하는 세상이 열리다
Figma Make는 단순한 기능 업데이트를 넘어 디자인과 개발의 패러다임을 근본적으로 바꾸는 생성형 AI 도구다. 텍스트 프롬프트, 스크린샷, 심지어 기존 Figma 디자인 파일만으로 완벽하게 작동하는 코드를 생성함으로써, 디자이너와 개발자 사이의 오랜 간극을 메우고 아이디어 구상부터 구현까지의 과정을 통합해준다. 과거 제품 개발 과정은 디자인, 프로토타이핑, 코딩 등 각기 다른 도구를 사용하는 워크플로우를 따랐다.
Figma Make 활용 이미지Figma Make는 디자인, 코딩, 테스트, 반복에 이르는 전 과정을 단일 도구 안에서 해결함으로써 이러한 과정을 통합해준다. Figma Make는 디자이너에게 아이디어를 즉시 기능적 프로토타입으로 구현할 수 있는 강력한 역량을 부여한다. 디자이너는 더 이상 시각적 결과물만 만드는 사람이 아니라, 개발 자원에 의존하지 않고도 초기 단계에서 기능적 경험을 직접 구축하고 테스트하는 '프로덕트 매이커'가 된다. 이번 글에서는 Figma Make 활용을 도와줄 수 있는 핵심 기능 다섯 가지를 알아보도록 하겠다.
핵심 기능 1:
멀티모달 프롬프트로 UI 디자인 제작
Figma Make를 효과적으로 사용하기 위해서는 프롬프트를 작성하는 기술, 즉 AI와 효과적으로 대화하는 능력이 필수적이다. 이는 단순히 명령어를 입력하는 행위를 넘어, 원하는 결과를 얻기 위해 AI를 안내하고, 수정하고, 다듬어가는 과정이다. 성공적인 프롬프팅을 위해서는 "명확하고 직접적으로" 요구사항을 전달하고, 예시를 제공하며, 한 번에 모든 것을 만들기보다 단계를 나누어 접근하는 것이 중요하다. 레이아웃과 같은 구조를 먼저 잡고 기능성을 추가하는 점진적 구체화 방식이 권장된다.
Figma Make는 여러 형태의 입력을 받아들여 유연한 작업이 가능하다. 자연어 텍스트 프롬프트, 업로드된 이미지 파일(PNG, JPG 등), 그리고 Figma 프레임 및 컴포넌트를 직접 붙여넣거나 가져오는 방식 모두를 지원한다. 각 입력 방식은 목적에 따라 전략적으로 활용될 수 있다. 텍스트는 "이러한 기능을 가진 노트 앱을 만들어줘"와 같이 처음부터 아이디어를 구체화하고 구조를 정의할 때 가장 유용하다. 이미지는 스케치나 스크린샷을 초기 시안으로 빠르게 변환하는 등 시각적 레퍼런스가 필요할 때 효과적이지만, AI가 이미지의 정확한 색상 값을 완벽하게 인식하지는 못할 수 있다. 가장 강력한 방식은 기존 Figma 디자인을 입력하는 것이다. 특히 오토 레이아웃(Auto Layout)을 사용해 잘 구조화된 디자인을 제공하면, AI는 매우 정확하게 작동하는 기능적 결과물을 생성할 수 있다.
복잡한 결과물을 단 하나의 프롬프트로 만들려는 시도는 좋은 결과를 얻기 어렵다. Figma Make와의 작업은 대화를 통한 반복적 개선 과정에 가깝다. 예를 들어, 대시보드를 제작하는 과정은 다음과 같이 단계적으로 진행될 수 있다. 첫째, "헤더, 메인 콘텐츠 영역, 플로팅 액션 버튼이 있는 모바일 우선 대시보드 레이아웃을 만들어줘"와 같이 전체 구조를 요청한다. 둘째, "대시보드에 월간 활성 사용자 수와 매출 추세를 보여주는 분석 카드를 채워줘"라고 콘텐츠를 추가한다. 마지막으로, "플로팅 액션 버튼을 누르면 새 항목을 추가하는 모달 창이 열리게 해줘"처럼 구체적인 기능성을 부여한다. 이러한 단계적 접근은 AI가 각 요청에 집중하게 하여 더 정확하고 예측 가능한 결과물을 만든다.
이러한 프롬프팅 과정은 좋은 디자인 기획서나 제품 요구사항 문서(PRD)를 작성하는 과정과 매우 유사하다. 디자이너는 구조, 기능, 사용자 흐름에 대한 생각을 명확하게 정리해야만 효과적인 프롬프트를 작성할 수 있기 때문이다. 일부 고급 워크플로우에서는 ChatGPT를 이용해 PRD를 Figma Make에 최적화된 프롬프트로 변환하기도 한다. 결국 AI에게 '무엇을 만들지' 지시하는 행위 자체가 디자이너의 전략적 사고를 단련시키는 도구가 되는 셈이다. 이 과정에서 Figma의 오토 레이아웃은 AI가 디자인의 구조적 관계를 이해하는 공용어(lingua franca) 역할을 한다. 오토 레이아웃으로 정의된 규칙들은 AI가 쉽게 해석하여 반응형 코드로 변환할 수 있는 구조화된 정보이기 때문에, 정교하게 오토 레이아웃을 적용한 디자인은 AI의 작업 효율과 결과물의 정확도를 극대화한다.
핵심 기능 2:
제품 고유의 룩앤필 유지하기
Figma Make가 제품의 고유한 룩앤필을 유지하는 과정은 두 단계로 이루어진다. 먼저, Figma Design 파일에서 기존에 구축된 라이브러리를 내보낸다. 이 과정에서 Figma Make는 라이브러리의 스타일 정보를 담은 CSS 파일을 자동으로 생성한다. 다음으로, Figma Make 프로젝트 내에서 해당 라이브러리를 선택하여 연결한다. 이 간단한 과정을 통해 AI는 해당 프로젝트의 시각적 언어, 즉 색상 팔레트, 타이포그래피, 변수, 테두리 반경과 같은 핵심 디자인 요소를 학습하게 된다. 이렇게 생성된 globals.css 파일은 이후 모든 AI 생성물의 시각적 기준이 된다. 이 기능은 유료 요금제에서 편집 권한을 가진 사용자만 이용할 수 있다.
globals.css 파일 확인하기라이브러리 연동 후에도 디자이너는 여러 단계의 제어권을 갖는다. 생성된 globals.css 파일을 직접 편집하여 프로젝트에 특화된 스타일을 즉시 수정할 수 있다. 더 나아가, guidelines.md라는 마크다운 파일을 추가하여 AI가 따라야 할 규칙과 맥락을 자유로운 텍스트 형식으로 제공할 수 있다. 예를 들어, "모든 주요 버튼은
--primary-blue 색상을 사용해야 한다" 또는 "카드 컴포넌트는 항상 16px의 외부 여백을 가져야 한다"와 같은 구체적인 디자인 논리를 AI에게 지시할 수 있다. 이는 단순한 스타일 적용을 넘어 디자인 시스템의 규칙을 정하는 제어 방식이다.
guidelines.md 문서 확인하기이 기능은 생성형 AI에 브랜드 고유성을 잃지 않고 디자인이 획일화되는 것을 방지해주는 역할을 한다. 규모가 큰 기업이나 확고한 브랜드 정체성을 가진 조직이 안심하고 Figma Make를 도입할 수 있게 만드는 결정적인 요소다. 다만, 현재 기술은 디자인 시스템의 모든 세부 사항을 완벽하게 변환하는 것이 아니라, 복잡한 변수 구문을 단순화하여 CSS로 추출하는 정도라는 점도 감안해야 하겠다. 그래서 이제 디자이너는 AI가 디자인 시스템을 얼마나 정확하게 해석했는지 검증하고, 자동 추출 과정에서 누락될 수 있는 맥락적 차이를를 guidelines.md 파일을 통해 보완하는 부분도 잘 점검해줘야 한다.
핵심 기능 3:
AI 생성물/코드 편집 및 다듬기
생성된 프로토타입을 수정하는 방식은 크게 두 가지다. 첫째, 후속 프롬프트를 통해 대화 방식으로 수정할 수 있다. "AI가 기능을 잘못 이해한 부분을 주저 없이 지적하라"는 가이드라인처럼, 자연어 대화를 통해 구조적, 기능적 변경을 요청할 수 있다. 둘째, '편집 도구'를 사용하여 캔버스 위의 특정 요소를 직접 가리키고 여백, 색상, 텍스트 속성 등을 즉시 변경하거나, 해당 요소에만 적용되는 맥락적인 프롬프트를 입력할 수 있다. 이 두 가지 방식의 조합은 유연한 워크플로우를 제공한다. "레이아웃을 3단 그리드로 변경해줘"와 같은 큰 구조 변경은 대화형으로, "이 버튼의 안쪽 여백을 12px로 늘려줘"와 같은 세밀한 시각적 조정은 직접 조작으로 처리할 수 있다.
Figma Make에서 Code 확인하기Figma Make는 디자이너를 위한 '노코드(no-code)' 도구이지만, 그 내부가 완전히 닫힌 블랙박스는 아니다. 화면에는 라이브 프리뷰와 함께 AI가 생성한 실제 코드(주로 React, Tailwind CSS 기반)가 나란히 표시된다. 디자이너와 개발자는 이 코드를 동시에 수정하며 협업할 수 있고, 최종 코드는 zip 파일로 다운로드하여 활용할 수 있다. 이는 AI가 처리하기 어려운 복잡한 상호작용을 구현하거나, 개발자와의 긴밀한 협업이 필요할 때 궁극적인 제어권을 제공한다. 이 기능 덕분에 Figma Make는 단순한 디자이너용 툴을 넘어, 디자인과 개발을 잇는 강력한 가교 역할을 수행한다.
핵심 기능 4:
실제 데이터를 바탕으로 앱 구축
Figma Make는 백엔드 연동 기능을 통해 프로토타입이 실제 데이터를 사용하도록 함으로써, 이를 정적인 목업이 아닌 살아있는 애플리케이션처럼 느끼게 만든다. 실제 백엔드에 연결된 프로토타입은 단순한 시뮬레이션이 아니라, 실제 제품의 경량화된 버전이다. 이를 통해 훨씬 의미 있는 사용자 테스트가 가능해지며, 출시 후에나 발견될 법한 사용성 문제들을 조기에 발견하고 해결할 수 있다.
Figma Make는 오픈소스 백엔드 플랫폼인 Supabase와의 통합을 통해 데이터베이스, 사용자 인증, 파일 저장소 등 완전한 백엔드 기능을 제공한다. 이 연동은 "사용자 로그인 기능 추가"나 "이 노트 저장하기"와 같은 간단한 프롬프트에 의해 자동으로 트리거될 수 있다. 이는 디자이너가 백엔드 전문가가 될 필요 없이, 선언적인 프롬프트만으로 복잡한 기능을 프로토타입에 추가할 수 있음을 의미한다. Supabase가 기술적인 설정을 모두 처리하므로, 비개발자도 백엔드 기능에 쉽게 접근할 수 있다.
프롬프트로 Figma Make에서 Superbase 백엔드 연결하기백엔드 연동의 구체적인 활용 사례는 다양하다. 사용자 인증 기능을 추가하여 회원가입부터 로그인 상태까지 전체 사용자 여정을 테스트할 수 있다. 데이터베이스를 연동하면 영업 담당자가 잠재 고객 정보를 기록하고 필터링하는 CRM(고객 관계 관리) 도구처럼, 사용자가 생성한 동적 콘텐츠를 UI가 어떻게 처리하는지 확인할 수 있다. 또한, JSON이나 CSV 파일의 데이터를 가져와 대시보드를 실제 데이터로 채울 수도 있다. 파일 저장소 기능으로는 사용자가 이미지나 PDF 같은 파일을 업로드하는 흐름과 그 결과물이 앱에 어떻게 표시되는지 테스트할 수 있다. 이렇게 작업된 프로토타입을 통해, 디자이너/개발자사용자들은 실제 데이터가 연동된 기능적 프로토타입을 통해서는 자신의 데이터를 가지고 실제 과업을 수행하며 피드백을 제공한다. 이는 제품의 외형이 아닌 '작동 방식'에 대한 깊이 있는 행동적 피드백을 이끌어내며, 핵심 기능의 가치를 훨씬 더 빠르고 정확하게 검증할 수 있게 한다.
핵심 기능 5:
Figma Sites로 가져와 바로 게시
Figma Make로 만든 프로젝트는 통합된 Figma Sites 기능을 통해 웹에 라이브 사이트로 즉시 게시할 수 있다. 이는 아이디어 구상, 디자인, 기능 구현에 이어 배포까지의 모든 과정을 Figma라는 단일 플랫폼 안에서 완료할 수 있음을 의미한다. 특정 유형의 프로젝트에서는 더 이상 외부 호스팅 플랫폼이나 복잡한 배포 절차를 거칠 필요가 없어진다. 이 기능은 Figma Make가 단순한 프로토타이핑 도구를 넘어 경량 웹 개발 플랫폼으로 확장되었음을 보여주는 마지막 퍼즐 조각이다. 게시 버튼을 누르면, Figma는 figma.site로 끝나는 무작위 도메인 주소를 자동으로 생성해주며, 원할 경우 사용자가 소유한 맞춤 도메인으로 변경할 수도 있다. 게시 설정에는 사이트 제목, 검색엔진 최적화(SEO)를 위한 메타 데이터, 소셜 미디어 공유 시 표시될 미리보기 이미지, 심지어 비밀번호 보호 기능까지 포함되어 있다. 이는 Figma가 일회성 프리뷰가 아닌, 실제 웹사이트 운영에 필요한 실용적인 기능들을 고려했음을 보여준다.
디자인부터 배포까지의 워크플로우가 극적으로 단축되면서 얻는 가장 큰 전략적 이점은 '속도'다. 프리랜서가 자신의 포트폴리오 사이트를 만들거나, 스타트업이 최소 기능 제품(MVP)을 구축하거나, 마케팅팀이 A/B 테스트용 랜딩 페이지를 제작하는 등의 작업이 몇 주가 아닌 몇 시간 단위로 가능해진다. 단일 플랫폼 내에서 아이디어를 구상하고, 제작하며, 실제 시장에 배포하여 데이터를 수집하고 반복하는 사이클을 기존의 분업화된 방식보다 훨씬 빠르게 실행할 수 있게 된 것이다. 이 기능은 디자이너에게 전례 없는 수준의 자율성을 부여한다. 포트폴리오, 마케팅 사이트, 간단한 웹 앱과 같은 프로젝트의 경우, 이제 디자이너 혼자서 컨셉 구상부터 실제 배포까지 전 과정을 관리할 수 있게 된다. 이는 개발 핸드오프나 배포 일정을 기다릴 필요 없이 아이디어를 즉시 세상에 선보일 수 있음을 의미하며, 디자인뿐만 아니라 기능적 디지털 제품을 직접 구축하고 배포할 수 있는 '풀스택 디자이너'로 확장시켜 준다.
Figma Make와 함께
아이디어를 마음껏 실현해보자
Figma Make의 진정한 힘은 소개된 5가지 핵심 기능이 개별적으로 작동하는 것이 아니라, 서로 유기적으로 연결되어 강력한 시너지를 창출하는 데 있다. 디자이너는 프롬프트를 사용해 아이디어를 생성하고, 이 과정에서 조직의 브랜드 가이드라인을 즉시 적용할 수 있다. AI가 생성한 초안은 대화와 직접 조작을 통해 자유롭게 편집하고 다듬으며, 실제 데이터를 연동하여 현실적인 사용자 테스트를 진행한다. 마지막으로, 완성된 결과물은 클릭 한 번으로 웹에 게시하여 세상에 선보인다. 이 모든 과정이 단 몇 시간 안에 이루어질 수 있다는 점은 디자인과 개발의 속도를 재정의한다.
물론 Figma Make는 아직 초기 단계의 도구이며 명확한 한계도 존재한다. 매우 독창적이거나 복잡한 상호작용을 구현하는 데 어려움을 겪을 수 있으며, 디자인 시스템 연동 역시 아직은 모든 디테일을 완벽하게 반영하지 못하는 '단순화된 버전'이다. 하지만 이러한 한계는 실패가 아닌 앞으로의 발전 가능성을 시사한다. Figma Make는 이러한 초기 단계의 제약에도 불구하고, 디자인과 개발의 통합, 속도, 협업 방식에 있어 패러다임의 변화를 만들어냈다. 디자이너라면 Figma Make를 잘 이해하고 활용해보자.
Figma Make와 관련 AI 활용법을 학습하고 AI&UI 디자인 관련 자격증도 취득하고 싶다면?
https://onoffmix.com/event/331256
AI 디자이너들과 함께 소통하며 성장하고 싶다면?
