캔버스, 코드를 만나다 (새 탭에서 열림)
Figma의 코드 레이어는 디자인 캔버스와 실제 코드를 하나의 작업 공간에서 결합하려는 시도다. React 기반 코드를 일반 Figma 레이어처럼 이동·복제·리사이즈하고, AI 또는 내장 IDE로 편집할 수 있게 해 디자인의 자유로운 탐색성과 코드의 강력한 기능을 함께 제공한다. 이를 위해 Figma는 캔버스 모델, 웹 기반 코드 편집기, 디자이너와 개발자의 협업 방식을 통합하는 하이브리드 접근법을 택했다. ## 디자인 캔버스와 코드의 충돌 - Figma 캔버스는 객체를 자유롭게 배치하고 수정하는 2D 공간이다. - 반면 코드는 디렉터리와 파일로 구성된 계층적 파일 시스템을 전제로 한다. - 이 차이 때문에 다음과 같은 문제가 발생한다. - 캔버스에서 코드 레이어를 복제하면 새 인스턴스를 만들 것인지, 코드의 분기본을 만들 것인지 결정해야 한다. - 코드의 원본이 캔버스인지 파일 시스템인지 명확히 해야 한다. - 시각적 레이어와 실제 코드 파일의 위치를 어떻게 연결할지 정해야 한다. - Figma는 코드의 구조를 캔버스에 그대로 강요하기보다, 코드가 Figma의 공간적 작업 방식에 맞도록 설계했다. ## 코드를 새로운 캔버스 기본 요소로 구현 - 코드 레이어는 일반 레이어처럼 다음 작업을 지원한다. - 자유로운 이동과 크기 조절 - 부모 레이어 변경 - 오토 레이아웃 스택에 배치 - 다른 레이어와 동일한 방식의 중첩 - 코드 레이어를 복제하면 별도의 코드 포크가 생성된다. - 따라서 Git 브랜치를 따로 만들지 않고도 `Option` 키를 누른 채 드래그해 여러 코드 버전을 나란히 비교할 수 있다. - 이러한 방식은 디자인에서 흔한 빠른 복제와 실험, 버전 비교를 코드에도 적용한다. ## React와 Figma 컴포넌트의 결합 - Figma는 컴포넌트 모델과 React의 컴포넌트 모델이 유사하다는 점에서 React를 선택했다. - 두 시스템 모두 재사용 가능한 구성 요소를 조합해 화면과 애플리케이션을 만든다. - React의 props는 Figma의 컴포넌트 속성과 연결된다. - 개발자가 코드에서 속성을 정의하면 디자이너는 Figma 화면에서 다음과 같은 컨트롤로 값을 조정할 수 있다. - 토글 - 슬라이더 - 드롭다운 - 결과적으로 코드 컴포넌트도 일반 Figma 컴포넌트처럼 시각적으로 재사용하고 변형할 수 있다. ## AI와 직접 편집을 함께 지원하는 IDE - 코드 레이어는 AI만으로 생성하고 수정할 수 있지만, 사용자가 직접 코드를 편집할 수 있는 환경도 필요했다. - Figma는 웹 기반의 내장 IDE를 만들기 위해 CodeMirror를 핵심 편집 엔진으로 채택했다. - CodeMirror의 확장 구조를 활용해 다음 기능을 제공할 수 있다. - 색상 테마 - 찾기 및 바꾸기 - 줄 번호 - Figma 환경에 맞춘 편집 동작 - 기본 편집기의 실행 취소·다시 실행 동작은 Figma의 자체 멀티플레이어 undo 스택과 통합하기 위해 교체했다. - 이를 통해 코드 편집도 Figma의 다른 작업과 일관된 협업 및 실행 취소 경험을 제공하도록 했다. ## 코드 레이어 설계에서 해결해야 할 세 가지 과제 - Figma는 코드 레이어를 구축하며 다음 문제를 핵심 과제로 삼았다. - 코드 레이어와 컴포넌트를 기존 Figma 생태계에 자연스럽게 통합하기 - 강력하면서도 쉽게 사용할 수 있는 웹 IDE 제공하기 - 디자이너와 개발자가 동시에 작업할 수 있는 멀티플레이어 협업 지원하기 - 전체 방향은 코드의 엄격한 구조를 그대로 가져오는 것이 아니라, Figma의 시각적이고 실험적인 작업 방식을 유지하면서 코드의 표현력을 추가하는 데 있다. 코드 레이어는 디자인 파일 안에 단순히 코드를 삽입한 기능이 아니라, 코드를 Figma의 레이어와 컴포넌트 모델에 맞춰 재구성한 기능이다. 디자인을 한 번의 클릭으로 코드 레이어로 바꾸고, AI나 직접 코딩으로 상호작용을 추가할 수 있으므로 디자이너와 개발자가 같은 캔버스에서 더 빠르게 실험할 수 있다는 점이 핵심이다.