[Figma] 피그마 입문 A to Z 부트캠프 메타코드_모바일 화면 기초 UI 세팅하기 Android/모바일 화면 기초 UI 세팅하기 IOS/PC 화면 기초 UI 세팅하기

 

 

 

* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다.

 

모바일 화면 기초 UI 세팅하기 Android

 

리소스 파일 다운받기

먼저 안드로이드와 ios 관련 ui kit 리소스 파일을 열어줍니다.

파일을 열면 안드로이드의 앱바, ios의 앱바, 키보드 등의 ui 화면들이 보이는데요.

오늘은 이걸 활용해서 ui 화면 세팅을 진행할 것입니다.

 

 

프레임은 android로 설정해줍니다.

다양한 디바이스 기종들을 지원하기 때문에 디자인 패널에서 설정 가능합니다.

 

 

 

리소스 파일에서 앱바를 가져온 뒤 detach instance을 설정합니다.

이후, Prototype 설정에서 Scroll behavior의 포지션을 Fixed로 변경하면 스크롤 중에도 앱바를 고정시킬 수 있습니다.

 

모바일 화면 기초 UI 세팅하기 IOS

 

 

ios 모바일 화면 기초 ui 세팅도 동일합니다.

해당 리소스 파일에서 ios 관련 ui를 가져온 뒤 , detach instance 설정 -> prototype ->scroll behavior fixed로 변경하면 됩니다. 

 

PC 화면 기초 UI 세팅하기

 

pc 화면 또한 동일한 ui세팅을 지니는데요.

다만 반응형 ui를 생성하고 싶을 경우, layout grid를 설정해주면 됩니다.

columns에서 원하는 count, type, margin 등을 설정하면 반응형 ui 설계가 가능합니다.

오늘은 이렇게 모바일 화면 기초 ui 세팅(안드로이드,ios),그리고 pc 화면 기초 ui 세팅하기에 대해 알아보았습니다.