Figma 기본 기능 총정리 1편!
기획자의 피그마 Figma
기획자의 피그마 figma,
Figma 가입부터 기본 기능을 알아보는 시간까지해서 시즌 1이 끝났습니다. :)
그동안 짧은 영상들과 포스팅으로 기본 기능을 따로 따로 학습했다면,
이제 실무를 진행하기 위한 기본기를 총 정리하는 시간을 가져보려고 합니다. 총 3편으로 나눠서 총정리 편이 진행될 예정이구요. 그동안 학습했던 '기능'에 대한 자세한 설명보다는 실무 진행을 하기 위한 구조를 잡고 Figma 의 주요 기능들을 모두 사용하는 것을 중점적으로 보시면 좋을 것 같습니다.
이번 총 정리편의 자세한 내용은 아래 동영상을 통해서 확인하시는 것을 추천할게요!
포스팅에서는 동영상에서 담고 있는 내용에 대한 설명만 작성되어 있답니다.
30분 가량의 조금 긴~ 동영상이지만..!!
오늘 이 동영상을 보시면 Figma 사용법 그리고 실무에서의 사용 방법에 대한 기본적인 개념을 잡을 수 있답니다.
*** Figma 기본 코스 총정리 1편!! 동영상으로 감상해주세요.
우선 새로워진 토스 앱 화면을 기준으로 만들고, 프로토타이핑을 할 대상 화면을 선정해보았습니다.
로그인, 메인 그리고 송금 화면까지 제작하면서 그동안 학습했던 내용들을 알차게 모두 써보도록 하겠습니다.
* 아래 스크린샷은 제가 사용하고 있는 iOS 토스 앱의 서비스 화면을 캡쳐한 화면입니다.
* 개인정보 보호를 위하여 은행, 금액, 계좌 모두 임의 정보로 편집한 가상 데이터입니다.
출처 Toss app 스크린샷
출처 Toss app 스크린샷Color & Text Style
이번 실습에서는 컬러, 텍스트를 포함해서 컴포넌트를 화면 디자인과 별도로 관리하기 위해서 My Design System 이라는 새로운 피그마 파일을 만들었습니다. 이 파일에서 필요한 스타일과 컴퍼넌트를 구성할 예정입니다.
Figma - Color, Text StyleTip.
화면에 사용되는 컬러, 텍스트, 컴포넌트 즉 디자인 시스템을 반드시 별도의 파일로 두어야만 하는 것은 아닙니다.
규모가 작은 서비스라면 해당 파일 로컬 스타일로 지정해서 사용하셔도 무방합니다.
하지만 개인적으로는 별도 파일로 관리를 하시는 것을 추천합니다. 공통 정의에 해당하는 부분을 한번에 관리할 수 있는 편리함도 있지만, 서비스의 범위가 넓거나 연관되는 여러 제품이 있는 경우에도 동일한 패턴을 유지시키기 위해서는 별도의 디자인 시스템 파일로 분리하여 관리하는 것이 효율적입니다.
Screen Layout
서비스에서 사용할 공통 화면의 타입, 구성을 설정합니다.
서비스의 특징, 제공되는 기능 및 킬러 포인트뿐 아니라 유연한 사용자 경험까지 고려가 필요한 사항입니다. 이 부분에 대해서는 웹 기획 업무에 대해 다룰때 조금 더 자세히 알아보기로 해요. :)
Toss 앱 로그인, 메인, 송금 메뉴에서는 아래와 같이 총 3개 타입의 레이아웃이 필요합니다.
프로젝트나 작업 스타일에 따라 차이가 있을 수 있지만 저의 경우에는 모든 레이아웃을 컴포넌트로 만들지는 않습니다.
특히나 화면 설계 단계에서는 변경 발생하는 경우도 빈번하기 때문에 각 화면마다 공통적으로 사용해야하는 가이드 정도만 설정하여 사용을 하는 편입니다.
1. 바닥(?) 화면
앱 실행 시 해당 화면 자체에서 진행되는 프로세스 화면
바닥이라고도 하고, 바디라고도 하고.... 뭐 그렇습니다.....ㅎㅎㅎ
2. Full Screen Dialog
다이얼로그로 제공되지만, Full 사이즈로 제공되는 화면
3. Bottom Sheet 또는 Action Sheet로 불리는 요 녀석들
앱의 하단 영역(Bottom)에서 아래 바닥 화면을 불투명하게 처리하고 그 위로 올라오는 형식의 화면.
필요한 액션 진행을 위하여 사이즈는 다양하게 사용될 수 있습니다.
각 스크린에 대해 정의를 완료했습니다.
정의된 스크린 중 Dimed, Action sheet : Full, Half 총 3가지의 타입만 Component로 지정했습니다.
Component
feat. Auto layout & Variants
그리고 대망의 컴포넌트(Component)를 만들어 화면에 필요한 요소를 구성합니다.
일괄적으로, 또 효율적으로 화면 제작이 가능하도록 최소 단위의 컴포넌트를 만들고, 이것을 조합하여 화면에 들어가는 요소들을 구성합니다.
물론 Variant 기능을 활용해서 사용자의 액션으로 변경되는 디자인까지 커버할 수 있도록 제작합니다.
다음 2편에서도 주요한 컴퍼넌트를 만드는 방법과 더불어 화면 구성하는 방법, 마지막으로 프로토타이핑까지의 과정까지 담았답니다.
그럼 다음 편도 기대해주세요~!!
※ 참고사항
대부분 화면에 대한 명칭은 메터리얼 디자인 (https://material.io/) 에서 정의된 Component 명칭을 참고하였습니다.
#피그마 #figma #figma강의 #figma튜토리얼 #figma실무 #피그마실습 #디자인시스템 #designsystem #웹기획 #앱기획 #웹디자인 #웹기획자 #기획자의피그마
