Figma API 적극 활용하기

2022-09-04

현재 내가 일을 하고 있는 푸망이라는 회사에서는 심리테스트 형식의 인터랙티브 컨텐츠를 월에 8개이상 개발하여 배포 운영하고 있다. 인터랙티브 컨텐츠는 말 그대로 사용자들이 선택을 할 수 있고, 선택에 따라서 마지막에 보게 되는 결말이 달라지는 미연시라고 생각하면 된다.

인터랙티브 컨텐츠는 말 그대로 컨텐츠인데, 지금 이 컨텐츠는 HTML과 CSS로 구성되고 개발을 직접 개발자가 퍼블리싱까지 하다보니 프론트엔드 개발자들에게 큰 고통을 안겨주고있었다. 한 사람이 생산할 수 있는 퍼블리싱에는 한계가 있고, 기획에 따라 작품의 몰입을 위해 기능이 변경되고 화면이 수정되는 등 개발자의 정신을 혼미하게 만드는 요소들이 많아서 이런 업무를 하고자하는 개발자를 구하기도 힘들다.

대안으로 생각해 본 것이 회사에서 사용중인 툴인 Figma의 API를 적극 활용하는 것이다. Figma는 모든 파일을 클라우드(?)처럼 서버에서 관리되고 UI작업은 클라이언트에서 진행되게 되어있다. 그래서 웹과 데스크탑 클라이언트에서 동시에 작업이 가능하다.

피그마는 실리콘밸리의 피그마라는 회사에서 만든 툴로 보인다. 자세한건 피그마 소개를 확인해보면 된다. WebGL을 활용해서 3D 작업도 가능한 툴로 만들고 싶은 것 같다.

피그마 API를 이용하기 전에 인증을 받아야하는데 인증을 받는 방법은 다음과 같다.

1. 사용자 설정 메뉴로 들어간다.
2. 아래쪽의 Personal access tokens 섹션에서 토큰을 받는다.

아직 피그마에는 로봇 계정과 같은 기능은 없는 것 같다. 깃헙도 그런 달콤한 것은 없으니 그냥 로봇처럼 사용할 계정을 만들고 이용하면 될 것 같다.

Figma API로는 프로젝트,피그마 파일, 코멘트, 유저 등의 모든 목록과 데이터를 호출할 수 있다. 이 중에서 Figma 파일만 다뤄보고자한다. 더 자세한 내용은 API 문서를 확인해보자.

Figma 파일 Root를 제외한 모든 내부 객체(대지, 이미지, 사각형 등등)들은 모두 Node라는 객체로 이루어져있다. 각 Node의 타입에 따라서 담고 있는 정보와 가능한 기능이 달라진다.

1. DOCUMENT: 최상위 객체이다. 하나만 존재한다.(피그마 파일이라고 이해하면 될 것 같다.)
2. CANVAS: 페이지이다.
3. FRAME: 조금 특이하다. CANVAS 내에 하나의 화면으로 구분할 수 있는 영역이다. Figma의 프로토타입 기능을 이용하면 FRAME이 하나의 모바일 화면처럼 보여진다.
4. 이외의 노드들: 내부 구성요소이다.(GROUP, VECTOR 등등)

아래의 이미지를 보면 좀 더 이해하기 쉽다.

Figma API에서는 각 컴포넌트의 위계를 알 수 있고, 어떤 속성값(위치, 색상, 마진, 보더 등)을 가지고 있는 지를 알 수 있었다. 정확하게 말하자면, 개발자가 화면을 구현하기에 충분한 정보가 포함되어 있고 이 정보를 알면 코드를 생산할 수 있다는 판단이 들었다. 아쉬운 부분도 있는데 스타일이 CSS로 만들기엔 Figma에 특화된 형태로 존재하고, 각 위치의 표현 방식이 절대좌표 표현이기에 반응형 구현은 어려워 보였다.

이번 프로젝트에서의 목표는 커맨드라인 하나로 코드 제너레이팅이 되는 툴을 만들기이다. 그래서 Node에서 스타일을 추출하는 StyleExtractor와 모든 수치들의 pixel 값을 반응형이 가능하도록 상대 값으로 변경해주는 SizeCalculator가 필요해졌다.

npm run transpile (or yarn transpile) 이라는 명령어를 실행하면 다음의 로직이 수행되는 것을 기대하고 만들었다.

// 변환 해야할 대상 노드를 수집
const file = getFigmaFile('<figma-file-key>');
const nodes = crawlEnableNodes(file);

// 노드를 컴포넌트로 변환
const components = [];
for (const node of nodes) {
  const ReactComponent = createComponent(node, { styleExtractor, sizeCalculator });
  components.push(ReactComponent);
}

// 컴포넌트 데이터들을 코드로 생산
generateCode('<output-directory>', components);

실제로 동작한 결과물은 꽤 만족스러웠지만, 아직 미완인 부분이 있어서 유지보수 중이다.

스타일 변경 작업은 쉬웠지만, 이미지나 svg 형태의 데이터 처리에서는 애먹기도 했다. 하지만 앞으로 Figma가 프론트엔드 개발자들의 할 일을 많이 줄여 줄 것을 알게되었고 Figma를 활용한 하나의 프레임워크로 만들어도 좋을 것 같다는 생각이 들었다. Plugin등을 추가하는 방식으로 만든다면 React를 제외한 다른 FE 프레임워크도 지원할 수 있을 것이다.(IOS나 Android도 로블록스처럼 쉽게 구현 되도록 할 수 있을 것 같다.)

Figma에서는 재활용이 편리하도록 Component라는 기능도 제공한다. 디자인 라이브러리를 이용해서 코어 라이브러리와의 1:1 대응을 만든다면 변환을 했을 때 더 읽기 쉽고 직관적인 코드가 만들어질 것 같다.