캔버스에서 코드 레이어와 함께 디자인 진행

코드를 활용해 디자인하면 마이크로 인터랙션부터 전체적인 흐름에 이르기까지, 실제 경험이 어떻게 느껴지고 작동하는지 확인할 수 있습니다. 하지만 각자 별도의 코딩 도구를 사용하면 마치 고립된 채 디자인하는 것처럼 느껴질 수 있고, 작업물을 공유하거나 여러 대안을 비교하기도 어려워집니다.

이러한 이유로, 올해 초 코드 레이어를 도입하여 Figma의 공유 캔버스에서 코드를 직접 다룰 수 있도록 했습니다. 이전에는 코드를 활용해 작업하려면 Figma의 일반적인 작업 방식과는 동떨어진 별도의 IDE를 사용해야 했습니다. 이제 코드 레이어를 통해 팀은 Figma 캔버스가 제공하는 다양한 협업 도구를 활용하면서, 코드를 기반으로 시각적인 결과물을 구축할 수 있게 되었습니다. 팀원들은 한곳에서 프로토타입을 나란히 놓고 비교하거나, 그 옆에 피드백을 남기거나, 코드 레이어를 복제하여 각자의 아이디어를 자유롭게 탐색해 볼 수 있습니다. 기존 디자인을 실제 작동하는 코드로 변환하든, 외부 도구나 로컬 폴더, GitHub에서 코드로 작성된 프로토타입을 가져오든, 아니면 Chrome 확장 프로그램을 통해 현재 운영 중인 웹사이트의 모습을 그대로 가져오든, 코드 레이어를 활용하면 Figma 캔버스 안에서 끊김 없이 작업을 이어갈 수 있습니다.

이번 주에 출시될 모든 것에 대해 알아보세요.

기존 작업물을 바탕으로 구축

새로운 제품 아이디어를 탐색할 때 처음부터 새로 시작하는 것이 도움이 될 때도 있지만, 새로운 기능이나 흐름을 구상할 때는 기존 코드베이스를 활용하는 것이 훨씬 효율적입니다. 코드 레이어는 기존 작업물을 기반으로 새로운 결과물을 만들 수 있는 다양한 방법을 제공합니다. GitHub나 로컬 폴더에서 경량 프로토타입 제작 코드베이스를 가져와 이미 구축해 둔 화면과 인터랙션을 그대로 활용할 수 있습니다. GitHub에서 가져오는 경우, 코드 레이어는 해당 리포지토리와 연결된 상태를 유지합니다.

예를 들어, 자동차 대리점을 위한 소프트웨어와 서비스를 제공하는 Cox Automotive의 수석 제품 관리자 Lindsay Brechler는 새로운 기능에 대해 이해관계자들의 의견을 일치시키고자 기존 HTML 프로토타입을 코드 레이어로 가져왔습니다. 모든 버전이 캔버스에 그대로 남아 있었기 때문에 Lindsay는 처음부터 다시 시작할 필요 없이 이전 버전 중 하나를 선택해 작업을 이어가며 계속 수정해 나갈 수 있었습니다. Lindsay는 이렇게 말합니다. "코드 레이어를 사용하면 반복 수정 과정에서 모든 화면과 인터랙션을 함께 체계적으로 유지할 수 있습니다."

Figma 디자인을 인터랙티브한 코드 레이어로 변환할 수도 있습니다. Rocket Money의 디자인 시스템 리드 제품 디자이너인 Derek Onay는 이 방법을 사용하여 초기 아이디어를 팀과 공유합니다. 팀이 기본적인 화면 구성 요소를 구축할 당시, 제품을 사용하는 사람들에게 영향을 미치기 전에 인터랙션과 접근성 문제를 조기에 확정하는 것이 중요했습니다. Derek은 코드 레이어에서 컨셉을 구현하여 이러한 논의를 이끌어냈습니다. "코드 레이어의 진정한 가치는 아이디어를 더 효과적으로 전달하고 이해관계자들의 의견을 하나로 모을 수 있다는 점에 있습니다."라고 말한 Derek은 다음과 같이 이어갑니다. "작동하는 프로토타입을 공유함으로써, 팀원들이 이미 익숙하게 사용 중인 Figma 환경 내에서 원활하게 소통할 수 있죠."

기존 코드와 디자인 외에도, Figma의 MCP 서버를 통해 코딩 도구에서 프로토타입을 캔버스로 가져오거나, Figma Chrome 확장 프로그램을 통해 실제 웹 페이지를 코드 레이어로 캡처할 수 있습니다.

함께 연구하면서 구축

IDE에서 코딩 에이전트와 함께 작업하다 보면, 대안을 충분히 고려하기도 전에 처음 떠올린 아이디어에 매몰되기 쉽습니다. 코드 레이어를 사용하면 여러 버전의 프로토타입을 캔버스 위에 동시에 표시할 수 있습니다. 팀과 함께 프로토타입을 복제하여 다른 접근 방식을 시도해보고, 여러 버전을 전환할 필요 없이 나란히 비교해볼 수 있는 것입니다.

Dell Technologies의 프로덕트 디자이너, Miguel Wermuth는 모바일, 태블릿, 데스크톱 전반에 걸쳐 기업 고객과 dell.com 이용 고객을 위한 고객 계정 경험을 담당합니다. Miguel은 코드 레이어를 활용하여 대화형 AI 경험을 구현합니다. 이해관계자가 질문을 입력하면 프로토타입이 그에 맞는 화면을 보여주는 방식입니다. 흐름이 동료 디자이너들에게 승인되면, Miguel은 이를 코드 레이어로 구축하여 비즈니스 이해관계자들로부터 최종 승인을 받습니다. 이해관계자들은 정적인 화면들을 나열해서 보는 것보다 실제로 작동하는 프로토타입을 통해 흐름을 파악하는 것을 훨씬 더 수월하게 느낍니다. 여러 버전을 비교할 때는 캔버스 위에 코드 레이어를 나란히 복제해 둡니다. "코드 레이어를 사용하면 캔버스에서 디자인하는 동시에 코드 작업을 할 수 있습니다. 디자인과 코드 사이를 자유롭게 오가며 작업할 수 있다는 점은 매우 강력한 장점입니다."

코드 레이어는 단순히 하나의 방향성을 평가하는 데 그치지 않습니다. 전체적인 관점에서 제품 경험을 조망할 수 있도록 합니다. 1Password의 최고 경험 책임자 Matt Davey는 이렇게 말합니다. "Figma의 진정한 강점은 언제나 캔버스에 있었습니다. 마치 웹사이트의 모든 페이지를 출력해서 화이트보드에 붙여놓고 보던 것과 비슷하죠. UI 요소들을 한눈에 모아서 살펴볼 수 있다는 것은 엄청난 가치가 있습니다.”

코드를 유지하면서 디자인 세부 조정

아이디어를 다듬어 나가는 과정에서, 코드 레이어를 활용하면 디자인을 조정하고 이를 실제 작동하는 프로토타입에 즉시 적용할 수 있습니다. 직접 수정하고 싶은 시각적 요소가 있다면, Extract designs를 통해 코드 레이어 내의 화면이나 흐름을 편집 가능한 Figma 레이어로 변환할 수 있습니다.

Checkout.com의 수석 제품 디자이너 Kris Murphy는 기업이 자신의 고객 경험에 통합할 제품을 설계합니다. 잠재 고객이 실제 기술 작동 방식을 확인하고 싶어 했을 때 Kris는 코드 레이어를 사용하여 데모를 구축했습니다. Kris는 이렇게 말합니다. "코드 레이어 덕분에 데모를 약 50% 더 빠르게 만들 수 있었습니다. 아직 완전히 익숙하지 않은 도구였음에도 말이죠." Kris는 고객에게 데모를 공유하기 전 모든 화면이 완성도 높게 정제되었는지 확인하고자 했습니다. 프로토타입 화면을 하나씩 클릭하며 확인하는 대신, Kris는 코드 레이어에서 모든 화면을 Figma 캔버스로 옮겼습니다. 덕분에 화면들을 나란히 놓고 검토하며 수정이 필요한 부분을 쉽게 찾아내고 보완할 수 있었습니다. 그런 다음 Kris는 편집 사항을 다시 코드 레이어에 반영했고, Checkout.com 팀은 캔버스에서 이루어진 수정의 전체 흐름을 함께 검토할 수 있었습니다. Kris는 이렇게 말합니다. "코드 레이어는 디자인과 개발을 잇는 진정한 가교 역할을 합니다. 덕분에 아이디어를 구상하고 결과물을 빠르게 구현할 수 있게 되었습니다."

이 외에도 프로토타입에 직접 댓글을 남기거나, 프레임에 주석을 달아 에이전트에게 수정이 필요한 부분을 알려주거나, 코드를 직접 확인하고 편집하는 등의 다양한 편집 옵션이 있습니다. 또한 새롭게 업데이트된 전체 화면 모드에서는 작업의 각 부분에 대해 에이전트와 여러 개의 대화 스레드를 동시에 진행하며 작업할 수 있습니다.

변경 사항을 공유할 준비가 되면 업데이트된 코드를 브랜치에 푸시하여 팀원들이 해당 프로토타입을 바탕으로 계속 작업을 이어가도록 할 수 있습니다. 풀 리퀘스트를 생성하면 팀 구성원이 변경 사항을 공유 프로젝트에 병합하기 전에 검토할 수 있습니다.

코드 레이어가 오늘부터 오픈 베타로 출시되며, AI 크레딧이 사용됩니다. 유료 요금제 사용자는 2026년 11월 4일까지 코드 레이어에서 생성 및 편집을 무료로 이용할 수 있습니다.