<Figma> 왼쪽으로 길어지는 검색창 인터렉션

League of Leagend 게임 中

위 사진을 보면 검색창이 왼쪽으로 길어지고 있다. 이런 이런 인터렉션은 어떻게 피그마로 구현할 수 있을지 알아보겠다.

준비물 아이콘

첫 단계 준비물은 돋보기와 닫기 아이콘이다. 이 두 가지가 준비되었다면 잘 따라오기 바란다.

Frame 안에 들어간 Rectangle이 Scale로 되어 있다면 다른 것으로 바꿔주길 바란다. (Scale만 아니면 된다)

돋보기 아이콘을 Rectangle 보다 위로 올라오게 배치시켜준다. 
이제는 다른 프레임을 새로 하나 만들 것이다.

돋보기 아이콘에프레임을 걸어준다. (Ctrl + Alt + G) 프레임의 높이 값은 처음 만든 것과 동일하게 진행한다.

처음 만든 프레임과 동일한 길이를 설정한다.

프레임에 Rectangle을 넣어준다. 이때 처음에 썼던 Rectangle을 복사해서 사용하거나 그것과 이름을 똑같이 해야한다. (나는 검은색으로 넣었다)

닫기 아이콘을 오른쪽에 삽입시켜준다.

처음에 만들었던 프레임 안의 Rectangle도 검은색으로 설정한다.

그러면 이 두 개의 프레임이 나오게 된다.

 

위에 컴포넌트 드롭다운 버튼을 눌러 멀티 컴포넌트를 적용하여 각자 컴포넌트로 만들어준다.

이 상태에서 오른쪽 디자인 패널에서 Variants를 눌러준다.

이런 점선 박스로 바뀌었다면 Variamts는 성공적으로 적용된 것이다.

프로토타입 패널로 넘어가 프레임에 마우스를 호버링 했을 때 나오는 파란색 +버튼을 드래그하여 프로토타입 애니메이션을 적용시킨다. 

짧은 것에서 긴 것으로 연결하고 Smart animation을 적용해야 한다.

X를 눌렀을 때 다시 닫히게 만들기 위해 X에서도 반대로 인터렉션을 걸어준다.

 

따란

 

끝