피그마에서 텍스트 애니메이션 만들기

오늘은 피그마의 프로토타입을 이용하여 텍스트 애니메이션을 만들어볼게요~

의외로 피그마의 프로토타입으로 만들 수 있는데 다양하다는 사실 알고 계신가요?

쉽고 간단하고 빠르게 프로토타입을 만들어 공유도 가능하고 플러그인도 다양해서 배워가는 재미가 있습니다.

​

그런 의미에서 피그마의 이번 온라인 콘퍼런스도 참석해 보는 건 어떨까요?

https://config.figma.com/

 

Config 2023 | Figma’s Annual Conference

 

피그마에서 텍스트 에니메이션 만들기 (Figma Prototype)

위와 같은 텍스트 애니메이션을 만들어 줄거에요~

 

 

먼저 텍스트를 입력해 줍니다.(단축키 T) 3줄이 롤링되야 하니 3줄을 작성할게요.

 

 

프레임(단축키 f)을 만들고 그 안에 텍스트를 넣어줄게요.

 

 

프레임을 4개 복사(Command + D)해주고, 위와 같이 텍스트의 위치를 프레임마다 변경해 줍니다.

맨 첫 번째 프레임은 텍스트를 아예 안 보이게 밑으로 내려주었어요.​

​

 

프레임 4개를 전체 선택하고 Create componenet set을 눌러 컴포넌트로 만들어줍니다.

 

 

프로토타입 탭을 열고 1 > 2 > 3 > 4 > 5 > 1 순서대로 인터렉션을 연결해 줍니다.

 

 

인터렉션 디테일은 After delay, 300ms로 지정해 줬습니다.

애니메이션은 Smart animation, Gentle, 200ms로 설정해 줬어요,

여러분은 마음에 드는 다른 애니메이션으로 여러 가지 테스트해 보세요~

​

프로토타입 프리뷰를 보면서 설정한 대로 작업되었는지 확인해 보면 됩니다.

​

위 텍스트 애니메이션으로 여러 가지 아이디어를 나의 작업물에 적용해 보세요!

 

 

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

 

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

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

레탑 피그마