[Flutter] 피그마로 레이아웃 잡고 소스뽑기

우선 그럴싸한 페이지가 필요하다.

내가 직접 레이아웃을 짜는건 시간 대비 진행이 느리다.

 

1. figma에서 레이아웃을 만들어보자

사실 샘플이라, 이렇게 간략하게 만들수 있다.

로그인 버튼을 누르면 다음 레이아웃으로 이동하고,

해당 이동된 레이아웃에서는 Button이 있어, 이를 클릭하면 다른 팝업이나 신규 경로로 이동하고, 아래 버튼을 누르면 돌아간다.

2번째 레이아웃 상단에는 이미지를 넣어서 체크를 할 예정이다(리사이징 같은 )

 

 

뭐 무튼 이렇게 레이아웃 잡은 걸 기준으로 Next!

 

 

2.Funtion12

 

피그마의 레이아웃을 플러터 소스로 간편하게 구현해주는것이다.

실제로 이렇게 하면, 레이아웃을 잡는데 들이는 소스를 확 줄여준다.

내가 디자이너나 기획자 퍼블리셔를 할거면 이걸 직접 소스를 짜면 좋겠지만, 나는 백엔드 프론트 개발자기때문에 

툴과 기술의 발전을 등에 업어보자. 아래 사진에서 피그마 주소를 적으면 소스로 변환해준다.

 

http://function12.io/

 

3. 플러터 프로젝트 소스에 부어주기

Export한 프로젝트를 그대로 써도 되지만, 나는 소스를 내 프로젝트 복붙하는 식이다.

그래야. 뭔가 자질 구레한 이슈가 덜난다.

 

4.소스 옮기고 빌드하기

패키지명 수정과 디펜던시 필요한 것들은 추가해주면 된다.

 

 

5. 빌드 성공적으로 잘된다.