Figma Make 로컬코드: 디자인 캔버스와 코드베이스의 연결

Figma Make는 왜 로컬 코드와 연결되나요?

Figma는 디자인 도구와 코드 도구를 따로 나누는 방식이 점점 한계에 가까워지고 있다고 설명합니다. 최근 AI 에이전트를 활용해 코드를 작성하는 흐름이 늘어나고 있지만, 코드 협업 도구는 여전히 복잡하고 많은 디자이너에게 익숙하지 않은 환경으로 남아 있습니다.

이번 업데이트의 방향은 명확합니다. 디자이너가 디자인 캔버스, 프로토타이핑 공간, 실제 코드베이스 사이를 더 자유롭게 오갈 수 있도록 만드는 것입니다.

기능 ① : 코드베이스를 시각적으로 편집 기능

이번 업데이트에서 가장 중요한 변화는 직접 시각 편집 기능입니다.

사용자는 Figma Make에서 로컬 코드베이스를 연결한 뒤, 화면의 요소를 선택하고 속성을 조정할 수 있습니다. 예를 들어 레이아웃, 색상, 폰트, 크기 같은 UI 속성을 시각적으로 수정하면, Figma Make의 에이전트가 관련 코드를 찾아 변경합니다.

즉, 디자이너는 코드 파일을 직접 열어 일일이 수정하지 않아도, 화면 위에서 원하는 UI 변경을 시도할 수 있습니다.

수정하고 싶은 항목에 ‘직접 편집(direct edits)’ 기능 사용

기능 ② : 인터랙션과 애니메이션 수정은 주석 기능 활용

단순한 색상, 크기, 여백 변경을 넘어 인터랙션이나 애니메이션처럼 더 복잡한 수정이 필요할 때는 주석 기능(annotation)을 사용할 수 있습니다.

사용자는 화면 요소에 주석을 달아 원하는 동작을 설명할 수 있습니다. 예를 들어 버튼 클릭 후 패널이 열리거나, 특정 요소가 부드럽게 전환되는 방식처럼 여러 요소가 연결된 변경 사항을 설명할 수 있습니다. Figma는 이 주석이 에이전트에게 맥락 정보를 제공한다고 설명합니다.

인터랙션 구현 방식이나 동작 논리를 바꾸는 변경 사항에는 ‘주석 (annotations) 기능’을 활용

기능 ③ : 브랜치, 커밋, PR(Pull Request) 지원

Figma Make는 단순히 화면을 수정하는 데서 끝나지 않습니다. 실제 개발 프로세스에 맞춰 브랜치 생성, 커밋 되돌리기, 커밋 히스토리 확인 등 Git 기반 워크플로를 지원합니다.

중요한 점은 변경 사항이 곧바로 프로덕션 코드에 반영되는 것이 아니라는 점입니다. PR(Pull Request)을 열기 전까지는 변경 사항이 로컬 커밋으로 저장되며, 이후 개발팀이 일반적인 코드 리뷰 절차에 따라 검토할 수 있습니다.

이 부분은 실무 협업에서 매우 중요합니다. 디자이너가 시각적으로 변경을 제안하더라도, 개발팀의 리뷰와 승인 과정을 거칠 수 있기 때문입니다.

기능 ④ : Make와 Figma Design 호환

Figma Make에서 만든 화면, 페이지, 컴포넌트는 Figma 캔버스로 복사해 레이어 형태로 붙여넣을 수 있습니다. 이후 팀원들과 함께 의견을 나누고, 디자인을 수정한 뒤, 다시 Make로 가져와 코드에 반영하는 흐름을 만들 수 있습니다.

이 기능은 Figma가 말하는 “캔버스와 코드베이스를 같은 장소에 두는” 방향을 보여줍니다. 디자이너와 개발자가 각자 다른 도구에서 단절된 상태로 일하는 것이 아니라, 하나의 연결된 흐름 안에서 협업할 수 있게 되는 것입니다.

Figma Make와 Figma Design을 자유롭게 이동

관련링크

• Figma Make, now on your local code