<Figma> 호버링 했을 때 떠오르는 카드 인터렉션

오늘은 호버링 했을 때 카드가 위로 올라가는 인터렉션을 만들어보겠다.

1. 준비한 카드에 Auto lay out을 걸어준다.

 

Auto layout이 걸린 카드를 복사한다.

원하는 값만큼 아랫쪽으로 Padding을 넣어준다. (이 값만큼 카드가 올라간다)

패딩이 안 들어간 카드, 들어간 카드 두 개가 준비 되었다면 모두 선택하고 Create Component Set를 적용한다.

Prototype을 걸어준다. 호버링 할 시에 스마트애니메이션으로 작동하도록 말이다.

Component 박스 안에 패딩이 없는 카드를 복사하여 Instence를 만들어준다.

한 개일 때는 한 개만, 여러가지일 때는 모두 선택 후에 Auto layout을 씌워준다.

프레임의 높이를 패딩 넣은 값보다 큰 값으로 더해준다.

카드가 프레임 위쪽에 위치하면 안 된다. 아래쪽으로 내려야 한다.

오른쪽 디자인 패널에서 Auto layout 정렬을 위쪽에서 아래쪽으로 내린다.

만들어진 Instence를 Frame안에 넣고 present로 Prototype이 잘 작동되는지 확인한다.

잘 작동한다.

🛑여기서 주의할 점

카드 안에 들어갈 이미지와 텍스트의 프로퍼티가 정해지지 않았다면 아래와 같은 문제가 생길 수 있다.

오른쪽 카드는 Text가 부모를 따라서 "리그오브레전드"로 바뀐다. 이 문제의 원인은 Property이다.

컴포넌트 박스 안에 있는 두 카드의 이미지는 같은 프로퍼티 종류로 묶여 있어야 한다. 

이미지는 두 개 모두 같은 프로퍼티로 묶여있어서 인터렉션이 잘 걸렸다.
하지만 텍스트는 비교하기 위해 그렇게 하지 않았다.

왼쪽 카드의 프로퍼티 적용상황

오른쪽 카드의 프로퍼티가 적용되지 않은 상황

위 두 사진을 비교해 보면 알 것이다. 이 문제는 두 가지 방법으로 간단하게 해결할 수 있다.

1. 처음부터 Property 적용

처음부터 카드를 제작할 때 원본 카드에 Component를 적용하여 Image와 Text에 프로퍼티를 적용시키고 복사하여 사용한다. 

2. 까먹고 Component 적용을 못 한 상황이면?

Prototype을 적용한 뒤에도 Component에서 양쪽 Image 끼리, Text끼리 같은 Property를 적용시키면 된다. 같은 Property여야 한다.

 

끝