GeekyAnts는 개발자가 라이브 React 컴포넌트를 편집 가능한 Figma 파일로 직접 가져올 수 있는 React-Fiber 기반 플러그인을 공개하며, 코드와 디자인 사이의 진정한 양방향 워크플로우(round-trip)를 약속했습니다. 이 도구는 UI 변경 사항이 디자이너와 개발자의 경계를 넘을 때마다 팀이 작업을 반복해야 하는 '디자인-코드 괴리(design-code drift)' 문제를 해결하고자 합니다.

기존의 DOM 우선 방식이 한계를 갖는 이유

기존의 임포트 도구들은 브라우저의 평면적인 <div, <span 및 기타 태그 목록인 렌더링된 HTML DOM(Document Object Model)을 스크래핑합니다. DOM은 도구에 버튼이 존재한다는 사실은 알려주지만, 그 버튼이 디자인 시스템 내 공유 컴포넌트의 인스턴스라는 사실은 알 수 없습니다. 버튼 10개를 내보내면 Figma에는 각각 마스터 컴포넌트와 분리된 10개의 독립적인 레이어가 생성됩니다. 그러면 디자이너는 변형(variant)을 다시 만들고, 제약 조건(constraints)을 다시 적용하며, 본질적으로 코드가 이미 알고 있는 내용을 다시 구축해야 합니다.

이러한 컴포넌트 지능의 상실은 디자인 부채(design debt)를 발생시킵니다. 코드에서 UI 요소가 수정될 때마다 해당 Figma 파일도 수동으로 업데이트해야 하며, 그렇지 않으면 두 표현 방식이 서로 달라지게 됩니다. 이러한 괴리는 유지 관리 비용을 상승시킵니다.

잃어버린 연결 고리, React Fiber

React Fiber는 렌더링 전반에 걸쳐 컴포넌트 이름, 계층 구조 및 상태를 추적하는 내부 재조정(reconciliation) 엔진입니다. DOM과 달리 Fiber는 각 UI 조각의 의미론적(semantic) 의미를 보존합니다. HTML 출력 대신 Fiber 트리를 읽음으로써, 도구는 <Button> 컴포넌트를 Figma 컴포넌트에 직접 매핑할 수 있으며, 원래 디자인 토큰과의 연결을 그대로 유지할 수 있습니다.

GeekyAnts의 플러그인은 이러한 통찰력을 활용합니다. React Fiber를 읽어 라이브 코드를 편집 가능한 Figma 파일로 가져옵니다. 그 결과, 원래의 변형(variant) 관계를 유지하는 레이어 세트가 생성됩니다.

파이프라인 작동 방식

임포트 프로세스는 세 가지 별도의 단계를 따릅니다:

  • Variant Expander – 컴포넌트 코드에서 상태 정의(hover, disabled, active)를 스캔하여 전체 시각적 변형 세트를 생성합니다. 이는 Figma Component Sets로 묶여 디자이너가 파일 내에서 상태를 전환할 수 있게 합니다.
  • Layout Mapping – CSS Flexbox 규칙을 Figma Auto Layout 제약 조건으로 변환합니다. 이를 통해 반응형 동작을 유지하고 디자이너가 UI 에디터에서 직접 간격을 조정할 수 있습니다.
  • State Triggering – 모달, 드롭다운 또는 기타 동적 UI 요소를 여는 코드 경로를 실행하여 플러그인이 가능한 모든 뷰를 캡처할 수 있도록 합니다.

이러한 단계들이 결합되어 정적인 스크린샷이 아닌, 라이브 UI의 충실하고 편집 가능한 복제본을 만들어냅니다.

부상하는 생태계

GeekyAnts만이 디자인-코드 루프를 닫으려 노력하는 것은 아닙니다:

  • Anima는 반대 방향인 Figma 디자인을 React 또는 Vue 코드로 변환하는 데 집중합니다.
  • Locofy.ai는 디자인 파일로부터 반응형 코드를 생성하는 AI 기반 기능을 제공합니다.
  • Builder.io는 HTML-to-Figma 임포트를 제공하지만, 여전히 DOM에 의존하므로 그 한계를 그대로 가집니다.
  • Codia AI는 웹 요소를 구조화된 Figma 파일로 변환합니다.

Fiber 기반 방식이 차별화되는 점은 DOM 중심 도구에는 없는 컴포넌트의 의미론적 인지 능력입니다.

승자와 패자

컴포넌트를 존중하는 자동화된 접근 방식은 디자인 부채를 줄여줍니다.

앞으로 주목해야 할 점

핵심 약속은 명확합니다. 임포트의 초점을 DOM에서 React Fiber로 옮김으로써, GeekyAnts의 플러그인과 같은 도구들은 디자이너에게 프로덕션 UI에 대한 라이브하고 컴포넌트를 인식하는 뷰를 제공합니다. 이러한 변화는 마침내 디자인과 코드 사이의 오랜 간극을 없애고, 비용이 많이 들고 오류가 발생하기 쉬웠던 핸드오프(hand-off) 과정을 매끄러운 양방향 워크플로우로 바꿀 수 있습니다.