피그마 #36
이번 강의에서는 피그마(Figma)의 Make 기능을 단독으로 다루며, 기획자와 개발자 모두에게 유용한 실전 활용법을 소개합니다. Make는 자연어 프롬프트를 기반으로, UI와 코드를 동시에 생성해주는 AI 기능입니다.
단순히 시각적 프로토타이핑을 넘어, Tailwind CSS + React 코드까지 자동 생성되어 실제 웹 개발에 즉시 활용할 수 있습니다. 이번 영상에서는 다음과 같은 내용을 단계별로 실습합니다.
- Make 기능 개요 및 작동 원리
- 기획 단계에서 화면 구성 시각화
- Figma 디자인 → 반응형 코드 자동 변환
- Claude 기반 AI 모델의 코드 정확도 비교
기획자는 아이디어를 빠르게 실현할 수 있고, 개발자는 신뢰도 높은 코드 기반으로 협업할 수 있습니다. 아직 베타지만, Figma가 코드 중심의 디자인-개발 통합 플랫폼으로 확장 중이라는 점에서 꼭 주목해야 할 기능입니다.
Make 기능이란?
Make는 Figma 안에서 바로 웹사이트를 생성하고 퍼블리시할 수 있는 AI 기반 기능입니다.
Tailwind CSS + React를 기반으로 코드를 생성하며, 디자인뿐 아니라 실제 코드 구현이 가능한 수준의 UI 구조를 만들어줍니다. 처음 이 기능을 접했을 땐 약간 뜬금없다고 느껴질 수 있지만, 실제로는 두 가지 상황에서 높은 활용도를 가질 수 있습니다.
Make 기능, 이렇게 활용해보세요
1. 기획 단계에서 아이디어 시각화
서비스나 앱 아이디어를 구체화하기 전에 프롬프트 기반으로 빠르게 화면을 만들어보는 용도로 매우 유용합니다.
예시 프롬프트
“음악 재생해주는 플레이어를 만들고 싶어. 사운드클라우드에서 음악을 불러오고, 스타일은 미니멀하고 핵심 기능만 있도록!”
이런 식으로 자연어로 입력하면, AI가 자동으로 UI와 코드를 함께 구성해줍니다. 기획자가 디자이너나 개발자에게 전달하기 전에 시각화된 화면을 빠르게 확인할 수 있습니다.
2. UI → 코드 전환
Figma에 직접 디자인한 프레임이나 요소를 복사해 붙여넣고
“이걸 반응형 웹사이트로 구현해줘”
라고 프롬프트를 입력하면, Figma 내부 구조를 그대로 인식해 매우 완성도 높은 코드 결과물을 생성해줍니다.
- 기존
Inspect탭 기반 핸드오프는 절반짜리 협업 도구였다면, Make는 실제로 동작 가능한 수준의 코드 제공 - Claude Sonnet 4 기반의 모델을 활용하고 있어, 구현 정확도도 매우 높음
기존 클로드나 cursor를 활용해서 개발하는 편인데, 코드 그대로 복사 붙여넣기해도 애매하게 만들어지는데, 이건 피그마 내의 데이터를 기반으로 만들어주다보니 거의 비슷하게 만들어줘서 완성도가 매우 높은 것 같습니다.
실습 예제 요약
예제 1. 기획 아이디어 시각화
- 프롬프트: “미니멀한 음악 플레이어 UI”
- 구현: 사운드클라우드 기반 재생기, 단순한 인터페이스
- 결과: 실제 Tailwind 기반 HTML/CSS + 리액트 코드 생성
예제 2. 피그마 프레임 → 반응형 코드 변환
- 방법: 프레임 복사 후, 프롬프트 입력
- 후속: 코드에서 부족한 부분은 추가 수정 요청 가능
- 용도: 프론트엔드 개발자 핸드오프 또는 직접 퍼블리싱
아직은 Beta, 하지만 충분히 기대할 만하다
Make는 아직 베타 버전이지만, 기획자에게는 아이디어를 시각화하는 도구, 개발자에게는 정확한 구조의 코드 기반 협업 도구로 충분히 활용 가치가 있습니다. 앞으로 Make가 어디까지 진화할지 기대해봅니다.
