Figma 기본 기능 총정리 3편
기획자의 Figma :: Design, Prototype
실무에서 바로 쓸 수 있는 기본기 총정리 세번째 시간~!!
드디어 돌아왔습니다!
휴우~ 2편의 동영상이면 알차게 정리할 수 있지 않을까 생각했는데...
역시 Figma 는 만만치 않아요. ㅋㅋㅋ 결국 4편까지 가야 기본 기능 총정리가 완료될 것 같습니다.
*** 자, 오늘의 총정리편 역시 동영상으로 보시는 것을 추천합니다!
Design
지난 편에 이어 Toss 앱 화면 디자인을 마무리합니다.
기획자의 Figma피그마로 모바일용 화면을 설계할때 저는 기준이 되는 디바이스의 상/하단 고정 기능 패널을 넣은 상태에서 진행을 합니다. 반드시 그래야만 하는 것은 아니지만, 개인적으로는 이 방법을 선호합니다. 모바일 환경에서 해당 화면이 구동이 될 때 고정으로 제공되는 디바이스의 상단 Status bar, Indicator 부분을 어떻게 처리해야 할 것인지를 놓치지 않고 정의할 수 있습니다.
기획자의 Figma단말의 고정 기능에 대한 부분은 Figma Community를 통해서 iOS, Android GUI 파일에서 가져와서 사용하는 편입니다. 찾아보시면 다양한 버전으로 각 OS GUI 파일을 제공하는 사용자들이 많이 있답니다.
제가 지금 잘 사용하고 있는 OS GUI kit 을 공유합니다.
* Figma Community iOS GUI kit
https://www.figma.com/community/file/785240844733806071/iOS-12-GUI
* Figma Community Android GUI kit
https://www.figma.com/community/file/905674225211860724/Android-Nougat-GUI
Prototype
자~ 디자인을 다 끝내고 드디어 프로토타이핑에 들어갑니다. :)
프로토타이핑 기능 역시 최근 피그마에서 업데이트되기도 했고, 하나씩 설정하다보니 설명이 필요한 부분이 은근 많아져 이번 프로토타이핑도 2개의 편으로 나누게 되었습니다.
기획자의 Figma우선 프로토타이핑 결과물에서 조금 더 현실감(?)을 주기 위해서 iOS 홈 화면을 하나 더 추가했구요.
여기에 Toss 앱 런처 아이콘을 추가했습니다. 이 아이콘을 터치하면 토스 앱이 실행되는 느낌으로 잡아주었습니다.
Figma 의 프로토타이핑 기능은 오른쪽 디자인 패널 옆에 위치하고 있습니다.
해당 탭을 클릭하시면, 프로토타이핑 기능이 제공됩니다.
기획자의 FigmaPrototype Flow 기능
최근에 업데이트되면서 생긴 기능 중 하나입니다. 프로토타이핑의 플로우를 설정할 수 있는 기능이랍니다.
특히나 모바일 화면을 프로토타이핑하게 되면, 서비스에서 제공하는 여러 플로우를 만들기 마련인데요. 이럴때 각 플로우대로 설정할 수 있어서 훨씬 편해졌네요.
위의 스크린 샷에서 보시면 번호가 붙여있죠?
1번 같은 경우는 프로토타이핑 플레이 화면에서 Flow 패널을 닫는 기능입니다.
모바일 화면인 경우에는 상관없지만, 데스크탑 화면을 프로토타이핑하는 경우 이 패널을 닫고 보는 것이 훨씬 편합니다.
2번은 프로토타이핑 화면 내에서 코멘트를 등록할 수 있는 기능입니다.
이 기능 전 정말 매우 환영입니다. ㅋㅋㅋㅋ 기존에는 프로토타이핑 화면을 확인 후 의견을 남기기 위해서는 Figma 디자인 파일로 돌아와서 해당 화면을 찾아서 의견을 남기고자 하는 부분을 클릭해서 코멘트를 남길 수 있었거든요. 그에 비해서는 코멘트를 남길 수 있는 과정이 심플해져서 넘나 대환영입니다.
Figma 의 프로토타이핑 기능이 매우매우 디테일하진 않지만, 사용성을 타진하는데 있어서는 무리 없이 사용할 수 있을만큼 다양한 기능을 제공하고 있습니다. 그러다보니 설명이 점점 더 길어지네요 ^^;;;
다음 편에서 프로토타이핑 실습을 마무리 할 예정이니 많이 기대해주세요.
오늘도 고생하셨습니다~!!
#figma #figma강의 #피그마 #피그마강의 #toss #토스 #앱만들기 #디자인협업 #웹디자인 #웹기획 #figma튜토리얼 #튜토리얼 #prototype #프로토타이핑
