본문 바로가기

피그마프로토타입4

피그마 프로토타입 예제 - 슬라이드 배너 만들기(캐러셀 인터랙티브 컴포넌트) 드래그하면 옆으로 넘어가는 슬라이드 배너는 홈페이지의 메인에서 흔히 볼 수 있는 UI 이다. 이렇게 슬라이드 형태로 넘기는 UI를 캐러셀이라고 부른다. 이번 포스팅에서는 피그마로 캐러셀 배너 프로토타입 만드는 방법에 대해서 소개하려고 한다. 슬라이드 배너 프로토타입 만들기 먼저 피그마 파일을 하나 생성해서, 아래와 같은 구조의 디자인 시안을 만든다. 각 슬라이드가 보여지는 화면을 각각의 프레임으로 나누어 제작해야 한다. 디자인 요소들을 모두 만들었다면 첫번째 배너 이미지를 선택하고, 두번째 프레임으로 드래그한다. 인터렉션 디테일은 On drag, Smart animate, Ease in and out으로 지정한다. 애니메이션 속도는 300~500을 추천하는데, 본인 취향에 맞게 설정해 주면 된다. 나머지.. 2023. 3. 10.
피그마 프로토타입 (3) 애니메이션 설정하기 지난 포스팅에서 피그마 프로그램으로 웹 프로토타입 만드는 방법에 대해서 소개했었다. 2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기 2023.02.17 - [디자인/Figma] - 피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기 오늘은 인터렉션 트리거, 액션 설정에 이어 애니메이션을 설정하는 방법에 대해서 알아보려고 한다. 피그마에서 제공하는 프로토타입 기능을 제대로 배워두면, 별도 프로토타입 제작 프로그램을 사용하지 않아도 충분히 멋진 ui 프로토타입을 만들 수 있다고 생각한다. 애니메이션은 아래와 같이 액션이 None 상태일때는 설정할 수 없다. (당연하잖아?) 어떻게 움직이게 할 것인지 선택을 해야 하단에 애니메이션 항목이 보여진다. 나는 액션을.. 2023. 3. 2.
피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기 이전 포스팅에서 피그마 프로토타입 화면의 기본 구성에 대해서 설명했다. 2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기 이제부터는 프로토타입 메뉴의 설정 옵션들에 대해서 하나씩 자세히 설명하려고 한다. 예제가 필요할 듯 하여 빨간색, 노란색 박스가 들어있는 화면 두 개를 준비했다. 화살표 형태의 커넥션을 선택하면 인터렉션과 애니메이션을 설정할 수 있다. 이번 포스팅에서는 애니메이션은 제외하고, 먼저 Interaction details 부분에 대해서 살펴보도록 하겠다. 첫번째 On tap 이라고 되어 있는 부분은 '트리거' 라고 불리는데, 이 곳에서 클릭, 드래그, 마우스 오버와 같은 트리거의 종류를 선택할 수 있다. 트리거 종류별 움직임은 아래와 같다. Non.. 2023. 2. 17.
피그마 프로토타입 (1) 기본 화면 살펴보기 오늘은 피그마에서 프로토타입을 설정하는 방법에 대해서 포스팅해보려고 한다. 피그마 화면 우측에는 Prototype 탭이 있다. 프레임 두개를 생성한 후에 Prototype 탭을 선택하고 첫번째 프레임에 마우스를 올리니 아래 이미지처럼 포인트가 표시되었다. 첫번째 프레임의 포인트에서 두번째 프레임으로 드래그를 하면 아래 이미지와 같이 화살표와 함께 Prototype 탭화면에 여러가지 항목들이 생긴 것을 확인할 수 있다. 각 요소들에 대해서 좀 더 알아보도록 하겠다. 핫스팟 : 사용자의 인터렉션이 시작하는 위치이다. 커넥션 : 두 프레임 사이의 에니메이션, 인터렉션을 연결하는 화살표이다. 데스티네이션 : 변경된 결과 화면을 가리킨다. 그리고 커넥션(화살표)을 선택하면 Prototype 화면에 다양한 옵션이 .. 2023. 2. 16.