Figma Agent로 완벽한 디자인 만들기
원본 영상: Figma Agent로 완벽한 디자인 만들기
채널: 코드팩토리
이 영상은 Figma와의 유료 파트너십으로 제작됐다.
개요
코드팩토리는 기존 데스크톱 화면과 라이브러리를 Figma Agent에 제공해 태블릿·모바일 화면을 만드는 과정을 소개한다. 생성된 결과를 직접 다듬고, 원본 변수를 변경한 뒤, 컴포넌트 개발 문서와 웹 구현까지 연결하는 흐름이다.
예제는 가상의 소재 디자인 스튜디오 ‘페이즈’다. 화자는 만들고 싶은 화면을 말로 설명하는 데서 출발하기보다, 기존 화면과 공통 규칙을 먼저 준비하는 방식을 보여준다.
기존 화면과 라이브러리 준비하기
화자는 Figma Agent를 Figma Design 안에서 대화로 요청을 받아 화면과 요소를 만들거나 수정하는 에이전트라고 소개한다.
출발점인 데스크톱 화면은 금속 구체, 주황색 리본, 큰 타이포그래피를 중심으로 구성했다. 화자의 설명에 따르면 이 그래픽은 Figma 도형과 그레이디언트 효과로 만든 정적인 디자인이다.
공통 규칙도 함께 준비했다. 색상과 간격은 변수로, 글꼴은 스타일로, 버튼과 카드 같은 공통 요소는 컴포넌트로 구성했다.
브랜드 규칙을 만드는 작업에도 Figma Agent를 활용했으며, 실제 변수와 버튼 속성을 확인해두었다고 설명한다. 브랜드 원본은 라이브러리로 게시해 사이트 파일에 연결하고, 에이전트 채팅에도 첨부했다. 기존 화면과 함께 사용할 규칙을 작업의 입력으로 제공한 것이다.
태블릿과 모바일의 카드 배치 정하기
화면을 확장할 때는 기기별 카드 배치 기준을 제시했다. 태블릿에서는 카드를 두 개씩 놓고, 모바일에서는 한 열로 내려가도록 요청했다.
이처럼 기존 화면을 제공하는 데 더해, 화면 크기에 따라 어떤 배치가 필요한지도 구체적으로 전달했다. 이 기준은 이후 웹 구현 결과를 확인할 때도 이어진다.
생성된 화면의 문구 확인하기
생성 결과에서는 소재 영역에 ‘편집 가능한 소재 선택 패널’이라는 제작용 문구가 남아 있었다고 짚는다. 화면을 만들기 위한 설명이 실제 화면의 문구로 남은 사례다.
화면 생성 이후에는 이런 문구까지 살펴볼 필요가 있다. 영상은 에이전트에 작업을 요청하는 과정뿐 아니라, 그 결과를 사람이 확인하고 다듬는 과정도 함께 다룬다.
원본 변수 변경이 연결된 요소에 반영되는지 살펴보기
원본 변수 변경을 다루는 대목에서는 연결된 버튼과 카드, 연락처 영역의 색이 바뀌었다고 설명한다. 공통 규칙에 연결된 여러 요소가 변경의 영향을 받는 사례다.
앞서 준비한 라이브러리는 화면을 만들 때 참고하는 자료이면서, 여러 요소가 공유하는 규칙을 연결하는 기반이기도 하다.
개발 문서와 실제 컴포넌트 상태 확인하기
영상은 컴포넌트 개발 문서도 다룬다. 이때 화자는 예제 버튼에 호버와 로딩 상태가 준비돼 있지 않다고 설명한다. 개발에 전달할 내용을 살필 때, 실제 컴포넌트에 어떤 상태가 있는지도 함께 확인하는 대목이다.
브랜드 규칙 변경 이후에는 문서 안에서도 차이가 나타났다. 연결된 미리보기는 바뀌었지만, 설명에 적힌 색상 값에는 이전 값이 남아 있었다고 짚는다.
이 사례는 미리보기의 변경과 설명 문구의 갱신을 각각 확인할 필요를 보여준다. 연결된 요소가 바뀌었다고 해서 문서의 설명까지 모두 같은 상태가 된 것은 아니었다.
웹 구현에서 배치 변화 확인하기
웹사이트 구현 이후에는 화면 크기에 따라 카드가 세 열에서 두 열, 다시 한 열로 바뀌는지 확인했다고 설명한다.
소재 영역이 모바일에서 세로로 내려가는지도 확인했다. 앞서 정한 화면별 배치 기준이 실제 웹사이트에서도 적용되는지 살펴본 것이다.
영상의 흐름은 기존 화면과 공통 규칙을 준비하고, 이를 바탕으로 화면을 확장한 뒤, 생성 결과와 문서, 구현 동작을 차례로 확인하는 과정으로 이어진다. 제작용 문구가 남거나 문서에 이전 색상 값이 유지된 사례는 결과를 직접 살펴보는 과정이 왜 필요한지 구체적으로 보여준다.