피그마에서 자동 슬라이드 프로토타입 만들기

오늘은 피그마에서 자동으로 슬라이드 되는 프로토타입을 만들어봤어요~

비핸스에서 디자인 레퍼런스를 찾다가 이 디자인의 인터렉션은 이렇게 나오면 좋겠다 싶어서 가져와 봤습니다.

​

디자이너의 크리에이티브 플랫폼인 비핸스에서 많은 도움 얻어가시길 바랍니다.

 

https://www.behance.net/

Search Projects | Photos, videos, logos, illustrations and branding on Behance

 

 

 

피그마에서 자동 슬라이드 Prototype 만들기

우선 위와 같은 디자인을 만들어 둡니다.

프로토타입이 될 화면은 프레임 375*812로 만들었어요.

​

텍스트와 이미지는 시간차를 두고 슬라이드 될 거라 따로따로 만들었습니다.

슬라이들 될 텍스트와 이미지는 각각 그룹(command + G)으로 해두어요.

 

 

프레임(단축키 F) 키를 눌러 프레임을 4개씩 만들어주고 위와 같이 만들어 둔 텍스트와 이미지를 배치합니다.

맨 처음 프레임은 나중에 프로토타입에서 나타나야 하니 프레임 바깥으로 오브젝트를 배치했어요.

 

 

컴포넌트 버튼을 눌러 컴포넌트로 만들어줍니다.

Create component set으로 4개의 프레임을 variants 시켜줍니다.

​

Component Variants

컴포넌트 내에서는 베리언트(Variants) 기능을 사용하여 다양한 스타일의 디자인 요소를 만들 수 있습니다. 예를 들어, 버튼 컴포넌트 내에서 "큰 버튼", "작은 버튼", "회색 버튼", "파란색 버튼" 등 다양한 스타일의 버튼을 만들 수 있습니다.

​

베리언트 기능은 기존의 컴포넌트를 복사하여 다른 스타일의 디자인을 만들지 않아도 되므로, 디자인 작업을 보다 효율적으로 할 수 있습니다. 또한, 베리언트는 디자인 시스템을 구축하는 데도 유용하게 사용됩니다.

 

 

로토타입 될 화면에 만들어둔 텍스트, 이미지 인스턴스(Instance)를 넣어줍니다.

​

Instance

Figma에서 인스턴스(Instance)란, 하나의 컴포넌트(Component)를 기반으로 만들어진 동일한 디자인 요소를 의미합니다.

컴포넌트는 재사용 가능한 디자인 요소이며, 인스턴스는 해당 컴포넌트를 참조하여 만들어진 디자인 요소입니다. 인스턴스를 사용하면, 디자인 요소를 한 번 수정하면 해당 컴포넌트와 관련된 모든 인스턴스가 자동으로 수정됩니다. 이를 통해 디자인 작업을 보다 효율적으로 할 수 있습니다.

​

예를 들어, "버튼"이라는 컴포넌트가 있고, 이 컴포넌트를 참조하여 "로그인 버튼", "회원가입 버튼", "메인 페이지 버튼" 등의 인스턴스를 만들 수 있습니다. 만약 "버튼"의 색상이나 크기를 수정하면, 해당 컴포넌트와 연결된 모든 인스턴스의 색상이나 크기가 자동으로 수정됩니다.

이렇게 인스턴스를 사용하면, 디자인 작업을 보다 효율적으로 할 수 있으며, 디자인 요소의 일관성을 유지할 수 있습니다.

 

 

컴포넌트 베리언트에서 아무것도 없는 빈화면의 베리언트를 선택해 줍니다.

 

 

텍스트의 첫 번째 베리언트를 프로토타이핑 해줍니다.

1 프레임 > 2 프레임 연결

After delay, 500ms, Smart animate, slow, 600ms로 설정해 줍니다.

 

 

2 프레임 > 3 프레임

3 프레임 > 4 프레임

4 프레임 > 1 프레임

After delay, 700ms, Smart animate, Slow, 1200ms 설정해 줬습니다.

디자인 무드에 맞게 천천히 나타나게 프로토타이핑 해줬어요~

 

 

이미지의 프로토타이핑은 텍스트와 다르게 순차적으로 나타나게 할 거니 시간차를 조금 뒀습니다.

After delay, 550ms, Smart animate, slow, 1200ms로 설정해 줄게요.

나머지 이미지 프레임들은 텍스트와 똑같이 맞춰줍니다.

 

 

 

피그마에서 auto slide prototype 만들기

프리뷰를 보며 프로토타이핑이 잘 적용되었는지 확인해 보세요~

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

 

레탑피그마 오픈 채팅방 문의

https://open.kakao.com/o/sJdtEyCe

레탑 피그마