OROR Forge: 카카오가 만든 Figma 디자인-코드 변환기

피그마의 디자인을 리액트 코드로 자동으로 변환해주면 얼마나 편리할까요?


카카오 에서는 사용 중인 Figma의 디자인을 그대로 정확한 화면 코드로 만들어 낼 수 있는 ‘픽셀 퍼펙트한 퀄리티 높은 코드(Pixel Perfect Code)’를 생성하면서도,별도의 추가적인 작업 없이 디자인 변경 시 페이지를 서비스에 반영될 수 있도록 하는 것을 목표로 피그마 플러그인 인 OROR Forge를 개발하였다고 합니다.


OROR Forge의 변환 프로세스는 노드 선택과 속성 추출을 거쳐 DOM으로 변환하는 단계로 구성됩니다. 그 후, 이 HTML/CSS 코드는 React와 TailwindCSS로 변환되어 실제 개발 환경에서 사용될 수 있도록 합니다. TailwindCSS 변환은 기존 인라인 스타일 CSS 속성을 TailwindCSS 클래스로 매핑하는 빌더 함수를 통해 이루어집니다. 또한, HTML 코드는 JSX 문법에 맞게 변환되며, className에 TailwindCSS 코드가 적용된 React 컴포넌트로 생성됩니다. 이를 통해 Figma 디자인에 외부 React 컴포넌트를 쉽게 통합할 수 있습니다.


OROR Forge는 사내 에서 필요에 의해 개발된 도구로, 베타 버전 출시 이후 카카오 팀은 이벤트 페이지, 홈페이지 및 서비스 페이지 제작 과정에서 큰 효율성 향상을 경험했다고 합니다. 현재는 TailwindCSS만 지원하지만, 추후 Styled Components 지원도 계획 중이라고 합니다.

최근에 국내에서도 유용한 라이브러리들이 활발히 개발되고 있어서 아주 좋네요.

OROR Forge의 정식 버전이 출시 되면 실무의 도입을 고려해봐도 괜찮을것 같습니다.


https://tech.kakao.com/2024/01/09/ororforge-1/

OROR Forge: Figma to Code 도구 제작기 (1) 디자인을 코드로 만들어보자!

tech.kakao.com

OROR Forge: Figma to Code 도구 제작기 (1) 디자인을 코드로 만들어보자!

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 1월 16일 오전 1:25

 • 

저장 20조회 3,138

댓글 0

    함께 읽은 게시물


    "배포했으면 스펙이지"

    어떤 서비스가 버그를 가진채로 출시되었고, 사용자들이 그 버그를 전제로 기능을 사용하고 있다면, 그리고 그 위로 너무 많은 새로운 기능들이 쌓여있다면 그건 버그가 아니라 스펙(기능)이라는, 언젠가부터 들었던 업계의 유명한 블랙 유머다.

    ... 더 보기

    클로드 코드 Max 한 달 사용 후기

    ... 더 보기

    클로드 코드 한 달 사용 후기

    K리그 프로그래머

    클로드 코드 한 달 사용 후기

     • 

    댓글 2 • 저장 9 • 조회 2,718


    《관심은 가장 순수한 형태의 관대함이다》

    ... 더 보기

     • 

    저장 3 • 조회 452


    자바진영의 다양한 동시성처리

    ... 더 보기

    코프링에서 액터모델 AI연습장

    A

    ... 더 보기

    kopring-reactive-labs/AgenticCoding at main · psmon/kopring-reactive-labs

    GitHub

    kopring-reactive-labs/AgenticCoding at main · psmon/kopring-reactive-labs