최대 1 분 소요

피그마3

시험: 부트스트렙> 레이아웃 관련문제+ 피그마> 용어들 설명하고 용어가 설명하는것을 고르는 문제, 피그마 안에 들어가면 메뉴에 뜨는 것들 컴포넌트 인스턴스 그런거 그리고 싶으면 아이콘 모양들 나올 수 있으니 기억하기

어제했던 베리언트 전까지라고 생각하면 된다.

  • 인터랙션이란?

    상호작용! 서로영향을 준다는 것이다. 피그마에서는 쉽게 말하면 페이지 이동이라고 생각하면 된다.

프로토타입의 활용

프레인 인터렉션

피그마와 프로토타입

  • 피그마의 프로토타입 기능을 활용하면 디자인 요소에 전화, 애니메이션과 같은 인터랙션 효과를 만들 수 있음

  • prototype 메뉴를 살펴보면 디바이스의 기종과 색상, 미리보기 화면의 바탕화면 색상을 지정할 수 있는 옵션이 있음

    image-20240802092528851

프레임 인터랙션의 이해

  • 가장 빈번하게 사용되는 인터랙션: 프레임과ㅏ 프레임간의 페이지 전환
  • 프레임 전환 인터랙션: 같은 오브젝트가 다른 프레임에서 색상이나 그림자와같은 변화로 페이지가 전환되는 인터랙션

베리언트 스위치 인터랙션

디자인을 하다 보면 한 페이지 안에서 일어나는 인터랙션이 괸장히 많을 때가 있음

따라서 버튼 형태에 인터랙션을 적용해야 한다면, 제작하는 베리언트 단계에서 인터랙션을 지정하여 사용하는 것이 더 효율적임

버튼 인터랙션

캐러셀 인터랙션

오버플로우 스크롤링 인터랙션

모달 창 인터랙션

내비게이션 드로워 인터랙션

업데이트:

댓글남기기