Figmapedia
목록으로 돌아가기
데일리콘텐츠피그마사이트

피그마 코드레이어로 완성하는 스파클 커서 효과

비비✨2025. 12. 12.

안녕하세요, 피피팀 비비✨입니다. 오늘은 웹사이트의 시선을 사로잡는 골드 스파클 커서🪄 효과를 피그마 사이트에서 코드레이어로 쉽게 구현하는 방법을 정리했어요!

같이 따라할 수 있게 바로 복사할 수 있는 프롬프트 전문과 연습용 이미지를 넣어두었으니 직접 만들어보시기를 추천드립니다!

복붙용 프롬프트 전문이 궁금하다면? 👉 https://www.figmapedia.com/2c6fdea8-0034-80c0-b2ef-d0f7a4514b37

1️⃣ 코드레이어 추가

  • Figma Site 파일 열기
  • 액션바에서 Make 메뉴 클릭 후 캔버스에 추가하기
  • 2️⃣ 스파클 커서 효과 제작

  • 준비된 프롬프트를 채팅창에 입력하기
  • 아웃풋 확인하고 코드레이어를 웹페이지에 추가
  • 3️⃣ 웹페이지 정리

  • 히어로 영역에 준비한 배경 이미지 추가하기
  • 텍스트 넣고 레이어 정리하기
  • 4️⃣ 커스텀 커서 설정 (선택)

  • 웹페이지 프레임 선택한 상태로 인터랙션 탭 열기
  • 준비된 이미지 프레임으로 ‘커스텀 커서’ 설정하기
  • 5️⃣ 확인하기

  • 프리뷰에서 커서 움직임에 따라 반짝이는 글리터 효과 확인하면 완성!