Function12를 이용한 figma to flutter

과정

1. figma페이지에서 share를 클릭, link copy
2. function12 웹 사이트 가입
3. function12 마이페이지로 가서 프로젝트 생성
4. type , export ---> flutter로 선택 --> zip파일 다운로드
5. zip파일 풀기
6. vscode에서 열기
7. pub get
8. google-font 버전 수정 --> google_fonts: ^4.0.4
9. main에서 Scene위젯을 빌드하고 있는데, 딱히 지정을 figma에서 페이지 지정을 상세히 하지 않았다면, 서로 다른 모든 페이지가 Scene라는 이름을 공유해서 커스텀 위젯을 구현함
10. import하는 페이지를 계속 바꿔줘가며 확인하면서 디자인 가져와서 확인해야 한다. (아래 코드 예시)

import 'package:flutter/material.dart';
import 'package:myapp/utils.dart';

1번 Scene -- 주석처리 안되어 있기 때문에 현재 보여지는 페이지
import 'package:myapp/page-1/.dart';

2번 Scene
// import 'package:myapp/page-1/-jcm.dart';

3번 Scene
// import 'package:myapp/page-1/-zCR.dart';

 

코드 찾기 tip

• 찾을 페이지의 이름을 function12에서 확인
• vscode에서 전체 찾기 돋보기에 입력
• 포함하고 있는 dart파일을 찾아서 import

개인 의견

• 나는 디자이너분이 디자인한 페이지를 빠르게 위젯으로 구현할 때 상당히 꽤 유용하다고 생각한다.
• 실제로 활용해봤는데 디자인 적용 속도면에서 만족할 만한 속도가 나와서 앞으로도 종종 사용할 것 같다.

---

출처 & 참고문헌

• https://www.youtube.com/watch?v=ookWwtF7GX8