카카오에서 Figma로 된 디자인에서 코드를 만드는 자동화 도구를 만든 과정입니다. 예전에 서비스 개발할 때 포토샵 파일을 웹으로 옮기는 작업을 많이 했었는데 취향상 계속 서비스 개발을 했으면 꽤 관심을 가졌을 분야인데 요즘은 디자이너와 협업하는 일은 많지 않아서 글만 재미있게 읽었습니다. 개인적으로는 Figma를 이용한 협업도 경험해보지 못해서 궁금할 따름입니다.


디자인을 코드로 뽑아내기 위해 상용 솔루션 중 Amplify Studio와 Locofy를 리서치했는데 인상적인 기능은 있었지만 각각 한계가 있었기에 결국 직접 만들기로 결정을 합니다.


Figma의 디자인을 픽셀 퍼팩트한 코드로 만들어 내기 위해서 Figma의 Property, Auto Layout, Constraints, Text를 CSS의 Property, Flexbox, Positions, Text로 어떤게 변환을 했는지 자세히 나와있습니다.


그리고 이러한 코드를 현업에서 바로 사용하기 위해 인라인 스타일을 사용하는 대신 TailwindCSS를 적용해서 React 컴포넌트로 생성화까지 자동화한 과정이 담겨 있습니다.


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

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

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

tech.kakao.com

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

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 1월 30일 오후 12:51

댓글 0