Figma Agent 활용법: 디자인 시스템을 반영하고 결과를 검토하는 순서

Figma Agent는 Figma Design 파일 안에서 화면을 생성·수정하는 내장 에이전트입니다. 결과의 완성도를 끌어올리려면 기존 화면과 라이브러리를 먼저 준비하고, 생성·수정을 요청한 다음, 구조와 상태를 검토하는 순서로 쓰는 게 좋아요. 여기서 말하는 완성도는 보기 좋은 외형에서 끝나지 않습니다. 기존 부품을 얼마나 재사용했는지, 문구나 화면 크기가 바뀌어도 고치기 쉬운지까지 포함한 개념이에요.

그래서 저는 프롬프트를 다듬기보다 결과를 판단할 기준을 먼저 정하라고 권합니다.

기준이 서 있으면 나머지가 수월해집니다. 기존 화면을 참조하게 하면 유지할 요소와 바꿀 영역을 나누기 쉽고, 팀 라이브러리를 연결하면 어떤 디자인 자원을 쓸지도 지정할 수 있어요. 결과가 나온 뒤에는 컴포넌트와 변수가 제대로 연결됐는지, 필요한 상태가 빠짐없이 표현됐는지까지 확인하면 됩니다.

라이브러리 연결 후 무엇부터 확인할까

용어부터 짚고 갈게요. 컴포넌트는 버튼이나 입력창처럼 여러 곳에서 재사용하는 UI 부품이고, 변수는 색상·간격 같은 값을 한곳에서 관리하는 수단입니다. 공식 도움말에서는 채팅에 라이브러리를 연결하고 @로 특정 컴포넌트·변수·스타일을 참조하는 기능을 안내해요. "우리 디자인 시스템을 따라줘"라는 막연한 요청에 실제 참조 대상을 붙여 주는 방식이라고 보면 됩니다.

연결을 마쳤다면 결과물의 참조 상태를 가장 먼저 보세요. 흔히 헷갈리는 지점이 바로 여기입니다. 버튼이 기존 화면과 똑같아 보여도 그게 라이브러리 컴포넌트인지, 색상과 간격이 관리 중인 변수에 묶여 있는지는 겉모습만으로 알 수 없어요. 이 구분이 되어 있어야 나중에 디자인 시스템이 바뀌었을 때 어디를 손봐야 할지 판단이 섭니다.

검색 화면의 빈 상태로 따라 해 보기

검색 결과가 없는 화면을 예로 들어 볼게요. 기존 검색 화면을 선택한 뒤 왼쪽 패널에서 에이전트를 엽니다. 사용할 라이브러리를 연결하고, 바꿀 영역과 유지할 요소, 필요한 상태를 한 번에 담아 요청하세요. 아래는 요청을 어떻게 구성하는지 보여 주는 예시이고, 실제로 쓸 컴포넌트와 변수는 @로 해당 항목을 지정하면 됩니다.

선택한 검색 화면에서 결과 목록 영역만 검색 결과가 없는 빈 상태로 수정해 주세요. 상단 탐색 영역과 검색창은 유지하고, 연결한 라이브러리의 컴포넌트와 변수를 사용해 주세요. 결과가 없다는 안내와 검색어를 바꾸도록 돕는 문구를 넣어 주세요. 긴 검색어와 좁은 화면에서도 문구와 버튼이 겹치지 않도록 구성해 주세요.

결과를 비교할 때는 순서가 중요해요. 수정본을 먼저 보존하고 나서 원본을 되돌려야 비교할 대상이 남습니다.

1. 요청을 실행하고 변경된 영역을 살펴봅니다.
2. 수정본을 먼저 복제한 뒤 채팅의 Undo로 원본의 최근 변경을 되돌립니다.
3. 원본과 수정본을 나란히 비교하고, 추가로 바꿀 화면을 명확히 지정해 수정을 요청합니다.

검토 순서는 이렇게 잡는 걸 추천합니다. 컴포넌트와 변수 연결을 맨 먼저 확인하는 이유는, 구조가 틀렸다면 그 위의 배치나 문구를 다듬어도 소용이 없기 때문이에요. 다음으로 문구를 일부러 길게 바꾸거나 화면 폭을 줄여 배치가 버티는지 봅니다. 마지막으로 결과가 없다는 사실과 사용자가 이어서 할 행동이 함께 전달되는지 직접 읽어 보세요. 정상적인 빈 상태가 오류 화면처럼 보이지 않는지도 이때 판단할 부분입니다.

방향을 정한 뒤 간격이나 문구를 미세하게 조정하는 단계라면 직접 편집하는 쪽이 낫습니다. 원하는 변경이 명확하고 작을수록, 다시 요청하고 결과를 또 검토하는 것보다 해당 요소를 바로 다듬는 편이 실용적이거든요.

시작 전에 권한과 크레딧 확인하기

일반 파일에서 에이전트에게 편집을 맡기려면 Full 좌석과 해당 파일의 편집 권한이 모두 있어야 합니다. 다른 좌석이거나 보기 권한만 있는 경우에는 파일을 수정하지 않는 대화만 가능해요. 자신의 Draft 파일이라면 누구나 에이전트에게 편집을 요청할 수 있으니, 작업을 시작할 파일이 어디에 있고 권한이 어떤지 함께 확인해 두세요.

크레딧은 요청 횟수만으로 계산하기 어렵습니다. 모델, 작업 복잡도, 첨부 자료, 대화 맥락에 따라 소비량이 달라지기 때문이에요. 작업이 끝난 뒤 완료된 프롬프트 아래의 크레딧 아이콘에 마우스를 올리면 실제로 얼마나 썼는지 볼 수 있습니다. 요금제별 제공량과 지원 범위는 이용 시점의 공식 도움말에서, 소비 방식은 AI 크레딧 안내를 기준으로 확인하세요.

참고로 내장 Figma Agent로 화면을 생성·수정할 때는 외부 코딩 에이전트용 MCP 연결이 필요하지 않습니다.

여기서 소개한 작업 순서는 공식 기능 안내를 바탕으로 한 제안이에요. 결과가 얼마나 재사용 가능하고 변경에 잘 대응하는지는 실제 파일에서 비교해 보면서 판단하시길 권합니다.