Cloudflare의 UX 엔지니어인 Sam Mason de Caires는 디자인과 엔지니어링 사이의 간극을 줄이기 위해 Figmotion과 같은 도구를 개발하며 겪은 경험과 철학을 공유합니다. 그는 기술적 한계를 극복하고 사용자 워크플로우에 자연스럽게 녹아드는 도구를 만드는 것이 디자이너와 개발자 간의 협업 효율을 극대화하는 핵심이라고 강조합니다. 결과적으로, 훌륭한 플러그인은 단순히 기능을 추가하는 것을 넘어 제품 개발 프로세스 전체의 언어를 통일하는 역할을 수행해야 합니다.

디자인과 개발의 경계를 허무는 Figmotion 개발

Figma 내에서 직접 애니메이션을 구현하고 이를 개발 환경으로 전달하기 위해 Figmotion 플러그인을 구축했습니다.
단순히 시각적인 애니메이션을 만드는 것에 그치지 않고, 이를 CSS나 JSON(Lottie) 형태의 코드로 내보낼 수 있도록 설계하여 디자인 가이드가 실제 제품에 정확히 반영되도록 했습니다.
디자이너가 복잡한 코드 없이도 타임라인 기반의 인터페이스를 통해 애니메이션 로직을 제어할 수 있도록 사용자 경험을 최적화했습니다.

Cloudflare에서의 UX 엔지니어링과 시스템 구축

Cloudflare의 대규모 UI 시스템을 관리하며, 수많은 엔지니어가 일관된 디자인 언어를 사용할 수 있도록 내부 도구와 컴포넌트 라이브러리를 개발합니다.
복잡한 네트워크 설정이나 보안 대시보드를 직관적으로 제어할 수 있는 인터페이스를 구축하기 위해 TypeScript와 같은 강력한 기술 스택을 활용합니다.
디자인 시스템이 단순한 가이드에 머물지 않고 실제 코드 베이스와 동기화되어 유지될 수 있도록 자동화된 워크플로우를 지향합니다.

플러그인 개발의 철학과 기술적 도전

플러그인은 창의적인 작업 흐름을 방해하지 않는 '보이지 않는 조력자'가 되어야 하며, 사용자가 학습의 부담 없이 즉시 사용할 수 있어야 합니다.
Figma 플러그인 API의 제약 사항을 극복하기 위해 React와 같은 현대적인 웹 기술을 플러그인 UI 개발에 적극적으로 도입했습니다.
실제 사용자의 피드백을 지속적으로 반영하여 도구가 사용자의 실제 고충(Pain points)을 해결하고 있는지 끊임없이 검증하는 루프를 중요하게 여깁니다.

도구를 개발할 때는 기술적인 완결성만큼이나 "이 도구가 디자이너와 개발자의 대화 방식을 어떻게 개선하는가"를 고민해야 합니다. 특히 수동적인 작업이나 반복적인 코드 변환 과정을 자동화하는 도구는 팀 전체의 생산성을 비약적으로 높여줄 수 있습니다.