inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

스켈레톤 로더(Skeleton Loader) ✅

프로그레스 바 애니메이션이요~

해결된 질문

107

93225

작성한 질문수 2

0

프로그레스 바 & 스켈레톤 로더 강의 듣는 중인데요

애니메이션 잘 적용시킨 것 같은데 프레임에 넣어도 움직이질 않아요 ㅠ ㅠ

 

1.png.webp2.png.webp3.png.webp4.png.webp

이 상태로 멈춰 있어요 ㅠ

 

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable 프로덕트디자인

답변 2

0

볼드 UX

안녕하세요, 93225님.

 

보내주신 스크린샷을 확인해본 결과, 현재 애니메이션은 잘 셋업이 되어 있는 것으로 보입니다.

 

몇 가지 제 추측으로는, 잘못된 부분을 재생하신 것이 아닐까 생각되지만, 이는 어디까지나 제 개인적인 추측일 뿐입니다.

 

현재 제가 도와드릴 수 있는 방법은 다음과 같습니다.

 

관련된 파일 일부를 아래에 첨부해드렸습니다. 다운로드하셔서 현재 작업 중인 파일과 비교해보시고, 필요하시다면 해당 부분을 복사하여 사용해보시기 바랍니다. 다만, 이 경우 변수명이 중복될 수 있어, 나중에 혼동이나 오류가 생길 수 있으니 유의해주시기 바랍니다.

https://drive.google.com/file/d/1kDVIuB9zug7C2STu3PckvBqT2H_oT-hl/view?usp=sharing

 

만약 그래도 문제가 해결되지 않는다면, 현재 사용 중인 파일이 에듀 계정에 있다면 저를 해당 파일에 초대해주시면 보다 직접적으로 도와드릴 수 있습니다. 제 이메일 주소는 boldplus.ux@gmail.com 입니다.

감사합니다. 볼드 드림.

 

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 93225님께서 프로그레스 바와 스켈레톤 로더의 애니메이션 적용 시 프레임 내에서 움직이지 않는 문제를 겪고 계신 것 같습니다.

우선적으로 몇 가지 확인해야 할 사항들을 정리해 드리겠습니다:

  1. 트리거와 애니메이션 설정 확인: 프로토타입 모드에서 애니메이션 트리거가 제대로 설정되어 있는지 확인해 주세요. ‘After delay’ 트리거가 유효한지, 그리고 애니메이션이 ‘Smart animate’로 설정되어 있는지를 살펴보세요.

  2. 프레임 구조 체크: 애니메이션이 적용되는 프레임 구조가 올바르게 설정되어 있는지 확인하세요. 각 컴포넌트가 프레임 외부로 삐져나가거나, 잘못된 레이어 순서로 인해 애니메이션이 정상적으로 작동되지 않을 수 있습니다.

  3. 애니메이션 타이밍: 애니메이션의 시작 지점과 지속 시간 등이 제대로 설정되어 있는지, 그리고 중간에 다른 설정으로 인해 막히고 있지는 않은지 점검해 보세요.

  4. Figma 업데이트: 사용 중인 피그마 버전이 최신 버전인지 확인하고, 업데이트가 필요한 경우 최신 버전으로 업그레이드해 보세요. 특정 버전에서 발생할 수 있는 버그가 소프트웨어 업데이트로 해결될 수도 있습니다.

  5. 프레임 속성 및 부하 확인: 시스템 문제로 인해 피그마가 느리게 작동할 수도 있습니다. 너무 많은 애니메이션이나 복잡한 그래픽은 컴퓨터 성능에 부담이 될 수 있으니, 다른 요소들을 최적화하거나 한번에 많은 작업을 피하는 것이 좋습니다.

이 문제와 유사한 문제를 다루고 있는 질문과 답변이 있습니다:
- “프로그레스 바 애니메이션이 작동하지 않아요” - 다른 사용자의 유사한 문제에 대한 해결 방법을 참고해 보세요.

귀하의 상황에 대한 구체적인 해결책을 제시하기 어려운 점 양해 부탁드립니다. 위의 사항을 참고하여 문제를 해결해보시고, 추가적인 질문이 있으시면 부담 없이 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드렸습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 말씀해 주세요.

반응형 웹 디자인

0

59

2

액션 아이콘 컴포넌트 질문

0

47

2

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

0

49

3

스피너 아이콘 크기 질문

0

51

2

미리보기 빈칸생기는 현상

0

44

2

아이콘 빌런 부분

0

47

2

배리어블 Value에 관해 질문있습니다.

0

83

1

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

61

1

Navigation Mobile 토글 베리어블이 안됩니당

1

61

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

56

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

62

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

77

2

next step?

1

91

1

16강 Print Variables 출력 질문

0

95

2

open in Figma 누르고 ui kit 다운?받았을 때

0

94

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

123

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

139

2

이미지 캐러셀 영상

0

83

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

136

3

완강/리뷰 이벤트 후 강의자료

0

74

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

74

1

컴포넌트별 베리어블 구축

0

105

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

52

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

61

2