[Flutter] 디자인 정보 찾는 방법

혼자 공부하거나 개발할려고 할 때, 색상과 스타일을 관리하기 힘들다.

체계적으로 관리하고 시작할려고 하니, 시작할 수가 없다.

디자이너도 없고... 디자인을 모른다.

 

2025.01.11 - [Flutter (플러터)] - [Flutter] 색상, 스타일 등 체계적으로 관리하기

[Flutter] 색상, 스타일 등 체계적으로 관리하기

이 포스팅에서 쓴 내용을 적용하기 위한 색상과 스타일을 찾는 방법을 소개한다.

 

1. 구글에 원하는 앱 종류를 쓰고 Figma 를 붙여준다.

2. 원하는 디자인을 선택하여 피그마를 연다.

 

3. 색상과 텍스트 스타일, 화면 디자인 등에 대한 정보를 얻는다.

 

피그마 파일

좌측 사이드 바에서 Style Guide 를 확인하면 TextStyle 이나 Color 등에 대해 정리된 Page를 볼 수 있다.

 

만약에, 따로 스타일 가이드나 디자인 시스템이 정의 되어 있지않은 파일일 때,

앱 스크린 디자인에서 원하는 위젯을 클릭하면 우측 패널에서 상세 정보를 알 수 있다.

우측 패널에서 속성 확인가능함. Text 의 속성을 알 수 있다.

하지만 모든 피그마 파일들이 잘 정리되어 있는 것은 아니다.

직접 각 페이지를 분석해서 색상 등을 정리해야할 수도 있다.