피그마 사용법

Team 생성

• Team을 생성하여 다른 사람들과 함께 디자인 협업을 진행 가능

New file 생성

• design file -> 디자인을 진행하기 위해 파일 생성
• figzam file -> 브레인스토밍, 협업을 위한 화이트보드

상단 메뉴바

• move tool : 선택
• frame : 대지 생성(아트보드 역할)
  • 기본으로 휴대폰 사이즈 선택 가능
• shape : 도형 그리기
  • 프로필 사진 등 그릴 때 보통 사용
• pen : 그리기
  • 아이콘 그릴 때 사용 가능
• Text : 텍스트 작성
• hand tool: 잡기
• comment : 코멘트 남기기

우측 사이드 메뉴

• align : 가운데 정렬 등
• 치수 : 숫자로 사이즈
• constraint : 다른 컴포넌트에 연결 가능(안드로이드 컨스트레인트 레이아웃과 동일한 개념)
• color : 색상 변경
  • 자주 사용하는 색을 이름으로 저장 가능 → 디자인 색 변경 시 한번에 변경 가능
• Stroke : 테두리나 모양 설정 가능
• Effect : 그림자 설정
• export : 외부로 컴포넌트 저장

컴포넌트 이름 설정

• 이름 앞에 특수 문자를 붙여 개발에 사용할 것을 특정할 수 있음.

community

• plugin : community에서 유용한 기능 설치 가능
• 유용한 plugin : Unsplash
• Unsplash : 도형에 이미지를 바로 넣을 수 있음.
• 다양한 UI KIT 다운 가능(icon, wireframe 등)

여러 개의 똑같은 양식의 컴포넌트

• Ctrl + Alt + K → 컴포넌트로 만들기
• 사용할 만큼 복사 붙여넣기 후 add auto layout으로 정렬 가능

프로토타입 제작

• 기기 및 모델 지정
• 컴포넌트를 프렘과 연결하여 이동 설정 가능
• 컴포넌트들을 프레임으로 묶어 스크롤도 가능

🔔 느낀 점

• UI 디자인 툴에는 어도비XD, 스케치, 인비저 스튜디오, 피그마 등 다양
• 안드로이드 개발자가 간단하게 디자인하고 협업을 하기에 피그마가 적당
• 플러그인 기능과 커뮤니티를 통해 KIT를 통해 좋은 디자인을 잘 끌어쓸 수 있음
• 프로젝트 시에 디자인이 어려워서 생략하고 개발에 무작정 들어가는 경우가 있었지만 이제는 간단하게 디자인 가능