저의 TIL을...
✅오늘의 계획
📌
1. 컴포넌트 인터렉션
2. 오버레이 프로토타입
3. 드래그 프로토타입
1. 컴포넌트 인터렉션
사용자가 어떤 행동을 했을 때 그에 따른 적합한 시각적 피드백을 제공한다.
ex. 버튼을 누르면 색상이 변한다.
피그마의 프토로타입 기능을 사용하여 별도의 화면없이 컴포넌트 자체에서 UI의 시각적 피드백을 인터렉션을 구현할 수 있다.
👍 상태가 변화하는 화면을 일일히 추가하지 않아도 되기 때문에 시간을 절약할 수 있다.
실습 🖍️
- 프로토타입 패널로 이동하여 기본 형태의 버튼과 pressed 형태의 버튼을 잇는다.
- 트리거를 누르는 동안 (while pressing)으로 바꿔준다.
- Action을 Change to로 바꿔준다. (사전 프로퍼티 설정이 중요)
완성 🥸
2. 오버레이 프로토타입
다이얼로그와 같이 오버레이 속성을 가진 UI들을 프로토타입에서 구현할 수 있다.
실습 🖍️
-
기본 화면과 오버레이가 필요하다.
-
액션의 버튼을 클릭하여 인터렉션을 더해준다.
-
액션에서 오버레이 열기 (Open overlay)로 변경
-
Overlay에서 준비한 오버레이 선택
-
close with clicking outside : 바깥 화면을 누르면 오버레이가 닫힘
-
Background : 라이트 박스 설정 (투명도 50%로 올렸다.)
완성 🥸
💡
다이얼로그가 배치된 화면이 필요할 수도 있기 때문에 프로토타입을 만들 것인지, 화면 디자인으로만 둘 것인지 상황에 맞게 선택한다.
3. 드래그 프로토타입
드래그 하는 방향에 따라 프레임 전환이 발생하는 기능
드래그 방향에 따라 다른 화면이 나오도록 구현할 수 있다.
이미지 슬라이드, 캐서셀 등의 인터렉션을 만들 때 사용
실습 🖍️
-
정사각형의 프레임 안에 정사각형 레이어 4개를 만들어주고 하나씩 없어지는 화면을 만든다.
-
맨 위의 요소를 선택하여 두번째 프레임과 이어주고 트리거를 On drag로 변경하고 애니메이션을 Push로 변경한다. Direction에서 드래그 할 방향을 정해준다.
-
드래그 하여 이전 화면으로 돌아갈 수 있도록 두번째 프레임에서 첫번째 프레임으로 이어준다. 인터렉션에서 액션을 되돌아가기 (Back) 선택
-
모든 프레임에 2,3번 반복
완성 🥸
🎙️ 느낀점
강의가 길지 않아 빠르게 학습한 후 과제로 넘어갔다.
이제 피그마를 좀 잘 한다고 생각했는데 인터렉션을 적용하는 과제에서 다시 되돌아가는 것이 안 된다.
아직 배우고 익숙해져야할 것들이 많다는 것을 느낀다.
오늘은 오전 시간부터 강의를 듣고 과제를 다 하고 책을 읽는 것을 목표로 해보았다.
그래서 그런지 딴짓을 덜 했고 과제를 목표보다 빨리 완성할 수 있었다.
오늘 4주차 강의까지 모두 끝내서 내일은 피그마 연습 위주로 해 볼 생각이다.
인터렉션 원상태로 되돌리는 것 안 되는 부분도 구글링을 통해 꼭 되게 할 것이다.
