반응형 figma hover effect 반응형 1 [figma] 피그마에서 마우스 오버(hover) 인터랙션 만들기 안녕하세요! 당근입니다. 오늘은 피그마에서 배리언트를 통해 마우스 오버 인터랙션 하는 법을 알아보겠습니다. 본격적으로 Hover 액션을 만들기 전에 마우스가 올라갔을 때 바뀔 버튼같은 요소가 있어야겠죠. 요런 블럭을 하나 만들어봤어요. 이 버튼을 누르거나 단축키 Ctrl + Alt + K 를 눌러 컴포넌트로 만들어줍니다. 만드신 요소들을 선택한 채로 우클릭하여 Create component 하셔도 동일하게 컴포넌트로 만드실 수 있어요. Hover 용 버튼도 만들어야하기 때문에 배리언트를 추가해줍니다. 오른쪽처럼 동일한 컴포넌트가 복사되셨죠? 둘중 하나를 호버용 디자인으로 바꿔주세요. 이렇게 말이죠. 그리고 ①Prototype 탭으로 갑니다. ②버튼을 서로 연결해주고 ③ Interaction details.. 2023. 4. 25. 이전 1 다음