WIL) 커머스 앱 디자인시스템 제작과 프로토타입 제작

개발환경에 맞게 디자인하기 위해서는 구조적인 부분에 대한 필요하다.
우리가 보는 디지털 화면들은 모두 코드 블록으로 이루어져있는데, 
블록들이 서로 더해지거나 빠지더라도 인터페이스가 흔들리지 않도록
오토레이아웃과 컨슨트레이트를 잘 활용하는 것이 매우 중요하다.

 

코드 블록의 구조 알아보기

우선 코드 블럭은 피그마에서 프레임을 활용해 만들고 "컨테이너"라고 명칭한다.
(모든 코드 블록은 내부에 들어있는 개체(콘텐츠)와 개체를 둘러싼 패딩으로 만들어짐!)

패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

"컨테이너"는 "오토레이아웃"을 사용해 패딩값을 주어 만들어진다.
오토레이아웃은 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 중요 기능이다!
기기별 해상도에 맞게 유연하게 대응할 수 있도록 오토레이아웃을 활용한다.

 

컨테이너와 오토레이아웃을 잘 만들었다면 그 다음은?
프로토타입 적용시 어떻게 진행이 되는지 파악하고 레이어를 정리한다.

프로토타입 적용시 주의할 점! 
1. 컴포넌트에서 적용할 수 있는 애니메이션은 미리 고민하고 적용해두기.
2.캐러셀을 적용하기 위해 슬라이드 컨테이너와 컨텐츠 정리해두기.

 

2주간 실무에 당장 활용할 수 있는 피그마 툴 사용법을 읽혔다.
컴포넌트 제작하고 관리하고 개발을 고려해 구조를 짜다보니 
내가 쓰던 정도의 피그마가 아닌 그 이상을 다뤄야하더라..
그래도 쉽고 직관적인 툴이라 학습이 그렇게 어렵지 않다는게 다행이다!