반응형 피그마 overlay 반응형 2 [figma] 피그마에서 마우스 오버(hover) 인터랙션 만들기 안녕하세요! 당근입니다. 오늘은 피그마에서 배리언트를 통해 마우스 오버 인터랙션 하는 법을 알아보겠습니다. 본격적으로 Hover 액션을 만들기 전에 마우스가 올라갔을 때 바뀔 버튼같은 요소가 있어야겠죠. 요런 블럭을 하나 만들어봤어요. 이 버튼을 누르거나 단축키 Ctrl + Alt + K 를 눌러 컴포넌트로 만들어줍니다. 만드신 요소들을 선택한 채로 우클릭하여 Create component 하셔도 동일하게 컴포넌트로 만드실 수 있어요. Hover 용 버튼도 만들어야하기 때문에 배리언트를 추가해줍니다. 오른쪽처럼 동일한 컴포넌트가 복사되셨죠? 둘중 하나를 호버용 디자인으로 바꿔주세요. 이렇게 말이죠. 그리고 ①Prototype 탭으로 갑니다. ②버튼을 서로 연결해주고 ③ Interaction details.. 2023. 4. 25. [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) 안녕하세요. 당근입니다. 오늘은 피그마 프로토타이핑에 대한 포스팅입니다. 프로토타이핑 할 때, 어떤 버튼을 누르면 어떤 페이지로 이동하게 하는 액션도 많지만, 버튼을 눌렀을 때 창을 띄우거나 드롭다운 리스트를 보여줘야한다거나 하는, 그래서 오버레이(overay)를 활용해야하는 액션도 적지않습니다. 오늘은 가운데에 팝업창이나 달력 등의 UI를 띄우는 것 뿐 아니라 원하는 위치에 디자인 요소가 오버레이 되도록 프로토타이핑하는 방법을 알려드릴게요. 이렇게 말이죠. 1. 화면 가운데에 오버레이하여 팝업창 띄우기 먼저 화면 가운데에 띄우는 방법입니다. 이렇게 결제 정보를 입력해야하는 UI를 그렸다고 가정을 해볼게요. 여기서.. 2021. 8. 26. 이전 1 다음
