Figma Make에 속성 패널·주석 기능 추가…프롬프트 없이 직접 편집

요약

Figma가 7월 30일 AI 프로토타이핑 도구 Figma Make에 속성 패널과 주석(annotation) 기능을 추가했다.
간격·타이포그래피·레이아웃 값을 패널에서 직접 조정하거나, 화면에 표시를 남겨 에이전트에게 수정 의도를 전달할 수 있다.
편집 내용은 채팅 패널에 쌓아 두고 검토한 뒤 적용하는 방식이다.
모든 플랜과 좌석에 순차적으로 배포된다.

주요 내용

• 툴바 오른쪽 위 'Edit'을 누르면 간격, 타이포그래피(행간·자간·굵기), 레이아웃, 패딩, 모서리 반경, 불투명도, z-index, 테두리 스타일을 다루는 속성 패널이 열린다.
• 요소를 드래그해 순서를 바꾸고 전체 DOM 트리를 볼 수 있으며, 같은 요소의 모든 인스턴스를 한 번에 선택해 고칠 수 있다.
• 색상과 타이포그래피 선택지는 코드베이스에 이미 정의된 토큰에서 가져온다. Make와 Figma Design 컴포넌트를 잇는 Code Connect 연동은 추후 제공될 예정이다.
• 'Annotate for agent'로 캔버스 영역을 표시하고 원하는 변경을 설명하면, 호버 효과나 지연 페이드처럼 패널로 다루기 어려운 동작·애니메이션 수정을 여러 요소에 걸쳐 요청할 수 있다.
• 편집 중 디바이스 프레임을 바꿔 화면 크기별 결과를 확인할 수 있다.
• 대기 중인 편집은 적용 전까지 크레딧이 들지 않는다. 적용하면 크레딧이 소모되고 코드가 갱신되며 새 파일 버전이 생긴다. Figma는 직접 조작이 같은 내용을 텍스트로 요청할 때보다 토큰을 덜 쓰고 더 빨리 끝난다고 설명했다.
• 속성 패널은 새로 만든 Make 디자인에서만 동작하며, 기존 디자인은 이전 편집 도구를 그대로 쓴다.

왜 중요한가

프롬프트만으로 세밀한 수치를 맞추기 어렵다는 점은 AI 생성 도구의 대표적 한계로 꼽혀 왔다. 디자이너에게 익숙한 속성 패널 방식의 직접 편집이 더해지면서 AI가 만든 결과물을 일반 디자인 툴처럼 다듬을 수 있게 됐다. 코드의 토큰을 그대로 쓰는 구조는 디자인과 구현 사이의 불일치를 줄이는 데에도 도움이 될 수 있다.

FigmaA Properties Panel and Annotations, Now in Figma Make | Figma BlogWith visual editing and annotations, Figma Make is bridging the gap between design and code.