[FIGMA] 클릭하면 이동하는 피그마 프로토타이핑?!

---

 

Figma의 Prototyping에 대해 정리해보는 시간을 가져보도록 하겠습니다!

---

 

프로토타입 패턴(prototype pattern)은 소프트웨어 디자인 패턴 용어로, 생성할 객체들의 타입이 프로토타입인 인스턴스로부터 결정되도록 하며, 인스턴스는 새 객체를 만들기 위해 자신을 복제(clone)하게 됩니다.

Protptype은 제품에 대한 사용성 및 기능을 테스트하기 위해 시험 형태를 만들어보는 개략적인 틀을 뜻합니다.

 

피그마에서 프로토타입을 사용하는 방법은 전혀 어렵지 않습니다.

 

예시를 들어 이런 나이키 어플창을 구현하고 싶을 때에 왼쪽에 나이키 로고를 클릭할 시 오른쪽 화면을 구현시키고 싶다면

 

 

1. 프로토타입모드로 변경

2. 행동을 진행시킬 방향을 화살표로 지정

3. 행동 지정

4. 결과 지정

 

간단하게 이렇게 순서를 지을 수 있습니다.

3번의 행동에 대해 세부적인 설명을 덧붙이자면,

이런 요소들이 있기에 구현하고 싶은 상황에 맞추어 설정을 해주면 됩니다.

별표시를 해놓은 while hovering은 중요하게 많이 사용되기도 하고, 잘 알아두어야 할 핵심 개념인 것 같아 따로 표시를 해 두었다. 호버링은 다음에 자세히 정리해보겠습니다.

 

또한 4번의 결과값에 대한 세부적인 설명도 덧붙이자면,

 

이렇게 행동에 따른 결과값으로 지정하는 요소들이 여러가지 있습니다. 오른쪽 그림에 메뉴중 텍스트에서 다루지 않은 Set variable과 Conditional은 유료 버전에서만 사용이 가능하니 참고해두시면 좋을 것 같습니다.

 

간단하게 프로토타입에 대해서 정리해보았습니다. 전문적인 디자인을 구현하려면 좀 더 세부적인 조정을 할 수 있는 프로그램이 필요하지만 기본적인 디자인 같은 경우에서는 피그마에서도 충분히 구현가능하니 하나씩 만들고 익혀보는 것도 좋을 것 같습니다.