Frontender

레이어 하나 또는 그룹 전체를 고르면 그 범위의 코드를 쓴다. 설정 마법사도, 미리 붙여야 하는 레이어 태그도 없다. 이게 핵심 흐름이고, 내보내기 창보다 주니어 개발자에 가깝게 느껴지는 이유다.

CSS만, CSS-in-JS만, Tailwind만, HTML과 CSS, HTML과 Tailwind, JSX와 CSS-in-JS, JSX와 Tailwind를 고를 수 있다. 옛 페이지에 쓸 CSS 생성과 Figma HTML 변환이 필요한 사람, React 앱에 쓸 JSX 생성이 필요한 사람이 같은 플러그인으로 해결하니 도구를 두 개 깔 필요가 없다.

Frontender는 날것의 CSS뿐 아니라 Tailwind 클래스도 이해한다. 직접 만든 설정을 붙이면 그 클래스 이름으로 쓰고, 자기 척도에 맞는 값이 없으면 임의값을 쓴다. Figma Tailwind 변환 흐름에서 팀이 손으로 쓸 법한 마크업에 가까워진다.

플러그인은 오토 레이아웃이나 잘 정리된 레이어 이름에 기대지 않는다. 순서, 계층, 의미를 스스로 판단하므로 디자이너 세 명이 건드린 파일에서도 쓸 만한 구조가 나온다. 내보내기 전에 파일을 정리해 본 사람이라면 차이를 바로 느낀다.

유료 플랜에는 React와 Vue 컴포넌트 출력이 더해져 평평한 마크업이 아니라 재사용할 수 있는 부품이 나온다. Figma React 변환 인수인계에서 저장소에 넣을 수 있는 형태까지 거리가 줄어든다. 무료 플랜은 기본 형식에 머문다.

플러그인이 도는 동안 코드가 패널에 나타나고, 자동 복사가 결과를 클립보드에 넣어 버튼을 찾지 않고 붙일 수 있다. 작은 편의지만 연달아 변환할 때 반복 클릭을 없애 준다.