Figma 기본 기능 총정리 2편
기획자의 Figma :: 실무를 위한 기본기 다듬기
기획자의 Figma 에서 준비한 실무를 위한 기본기 총정리 2편~!!
드디어 올라왔습니다.
총정리 1편에서 다뤘던 Component 만들기!
2편에서는 이 컴포넌트 만들기를 마무리하여 디자인 시스템을 만들고, 이를 통해 Toss 앱 화면의 디자인을 진행합니다. 이번에도 내용이 길다보니 포스팅으로는 2편의 내용들을 간단하게 요약만 합니다.
총정리 2편의 자세한 내용은 동영상을 통해 확인해주세요 :)
Component 구성 및 제작
디자인 시스템 혹은 컴포넌트를 제작할때 '이것이 정답이다!' 할만한 것은 사실 없습니다. (제 개인적인 견해일 수도 있지만)
가장 좋은 것은 서비스의 성격에 맞게, 개발 프레임웍에 최적화 시키는 것이 답이라면 답이랄까요. ㅎㅎㅎ
이번 과정은 우리가 기본 기능으로 학습했던 내용을 바탕으로 컴포넌트 제작, 디자인 시스템 구축, 화면 디자인, 프로토타이핑까지 한번에 가는 여정이기 때문에 Component 역시 복습의 의미로 제작하는 것에 의를 두었습니다. 따라서 우리의 실습 대상 화면에서 필요한 부분만 Component 로 제작하였으니 이 점 감안하고 봐주시면 좋겠습니당
Component대신 현재 Figma에서 제공하는 컴포넌트 관련 기능을 최대한 활용하여 구성했답니다.
Team library Publishing
이렇게 만들어진 디자인 시스템을 팀 라이브러리로 퍼블리싱하고, 이 시스템을 이용해 화면 디자인을 진행합니다.
* Team Library
팀 라이브러리를 구성하면 같은 팀에 속해있는 모든 구성원이 해당 디자인시스템 파일을 활성화하여 사용할 수 있습니다. 단, 이 부분은 구독하고 있는 Figma 요금 플랜에 따라 불가능할 수도 있습니다.
(프로페셔널 플랜부터 가능할거에요.)
Team library현재 실습 중으로 무료 플랜을 사용 중이시라면 디자인 시스템을 구성한 파일에서 Page 를 추가해서 화면을 만드셔도 됩니다. 로컬 컴포넌트의 사용, 편집 방법도 팀 라이브러리를 이용할 때와 다르지 않답니다.
대망의 ....... 화면 디자인...!!!
그리고 이제 드디어~!! 화면 디자인에 돌입합니다.
이 시간을 많이 기다리셨죠? ㅋㅋㅋㅋ
2편에서는 로그인, 비밀번호 입력 화면까지 제작 합니다.
이미 컴포넌트를 생성하고, 디자인 시스템을 퍼블리싱까지 한 상태라 화면 디자인을 하는 것은 어렵지 않은, 아주 재미있는 실습이 되실거에요. :)
Tossa 앱 화면 만들기 - Login, Password한가지 유의하실 점~!!
지금은 우리가 함께 학습한 Figma 기능을 사용해보는 것에 의미를 둔 실습이기 때문에, 실제 디자인 업무를 진행할 때 적용하는 Spacing 은 적용하지 않았습니다. 이 부분은 이후에 다른 프로젝트를 진행하면서 사용할 수 있는 여러 방법을 함께 학습하기로 해요. :)
곧 이어질 총정리 3편에서는
- 화면 디자인 완성
- 프로토타이핑
- Figma 파일을 share 하는 방법까지~!!
다시 한번 단단히 준비를 하고 돌아오겠습니다.
오늘도 고생하셨습니다!
#figma #figma강의 #피그마 #피그마강의 #toss #토스 #앱만들기 #디자인협업 #웹디자인 #웹기획 #figma튜토리얼 #튜토리얼
