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