피그마 애니메이션 (3) 썸네일형 리스트형 피그마 5일차 - 컴포넌트를 이용한 슬라이드쇼 만들기 안녕하세요 시란입니다. 이번 포스팅에서는 저번 포스팅에서 배운 컴포넌트를 이용해서 이밎 슬라이드쇼를 한번 만들어보겠습니다. 저번 포스팅에서 다룬 컴포넌트와 애니메이션을 응용한 내용들이니 만약 모르는 개념이 있다면 저번 포스팅을 참고하는것도 나쁘지 않겠네요 https://siran.tistory.com/277 먼저 완성본을 보여드릴께요. 아래처럼 사진들이 쭉 배치되어있고 화살표 버튼이 있어요. 화살표 버튼을 누르면 아래처럼 그림이 변경되고, 아래 프리뷰 사진도 변경되어야 합니다. 우리가 자주 보던 이미지 슬라이드쇼랑 비슷하죠? 한번 만들어보도록 하겠습니다. 일단 사진 4장을 먼저 준비해주세요. 그리고 나서 제일 처음에 해야될 부분은 프레임 생성이에요. 가장 기본이죠? 프레임 클릭한후 오른쪽 작업창에서 맥북.. 피그마 4일차 - 컴포넌트 개념 및 애니메이션 효과 ..2 저번 포스팅에 이어 이번에도 컴포넌트 작업과 애니메이션 효과를 표현해보겠습니다. 자 여기까지 지난 작업 내용이였어요. 이 만든 버튼을 컴포넌트화 시켜보겠습니다. 먼저 만든 버튼을 마우스 드래그 해서 선택합니다. 그리고 나서 메뉴의 빨간 사각형 부분을 클릭해줍니다. 그러면 왼쪽 작업 화면이 변화된 것을 확인할 수 있습니다. 자세히 보시면 아이콘도 변경되었어요. 바로 컴포넌트화 되었다고 할수 있습니다. 이제 이 컴포넌트의 variant를 추가해보겠습니다. 아래 화면처럼 해당 버튼을 누르면 됩니다. 버튼을 누르면 아래처럼 우리가 만든 버튼 모양이 하나 더 생기게 됩니다. 이런식으로 + 버튼을 눌러서 새로운 variant를 추가시킬 수 도 있습니다. 여기까지 잘 따라하셨죠? 이제는 두번째 버튼의 색을 변경해봅시.. 피그마 3일차 - 컴포넌트 개념 및 애니메이션 효과 ..1 안녕하세요 시란입니다 . 이번시간엔 피그마의 꽃이라 할수있는 컴포넌트의 개념에 대해서 알아보고 프로토타입 탭을 통한 애니메이션 효과를 주는 방법에 대해 알아보겠습니다. 피그마는 컴포넌트 개념을 통해서 내가 만든 UI/UX가 어떻게 동작하는지 정확하게 동료들에게 보여줄 수 있겠죠? 예를 들어 버튼을 클릭했을 때 색깔이 변했으면 좋겠다. 또는 버튼을 클릭했을때 다른곳으로 이동하면 좋겠다. 등등이 있겠죠? 물론 말로 설명해도 좋지만 직접 보여준다면 그보다 더 효과적인 의사소통이 없겠죠? 이런 애니메이션 효과와 인터렉션효과를 줄수있는 부품, 요소들을 만들어서 여러 페이지에 사용할 수 있는 작업을 하면 됩니다. 컴포넌트란 간단하게 말하면 부품이라는 의미이며, 부품 틀을 만들어서 해당 부품들을 찍어낸다 생각하시면 .. 이전 1 다음
