피그마에서 carousel 슬라이드 배너 만들기

 

피그마에서 carousel 슬라이드 배너 만들기

 
오늘은 피그마에서 캐러셀(carousel) 슬라이드 배너를 만들어볼게요~
피그마는 프로토타입이 정교하고 기본 기능이 좋은 툴 중 하나입니다.
After Effect나 ProtoPie 같은 Hi-fi 툴을 쓰지 않더라도 쉬우면서 직관적인 메뉴로 프로토타입핑을 할 수 있게 도와줍니다.
 

우선 프로토타이핑을 위해 슬라이드할 배너 3개와 프레임을 준비해 줍니다.
 
 

배너들을 Command + G 로 그룹으로 묶어준다음 위 화면처럼 배치해 줍니다.

 

Prototype 탭을 열고 1번 프레임의 배너를 2번 프레임으로 Interactions 화살표로 연결해 줍니다.

 

Interaction details의 Animation을 위와 같이 세팅해 줍니다.
드래그했을 때 인터렉션이 나타나야 하니 On drag로 해줍니다.
약간의 바운스가 띠용~하는 슬라이드 형태로 세팅해 줄 거예요.
Smart animate < Quick < 600ms

마찬가지로

1번 프레임 안의 배너 -> 2번 프레임
2번 프레임안의 배너 -> 3번 프레임
3번 프레임안의 배너 -> 2번 프레임
2번 프레임안의 배너 -> 1번 프레임

으로 프로토타입을 모두 연결해 주세요.

 

화살표로 연결된 Flow1 확인해 줍니다.

Option + Command + Enter 누르시면 프로토타입이 프레젠테이션 됩니다.
조작해 보면서 올바르게 동작하는지 확인해 보세요~

 
 

피그마로 캐러셀 배너 만들기

 
 
https://www.letapefigma.com/

Letape Figma 레탑피그마