Figma Make, 이제 로컬 코드에서 | Figma 블로그 (새 탭에서 열림)

Figma Make은 디자인, 프로토타이핑, 실제 코드 배포 사이의 경계를 허물고, Figma 안에서 로컬 코드베이스를 직접 수정·검토·공유할 수 있도록 확장된다. 사용자는 화면 요소를 시각적으로 편집하거나 자연어 주석으로 동작을 변경하고, Git 브랜치·커밋·PR 흐름을 통해 안전하게 배포할 수 있다. 궁극적으로 Figma는 디자인 캔버스와 코드베이스를 하나의 협업 환경으로 통합하려 한다.

로컬 코드베이스의 시각적 편집

• Figma Make를 회사의 코드베이스에 연결하면 Figma 안에서 실제 UI를 직접 수정할 수 있다.
• 화면 요소를 선택해 다음 속성을 변경할 수 있다.
  • 레이아웃
  • 색상
  • 글꼴
  • 크기
  • 기타 시각적 속성
• Make의 에이전트가 사용자의 시각적 변경에 대응하는 코드를 찾아 수정한다.
• 이미 원하는 결과가 명확한 속성 변경에는 직접 편집 기능을 사용한다.
• 현재는 코드베이스 접근 권한이 있는 디자이너에게 적합하며, 비기술 사용자를 위한 설정 과정은 계속 개선 중이다.

주석과 프롬프트를 활용한 동작 변경

• 단순한 속성 변경을 넘어 상호작용이나 애니메이션을 수정할 때는 화면 요소에 주석을 달 수 있다.
• 주석에는 원하는 동작을 자연어로 설명할 수 있다.
• 여러 요소를 한 번에 참조할 수 있어 에이전트에 구체적인 맥락을 전달한다.
• 직접 편집과 일반적인 채팅 프롬프트 사이의 유연한 작업 방식으로 활용된다.
• 예를 들어 버튼의 클릭 동작, 화면 전환, 애니메이션 로직 등을 설명해 코드에 반영할 수 있다.

브랜치·커밋·PR 기반 배포

• 프로덕션 코드는 팀의 개발 프로세스를 거쳐 의도적으로 배포하도록 설계됐다.
• PR을 열기 전 변경 사항은 로컬 커밋으로 저장된다.
• Make 안에서 Git 작업을 수행할 수 있다.
  • 브랜치 생성
  • 커밋 확인
  • 커밋 되돌리기
  • 변경 이력 검토
  • PR 생성
• 엔지니어링 팀은 일반적인 코드 변경과 동일하게 Make의 변경 사항을 리뷰할 수 있다.

디자인과 코드의 협업 및 왕복 작업

• 로컬 코드베이스의 변경 사항을 파일과 브랜치 단위로 팀원에게 공유할 수 있다.
• 팀원은 공유받은 브랜치를 체크아웃해 변경 내용을 확인하고 추가 작업을 진행한다.
• 커밋 이력을 통해 변경 전후를 비교할 수 있다.
• Make에서 만든 화면·페이지·컴포넌트를 Figma 캔버스의 레이어로 복사할 수 있다.
• Figma 캔버스에서 팀원과 의견을 나누고, Figma 에이전트와 함께 디자인을 수정할 수 있다.
• 디자인 변경 사항은 다시 Make로 가져와 코드에 적용할 수 있다.
• 이를 통해 다음과 같은 왕복 흐름을 지향한다.
  • Make에서 코드 기반 화면 제작
  • Figma Design에서 검토·편집·협업
  • 결정된 디자인을 다시 코드에 반영

베타 출시 범위

• 직접 편집, 주석, 채팅, PR 생성 기능은 2026년 5월 28일부터 제한적 베타로 제공된다.
• 베타 기간에는 AI 크레딧을 차감하지 않는다.
• 정식 AI 크레딧 요금은 추후 공개될 예정이다.
• 초기 베타는 Mac용 Figma Beta 데스크톱 앱에서만 제공된다.
• 대기자 등록이 베타 접근을 보장하지는 않으며, 선정된 사용자에게 별도 이메일이 발송된다.
• 향후 다른 플랫폼으로 확대할 계획이다.

Figma Make는 디자인 도구와 IDE를 대체로 구분하기보다, 작업 단계에 따라 두 환경을 연결하는 방향을 택했다. 현재는 Mac 베타와 코드 접근 권한 등 제약이 있지만, Git 기반 리뷰 프로세스와 Figma 캔버스 협업이 안정화된다면 디자이너와 개발자가 실제 제품 코드를 함께 발전시키는 실용적인 워크플로가 될 수 있다.