제로의 마케터 일지 - 피그마 시작하기(3)

• 프로토 타입

프레임 선택 - '프로토 타입' 클릭 - ㅇ모양 클릭 시 화살표가 나옴

 

도형을 클릭시 오른쪽 프레임으로 이동하는 프로토타입 세팅

 

 

디바이스는 프레임 사이즈와 같게 선택

실행 클릭

설정한 프로로타입을 실행해볼 수 있다

 

• 스위치 만들기

켜짐과 꺼짐 스위치를 만들고 각각을 그룹화 하기

두개의 스위치 선택 후 컴포넌트 세트 누르기

서로를 클릭하면 서로로 바뀌는 프로토 타입 생성

 

새 페이지에서 어셋의 스위치 가져오기

확인하기

 

=  베리언트를 사용할 수 있는 프로토 타입은 베리언트 사용하기

 

• 버튼 인터랙션

버튼 세 개를 만들고 각각 그룹화, 베리언트

베리언트 설정을 위와 같이 바꿔주고

 

 

첫 번째에서 두 번째 버튼의 프로토 타입을 위와 같이 설정

 

미리보기 확인

 

옆에 새 프레임을 만들고 버튼 생성

버튼 클릭시 새 프레임으로 가는 프로토 타입 생성

 

파란 버튼 클릭시 프레임 1로 가는 프로토 타입 생성

플로우 버튼을 실행을 원하는 프레임으로 이동한 후 재생 클릭

 

• 캐러셀 인터랙션

 

Alt + 마우스 포인터 바깥으로 향하면 간격이 보임

 

사각형 이미지를 프레임 안으로 넣어주기

 

이미지 세 개 그룹화

 

간격 맞춰서 방향에 맞는 그림이 중앙에 위치하도록 배치

 

 

중앙에 올 그림을 왼쪽에 배치 후 프레임 이름 변경

그림과 같이 원형 만들기

베리언트 만들고 설정해주기

 

드래그 프로토 타입

탭 프로토 타입

프로토 타입 생성

 

• 모달창 인터랙션

해당 이미지를 만들어 주는데

'모달창입니다'의 백은 꼭 프레임으로 만들어야 프로토 타입 생성이 가능

 

오픈 오버레이로 프로토 타입 생성

 

 

오버레이를 메뉴얼로 바꾸고 위치를 조정해준다

 

어디든 누르면 모달창을 꺼지게 해주는 옵션과 백그라운드를 추가해주는 옵션 체크

 

• 내비게이션 드로워 인터랙션

디자인 후, 프로토 타입 설정 - 메뉴창 클릭시 오버레이 오픈

 

닫는 버튼 클릭시 오버레이 닫힘

 

• 공유와 협업

Export 메뉴를 사용해서 내보내기 (정확한 내용은 개발자와 상의)

 

파일명 규칙

 

• 팀프로젝트

혼자 작업한다는 의미

퍼블리싱을 하면 팀 프로젝트로 공유 가능 - 유료 버전만 가능

 

• 피그잼

 

---

 

피그마 강의를 다 들었는데

예전에 코딩으로 웹사이트를 만들었던 기억이 떠올랐다

 

그땐 버튼 하나 하나 포토샵에서 만들고

움직임 주기도 너무 어려웠는데

피그마는 훨씬 간단한 느낌이다

 

피그마 완강♥

 

*모든 자료의 출처는 제로베이스에 있습니다*