📌
1. 트리거와 액션
2. 애니메이션
3. 디자인 핸드오프
4. 디자인 공유
1. 트리거와 액션
- 트리거
액션을 시작하는 조건이나 이유, 사건이 발생했다는 뜻에서 이벤트라고도 불림
- 액션
트리거로 인해 만들어지는 결과
💡
프로토타입을 설계할 때는 ‘-하면 -하게 -한다’ 라는 문장으로 기억하면 쉽다
ex. 버튼을 누르면 (트리거) 색상이 천천히 (애니메이션) 바뀐다 (액션)
적용🤓
디자인 패널에서 프로토타입으로 이동하여 아무것도 선택하지 않은 상태에서 기준이 되는 기기를 선택할 수 있다.
모바일 기기는 사용자가 터치(on Tab)를 하며 사용하고 컴퓨터나 노트북은 클릭(on Click)을 하며 사용하기 때문에 트리거의 차이가 있다.
요소와 요소 사이를 드래그해서 이어주면 커넥션이 생기면서 인터렉션을 설정할 수 있는 플로우 패널이 열린다.
거기서 트리거, 액션, 이동할 요소 그리고 애니메이션을 설정할 수 있다.
요소를 선택하고 인터렉션의 +버튼을 클릭하여 추가할 수도 있다.
2. 애니메이션
- 애니메이션
트리거를 통해 액션을 실행할 때, 어떻게 실행할 것인지. 즉, 인터렉션 형태 지정
- 스마트 애니메이트
이름이 같은 요소가 있다면 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어주는 기능
조건
- 움직일 요소의 이름이 같은지
- 레이어 구조가 같은지
애니메이션에서 스마트 애니메이트를 적용할 수 있다.
지속 시간 밑의 부분에 마우스를 호버하면 애니메이션 효과 예시를 볼 수 있다.
3. 디자인 핸드오프
개발자에게 전달하기 위해 디자인 사양을 정리한 문서
핸드 오프를 자세하게 작성해야 내가 의도한 디자인대로 실제 개발이 가능하다.
규칙
- 통일된 구성
어떤 디자인을 설명하더라도 항상 최대한 일관된 구성과 목차로 설명해야 소통이 원할하다 - 최대한 자세하게
아무것도 모르는 사람이 보더라도 어떤 디자인인지, 어떤 목적인지, 어떻게 만들면 되는지 이해하기 쉽도록 자세하게 작성 - 쉬운 언어로
디자이너만 아는 표현이 아닌 개발자, 기획자도 이해할 수 있도록 최대한 쉬운 표현으로 풀어서 작성
구성
- 디자인의 전체적인 구조
- 각 프레임의 크기 및 길이
- 각 프레임의 여백 및 간격
- 사용된 폰트 및 컬러 스타일
플러그인 사용🤓
Design Doc이라는 플러그인을 설치하고 원하는 프레임을 선택하여 적용시켜준다.
핸드오프에 추가할 내용을 정할 수 있다.
이런 식으로 요소들의 정보를 담은 내용이 생성된다.
💡플러그인은 보조 도구로 너무 의존하지는 말기!
4. 디자인 공유
- 디자인 정리하기
디자인을 공유하기 전에 보기 좋게 정리를 해준다.
UI 컴포넌트들을 담은 페이지는 'UI kit'라고 이름을 바꿔준다.
섹션 기능을 사용하여 컴포넌트별로 섹션을 잡아주고 위와같이 보기 쉽게 정리를 해준다.
이런식으로 화면을 담은 페이지는 '디자인'이라고 이름을 바꿔준다.
또한 새로운 페이지를 추가하여 표지를 만들어주고 표지 요소를 썸네일로 적용시켜준다. (1920 x 1080)
시간이 조금 지난 후에 목록으로 나가보면 이렇게 썸네일이 적용되어있다.
- 디자인 공유하기
상단 우측을 보면 파란색의 Share 버튼을 클릭하여 공유 속성을 적용할 수 있다.
프리뷰 전체화면에서 상단 우측의 Share prototype 버튼을 클릭하면 프로토타입을 공유할 수 있다.
만약 컴포넌트와 같은 요소를 공유하고 싶다면 요소를 클릭한 후 우클릭을 하여 Copy/Paste as로 간다.
Copy link to selection을 클릭하면 링크가 클립보드에 복사된다.
🥰느낀점
이로서 피그마 기초 강의를 수료했다.
피그마를 사용은 해봤지만 어려운 기능들은 전혀 몰랐는데 이렇게 여러 기능들에 대해서 배워보고 사용해볼 수 있어서 좋았다. 또한 강의 챕터마다 숙제가 있어서 숙제를 수행해보며 사용 방법을 익힐 수 있어서 좋았다.
피그마 사용법 뿐만 아니라 디자인 시스템, 디자인 규칙 등 이론적인 부분에 대해 알려줘서 아주 유익한 시간이었다.
