디자인을 하면 퍼블을 해준다? 퍼블셔틀 builder.io 사용기!

 

오늘의 스터디!

builder.io 사용기를 적어보겠다!

디자인한 것을 코드로 변환해주는 플러그인을 찾다가

builder.io를 찾게 되었는데,

이게 완전 사기다.

 

코드로 잘 바꿔주는 사이트 찾느라 시행착오가 꽤 있었지만ㅠ0ㅠ

builder 짱짱맨...

어쨌든 builder.io는.. 한마디로 표현하자면!

 

 

디자인을 하면!!!!! 퍼블을 해준다고!!!다.

퍼블셔틀 builder.io를 만들어주신 분들께 감사인사를 전하며..

사용기 작성 시작!~ 희희

 

---

 

 

https://www.figma.com/community/plugin/747985167520967365

 

Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more) | Figma Community

 

우선 이 링크에 들어가 builder.io를 실행해주시길 바랍니다!

(그 전에, https://www.builder.io/에서 sign up 해주세요.)

 

 

---

 

 

builder.io를 실행시켜 보면 우측 사이드바에 위 사진처럼 뜬당!

 

실행시키면 저 위에 사진 처럼 뜨쥬!?

'Select layers to export to code'

ㅇㅋ 접수완

코드로 변환하고 싶은 페이지, 즉 프레임을 선택하면!?!

 

 

 

Generate code 클릭!!

 

끝.

너무 간단합니다.....

이러면 코드로 바꿔주다니 뿌에엥

 

 

 

너무 쉽죠?????

심지어 위에 기기모양 (pc, tablet, phone)누르면

반응형으로도 보여줌!!!!!!

 

 

중앙 상단 이녀석들!!! 말하는 겁니다ㅎㅎ

 

한번 폰 버전으로 봐볼까요~~??

(참고로 따로 반응형 디자인 작업 안했습니다!!)

 

 

 

ㅋ....??ㅋ?ㅋ?ㅋ?ㅋ?ㅋ? 저 칼럼에 깨지는 아이콘은 뭘까요?;;;

 

 

저 회색,, 깨진거같아 보이는 아이콘은 뭐지?..하고 확대해서 봤는데

이미지 로딩중ㅋㅋㅋㅋㅋㅋ이었네요

시간 지나면 이미지 나타나니 신경쓰지마세요~!!

 

 

뭐...이부분은 그렇고.

반응형으로 바꿔보니 몇몇 배치라던가.. 이런건

정확히 맞지는 않지만..!!!!!!!!

이정도면 아주 ㄱㅊㄱㅊㄱㅊ~~~~~ ㄴㅇㅅ

 

 

하지만 이렇게 몇개 틀어진 요소들은 어떻게 수정하느냐?

찾아보던중.....😱

 

 

https://www.builder.io/c/docs/guides/responsive-design

Responsive design with Builder.io - Builder.io

반응형 관련 가이드 보려면 위 링크 참고!! >.0

 

 

위치 수정은 사이트 (피그마 말고) 오른쪽 사이드바에서 할 수 있더라^^

두번째탭 클릭해서 세부적인 것들 조정하면 된다! 신세계 +0+

 

 

이제 본격적으로 디자인을 시작해보자!!!!!