[flutter] figma to code (피그마에서 플러터 코드 자동 생성하기)

피그마로 UI 작업한 내용을 코드로 자동 생성하고 싶을 때는 figma plugin 을 사용해서 만들수 있습니다.

 

우선은 plugins 를 추가해줍니다.

 

 

find 에서 figma to code 를 검색하면 아래와 같은 아이콘을 가진 항목이 보입니다.

저는 이미 추가를 했기 때문에 recents 항목에 나타나는데요. 처음 검색하시면 아래쪽으로 조금 스크롤 해야 보일수도 있습니다.

검색된 내용들 중 <> 형태의 아이콘을 가진 figma to code 를 실행합니다. (동일한 이름을 가진 plugins 들이 있습니다.)

 

실행하면 추가가 됩니다. 이제 피그마에서 생성한 UI 코드를 생성해볼 수 있습니다.

 

생성하고싶은 부분 또는 프레임 전부를 선택 후 오른쪽 클릭합니다.

plugins -> figma to code(HTML, Tailwind, Flutter) 를 실행합니다.

 

실행하면 아래와 같은 화면이 보이고 flutter 를 선택해주면 코드가 생성됩니다.

copy to clipboard 를 선택해서 붙여넣은 후 사용하시면 됩니다.

자동 생성된 코드가 원하는 형태가 아닐경우에는 약간 수정해야할 수도 있습니다. 

 

이상으로 피그마에서 플러터 코드 자동 생성하는 플러그인을 정리하였습니다.

직접 생성하는것도 좋지만 이런식으로 활용해서 다른 작업에 시간을 더 사용하는것도 괜찮은것 같습니다.