Workflow lab: 에이전트를 사용하여 디자인과 코드 간 이동

업무 흐름 랩에 오신 것을 환영합니다. 여기에서는 Figma 제품과 툴을 사용한 샘플 업무 흐름을 소개합니다.

가상의 STEM 학습 앱인 Radicle의 엔지니어링 팀은 그 어느 때보다 빠르게 움직이고 있습니다. 과거에는 몇 주가 걸리던 작업이 이제는 며칠, 심지어 몇 시간 만에 완료됩니다. 하지만 이러한 속도에도 불구하고 큰 진전은 없습니다. AI가 생성한 코드는 디자인 스펙에서 벗어날 때가 많기 때문입니다. 팀은 코딩 에이전트에게 스크린샷과 개발 티켓을 제공하여 작업하게 하지만, 결과를 제대로 얻기에는 충분하지 않으며 팀은 이를 다시 작업하느라 막히게 됩니다.

첫 번째 AI 작업 결과물이 프로덕션 준비 상태에 더 가깝게 돌아온다면 어떨까요? 승인된 컴포넌트 및 Figma에 문서화된 토큰과 같이 작업할 디자인 컨텍스트가 더 많이 제공되면, 코딩 에이전트는 더 적은 프롬프트로도 사용자의 의도와 일치시킬 수 있습니다. 이 예시 업무 흐름에서 Radicle의 개발자는 Figma 개발자 도구를 사용하여 코딩 에이전트에게 더 나은 컨텍스트를 제공함으로써 더 나은 코드를 생성할 수 있도록 지원합니다. 첫 번째 와이어프레임부터 최종 검토까지 개발자가 어떻게 새로운 기능의 디자인과 코드를 긴밀하게 맞추어 유지하는지 따라가 보세요.

문제 사례

Radicle 팀은 학생들이 강사 및 동료 학생들에게 메시지를 보낼 수 있는 받은 편지함을 새로 고치고자 합니다. 먼저 도구 모음, 모달, 토스트(일시적인 알림)의 세 가지 표면을 갖는 새로운 일괄 업데이트 업무 흐름을 추가할 계획입니다. 도구 모음을 사용하면 사용자가 모든 메시지를 선택하여 삭제하거나 읽지 않음으로 표시할 수 있습니다. 모달은 사용자에게 작업을 확인하거나 취소할지 묻습니다. 마지막으로 토스트는 작업이 성공했는지 보여주고 실행 취소 옵션을 제공합니다.

팀의 디자이너는 Figma Design에서 각 화면을 만들고, 프로젝트의 개발자는 이러한 디자인을 코딩 에이전트에 입력합니다. 코드를 빠르게 돌려받지만 UI가 맞지 않습니다. 아이콘이 일치하지 않고 모달의 간격이 고르지 않으며 토스트에 실패 상태가 누락되었습니다. 개발자는 오후 내내 이를 다시 작업하는 데 시간을 보낼 수도 있습니다. 대신 한 걸음 물러서서 Figma의 개발자 도구로 다시 시작합니다.

프롬프팅하기 전 계획 수립

코드를 작성하기 전에 개발자는 새로운 일괄 업데이트 업무 흐름을 정의하는 화면, 상태 및 전환의 의도된 동작을 개략적으로 설명합니다. 그들은 PRD 및 오늘날 받은 편지함을 구성하는 컴포넌트의 코드와 함께 에이전트에게 이 개요를 제공합니다. 그런 다음 개발자는 Figma의 MCP 서버와 함께 generate_diagram 도구를 사용하여 FigJam에서 세 가지 표면에 걸친 흐름을 보여주는 편집 가능한 다이어그램을 만듭니다.

• 툴바의 "모두 선택" 옵션은 모든 메시지를 체크합니다.
• "삭제" 옵션은 확인 모달을 엽니다.
• 토스트의 "실행 취소" 버튼은 대시보드를 이전 상태로 새로 고칩니다.

이 다이어그램은 에이전트가 기반으로 구축할 수 있는 추가 컨텍스트를 제공하는 동시에 개발이 시작되기 전에 팀이 반응할 수 있는 것을 제공합니다. 개발자는 디자인 담당자 및 디자인 시스템 리드와 FigJam을 공유하며, 이들은 Slack 스레드 대신 다이어그램에 직접 피드백을 남깁니다.

에이전트에게 구축할 시스템 제공

모든 사람이 승인하면 개발자는 Figma의 MCP 서버를 통해 코딩 에이전트에 FigJam 다이어그램을 제공하여 에이전트가 Radicle 디자인 시스템의 컴포넌트, 토큰 및 레이아웃에 액세스할 수 있도록 합니다.

개발자가 작업할 스크린샷만 가지고 있었다면, 올바른 컴포넌트를 찾기 위해 코드베이스를 뒤지거나 세부 사항을 명확히 하기 위해 디자이너에게 문의해야 했을 것입니다. 12px 간격이 올바른 간격 토큰인지, 버튼이 리포지토리에 이미 있는 보조 버튼인지, 또는 모달이 새로운 패턴인지 아니면 팀이 이미 출시한 것인지 말입니다. 대신 이러한 답변은 Figma의 MCP 서버를 통해 파일에 모두 존재하므로 에이전트에게 필요한 모든 디자인 컨텍스트를 제공합니다.

디자인 시스템을 코드에 연결

어떤 컴포넌트를 사용해야 하는지 아는 것과 컴포넌트가 어떻게 구축되었는지 아는 것은 다릅니다. 그 부분은 Radicle의 디자인 시스템 리드가 설정하는 Code Connect에서 기인합니다. Figma에서 시작하여 라이브러리를 팀의 GitHub 리포지토리에 연결하여 각 컴포넌트가 해당 컴포넌트를 구현하는 파일을 가리키도록 합니다. 그런 다음 코드베이스의 버튼, 아이콘, 모달과 같은 컴포넌트에 대한 템플릿 파일을 작성하여 Figma 속성을 코드 속성에 매핑합니다.

이제 개발자는 에이전트에게 Figma 선택 항목에서 구축하도록 프롬프트를 제공하고, Code Connect는 가져올 컴포넌트를 식별합니다. 새로운 코드를 작성하는 데 시간과 크레딧을 낭비하는 대신, 에이전트는 이미 존재하는 구현 청사진에서 시작합니다.

하지만 일괄 업데이트 선택 상태는 새로운 것이므로 Code Connect에서 매핑할 수 없는 부분입니다. 처음부터 구축하기 전에 개발자는 search_design_system 프롬프트를 사용하여 팀의 Figma 라이브러리 전체에서 기존 선택 컴포넌트를 찾습니다. 에이전트는 몇 달 전에 팀이 출시한 기능에서 유사한 컴포넌트를 식별합니다. 거기서 에이전트는 코드베이스에서 해당 컴포넌트를 찾아 일괄 업데이트 업무 흐름에 맞게 조정합니다. 결과는 브랜드에 부합하고 나머지 Radicle 앱과 일관되며, 에이전트는 팀이 이미 구축한 패턴을 새로 발명할 필요가 없습니다.

문제가 발생하기 전에 방향 이탈 감지하기

개발자는 확인 모달 코딩으로 넘어갑니다. 하지만 작업을 진행하는 동안 디자인 팀은 두 가지 변경 사항을 적용합니다. 모달은 더 어두운 브랜드 색상이어야 하고 버튼에는 새로운 모서리 반경이 적용됩니다. 디자이너는 Radicle 라이브러리에 업데이트를 게시하고 티켓에 변경 사항을 표시합니다. 개발자는 수동으로 변경하는 대신 에이전트에게 변동 사항이 있는지 확인하도록 요청합니다.

개발자는 코딩 에이전트에 get_variable_defs 프롬프트를 입력하고, 에이전트는 디자이너의 변경 사항이 반영된 모달에 사용된 변수를 반환합니다. 에이전트는 이를 코드의 토큰과 비교하여 불일치하는 두 가지를 즉시 찾아내고 모달을 업데이트합니다.

프로덕션으로 가는 길

개발자는 팀이 유지 관리하는 컴포넌트에서 툴바, 메시지 선택 상태 및 확인 모달의 세 가지를 모두 완료했습니다. 빌드 중에 생성되었고 현재까지 코드에만 존재하는 토스트가 남았습니다. 여전히 실패 상태가 필요합니다. 개발자는 use_figma 프롬프트를 사용하여 캔버스에 토스트를 편집 가능한 레이어로 배치하고, 디자이너는 "다시 시도" 작업과 함께 누락된 상태를 추가합니다. 그런 다음 디자인 시스템 리드는 새 컴포넌트를 게시하고 Code Connect를 사용하여 코드에 매핑합니다. 이제 토스트는 Radicle 라이브러리의 다른 모든 것과 마찬가지로 작동합니다.

거기서부터는 다른 릴리스와 비슷해 보입니다. 개발자가 풀 리퀘스트를 열면 변경 사항(diff)은 대부분 기능 로직입니다. 엔지니어가 코드를 검토하고 디자이너는 미리보기 빌드를 확인합니다.

Figma의 MCP 서버 및 Code Connect는 에이전트가 모든 사람이 작업하는 동일한 시스템에 액세스할 수 있도록 지원하므로, 팀이 AI 생성 코드를 재작업하는 대신 사용자 경험을 형성하는 세부 사항에 집중할 수 있도록 합니다. 구축하는 시간이 많아진다는 것은 단순히 더 빠른 작업이 아니라 더 나은 작업을 의미합니다.

Figma MCP 서버를 설치하고 원하는 코딩 에이전트에 연결하여 에이전트에게 더 나은 컨텍스트를 제공해 보세요. 팀이 가장 많이 재사용하는 컴포넌트를 위해 Code Connect를 설정하세요.

Workflow Lab 시리즈의 모든 블로그 게시물을 읽고 Figma에서 작업하는 다른 방법을 탐색해 보세요.