인프런 커뮤니티 질문&답변

김다현님의 프로필 이미지

작성한 질문수

디자인 시스템 with 피그마

컴포넌트를 리액트기반 코드로 추출하는 법

해결된 질문

23.07.20 09:22 작성

·

600

2

디자인시스템을 json코드로 추출이 가능한대
혹시 컴포넌트를 코드로 추출하는 방법이 없을까요?

overlay플러그인을 이용해봤는데 생각보다 오류가 많아서 혹시나 하여 여쭈어봅니다ㅠㅠ

답변 2

2

범쌤 님의 프로필 이미지
범쌤
지식공유자

2023. 07. 21. 07:15

안녕하세요 김다현님 :)

아직까지 정확하게 컴포넌트를 코드 로직으로 구현할 수 있는 완벽한 도구는 없습니다.

예전에 웹디자인만 하면 알아서 사이트를 퍼블리싱 해주는 플러그인들이 있었는데
디자이너가 정확한 레이어 네이밍, 오토레이아웃을 사용해야 ai가 제대로 인식 후 태그와 css를 생성해줬었습니다.

거기에도 실제로 코드를 까보면 많은 문제점들이 있었죠,,, 쓸데없는 css 속성들이라던가 제대로 부모를 잡지 못하고 position을 사용하는 문제 등..

아직까진 정확하게 디자인을 코드로 옮겨주는 툴은 없는것 같습니다🥲

한편으론 다행(?)으로 느껴지기도 하네요 ㅎㅎ

역시 사람 손을 타야 제맛이죠

감사합니다 :)

1

김다현님의 프로필 이미지
김다현
질문자

2023. 07. 25. 14:22

답변남겨주셔서 감사합니다!^^