Figma 캔버스의 코드
Figma Design의 코드 레이어를 사용하면 팀과 함께 코드를 기반으로 여러 방향을 나란히 탐색할 수 있습니다.
Figma 캔버스의 코드공유
에이전트의 등장으로 더 많은 사람이 개발할 수 있게 되었고, 만들 수 있는 것의 가능성도 크게 확장되었습니다. 하지만 그 과정은 서로 분리된 채팅, 연결되지 않은 업무 흐름, 고립된 탐색 환경 속에서 여전히 혼자 이루어지는 경우가 많습니다.
원하는 방식으로 시작할 수 있습니다.
Figma Design에서는 도구 모음에서 코드 레이어를 추가하거나, 기존 프레임에서 코드 레이어를 생성하거나, Figma 에이전트에게 코드 레이어 생성을 요청할 수 있습니다. 그다음에는 템플릿을 기반으로 시작하거나, 만들고 싶은 것을 설명하면 됩니다. 기존 코드베이스를 가져와 작업을 시작할 수도 있습니다. GitHub 리포지토리를 가져오거나 로컬 폴더를 직접 업로드하면 됩니다.
Make에서 코드를 생성하고 편집한 뒤, 이를 코드 레이어로 캔버스에 가져와 팀과 함께 탐색하고, 비교하고, 다듬어 보세요.
Figma Design의 코드 레이어를 사용하면 인터랙티브 코드가 캔버스 자체의 일부가 되어, 팀이 하나의 공간에서 함께 아이디어를 탐색하고, 반복적으로 개선하며, 구체화하기가 훨씬 쉬워집니다.
모든 대안을 즐기세요
디자이너들은 오래전부터 다양한 대안을 시도하기 위해 프레임을 복제해 왔습니다. 코드 레이어도 같은 방식으로 작동합니다. 실제 작동하는 경험을 캔버스 위에 배치해, 단순히 어떻게 보이는지가 아니라 실제로 어떤 느낌인지까지 여러 옵션을 비교할 수 있습니다. 요소를 이동하거나 조정하고 크기를 변경하면 코드에 즉시 반영됩니다. 프롬프트를 사용해 계속 반복 작업하면 에이전트가 원본은 그대로 유지한 채 새로운 버전을 생성합니다. 코드 레이어는 공유 파일 내에 존재하므로, 팀원들도 동일한 레이어에서 작업에 참여하고, 댓글을 남기고, 프롬프트를 입력할 수 있습니다.
작업 환경을 자유롭게 전환하세요
코드 레이어를 사용하면 소프트웨어를 직접 탐색할 수 있습니다. 디자인 추출을 선택하면 현재 코드 상태를 편집 가능한 Figma 레이어로 다시 변환하여, 코드를 시각적으로 이해하기 쉽게 만들 수 있습니다. 캔버스에 가져올 범위도 직접 선택할 수 있습니다. 하나의 화면만 가져오거나, 특정 상태만 가져오거나, 전체 흐름을 가져오는 것도 가능합니다. 그다음에는 한 번의 클릭으로 편집한 내용을 코드 레이어에 반영할 수 있습니다. 이렇게 하면 캔버스와 코드를 오가며 자연스럽게 작업할 수 있습니다.
판단을 더해 완성도를 높이세요
더 세밀한 수정이 필요하다면 코드 편집기에 주석을 추가해 에이전트에게 원하는 변경 사항을 요청하거나, 직접 코드를 편집할 수도 있습니다. 원하는 결과가 완성되면 이를 다시 코드 레이어로 변환한 뒤 리포지토리에 푸시하면, 최종 변경 사항이 소스 코드에 반영됩니다. 이제 팀 전체가 해당 업데이트를 확인할 수 있습니다.
Figma Design의 코드 레이어를 사용하면 캔버스는 디자인과 코드가 함께 발전해 나가는 공유 공간이 됩니다. 하나의 공간에서 다양한 아이디어를 시도하고, 비교하고, 구현할 최적의 방향을 함께 찾아갈 수 있습니다.
코드 레이어는 앞으로 몇 주에 걸쳐 비공개 베타로 순차적으로 제공될 예정입니다. 여기에서 등록하여 조기 액세스를 요청하세요. 도움말 센터를 방문하여 Config에서 발표된 기능과 시작 방법을 확인하세요. Figma와 관련된 모든 질문과 영감을 Figma Learn에서 찾아보세요.
Figma CEO 겸 공동 창립자인 Dylan Field의 Config 요약을 읽어보세요.
