피그마 5일차 - 컴포넌트를 이용한 슬라이드쇼 만들기

안녕하세요 시란입니다. 

 

이번 포스팅에서는 저번 포스팅에서 배운 컴포넌트를 이용해서 이밎 슬라이드쇼를 한번 만들어보겠습니다. 

 

저번 포스팅에서 다룬 컴포넌트와 애니메이션을 응용한 내용들이니 만약 모르는 개념이 있다면 저번 포스팅을 참고하는것도 나쁘지 않겠네요 

https://siran.tistory.com/277

 

먼저 완성본을 보여드릴께요.

아래처럼 사진들이 쭉 배치되어있고 화살표 버튼이 있어요.

 

화살표 버튼을 누르면 아래처럼 그림이 변경되고, 아래 프리뷰 사진도 변경되어야 합니다. 



 

우리가 자주 보던 이미지 슬라이드쇼랑 비슷하죠?

한번 만들어보도록 하겠습니다. 

 

일단 사진 4장을 먼저 준비해주세요.

 

그리고 나서 제일 처음에 해야될 부분은 프레임 생성이에요.

가장 기본이죠? 프레임 클릭한후 오른쪽 작업창에서 맥북에어를 선택합니다. 

 

자 이제 사각형을 만들꺼에요

위에처럼 만들어주세요

수치값은 드리도록 하겠습니다.

맨 위쪽 사각형 수치값

(x, y, w, h) : (100, 30, 1000, 550)

하단 사각형 수치값

--> 1번째 사각형 : (x, y, w, h) : (100, 620, 313, 150)

--> 2번째 사각형 : (x, y, w, h) : (444, 620, 313, 150)

--> 3번째 사각형 : (x, y, w, h) : (788, 620, 313, 150)

 

 

그리고 나서 각 사각형에다가 사진을 넣어보도록 하겠습니다. 

사진을 넣는 방법은 아래와 같아요. 

fill항목에서 색상을 클릭한후 빨간 박스 3번째 항목 이미지 넣기를 클릭하시면 이미지를 넣을 수 있습니다. 

 

넣으셨다면 나머지 사각형에도 채워주세요. 단, 상단 이미지와 첫번째 (맨 왼쪽 작은 상자)이미지는 같아야합니다. 

 

자 완성한 후 우리 이미지 슬라이드를 좌 우로 옮길 화살표를 만들어야겠죠?

우리 지난 시간에 배운 플러그인을 사용하겠습니다. 

iconify에 들어가서 적당한 아이콘을 가져오도록 하죠!

 

저는 이런 모양의 화살표를 가져왔습니다. 

해당 화살표를 하나 복사한 후 하나는 좌 하나는 우측을 가리키게 만든 후 배치해봅시다!

 

그리고 대략적으로 완성된 화살표에요 저는 추가로 색상도 변경해줬답니다. 

 

이제 이걸 가지고 컴포넌트화 시킬꺼에요. 

그리고 나서 변경 작업들을 해줄꺼랍니다. 

컴포넌트로 만들 녀석들을 일단 맥북에어 프레임 밖으로 빼냅니다. 

그리고 나서 우리 배운 버튼 있쬬? create component 버튼을 눌러주겠습니다. 

 

자 왼쪽 작업창의 아이콘이 한번에 합쳐지고, 변경된것을 확인할 수 있죠?

 

 

그리고 나서 이 컴포넌트들이 변화할 모습들을 variant들을 생성해서 만들어줄꺼에요.

마찬가지로 하단처럼 Add variant버튼을 클릭해줍니다. 

 

자 저번시간에 배운 Add Variant를 사용해서 3개를 더 만들어봅시다.

 

이제 무엇을 할꺼냐면 아래 2가지 이미지 순서를 바꿔줄꺼에요. 

그리고 나서 각 화살표를 눌렀을때 변화할수 있도록 할꺼에요. 

또는 아래 작은 사각형들을 눌렀을때 해당 그림이 큰 사각형으로 들어갈 수 있게 할껍니다. 

 

효과는 요약하면 다음과 같죠. 

작은 사각형의 사진을 클릭하면 큰 사진으로 보입니다. 

화살표를 누르면 작은 사각형 양 옆의 이미지로 이동합니다. 

 

 

먼저 이미지를 아래와 같이 바꿔줍니다. 아래 두가지 이미지의 큰 상자에 담긴 이미지가 바뀌었죠?

 

이제 우리 애니메이션을 넣어야겠죠?

왼쪽 작업창 Prototype을 눌러준후 애니메이션을 주기위해 프레임끼리 연결해줍시다.

 

자 저번시간에 배운대로 작은 두번째 그림을 더블클릭한 후 (+) 버튼을 눌러서 아래 2번째 variant로 연결해줍니다. 

마찬가지로 클릭했을때 이동할 variant 들로 쭉쭊 연결해봅시다. 

 

연결하다보면 화살표가 이렇게 됩니다. 

 

자 이렇게 하면 컴포넌트 완성이겠죠?

그럼 이 만든 컴포넌트를 가져다가 써야겠죠?

아래와 같이 왼쪽 작업창에서 Assets로 들어가서 우리가 만든 컴포넌트를 선택해서 넣어줍시다. 

 

그리고 나서 present버튼을 눌러서 만든 컴포넌트를 테스트 하면 됩니다. 

저번 포스팅에서 다룬 내용들 응용한 내용입니다.  별로 어렵지 않죠?

 

다음번에는 더 좋은 포스팅으로 찾아뵙겠습니다. 

감사합니다. :)