피그마 | 프레임으로 버튼 만들기

안녕하세요, 오늘은 피그마에서 프레임으로 간단한 버튼 만드는 방법을 정리해보려 합니다.

 

---

1. 다음과 같이 프레임으로 세 개의 버튼 모양을 만들어줍니다.

 

첫 번째는 기본값, 두 번째는 버튼 위에 마우스를 올려놓았을 때, 세 번째는 버튼을 클릭했을 때입니다.

 

2. 버튼 프레임에 인터렉션을 설정해줍니다.

 

먼저 기본값 프레임을 선택한 후, 우측의 메뉴에서 Prototype을 선택합니다.

인터렉션을 다음과 같이 설정해주면 Button 프레임에 마우스를 올렸을 때 Button_hover 프레임으로 바뀌어 표시됩니다.

다음은 Button_hover 프레임에 다음과 같이 인터렉션을 설정해줍니다. 버튼을 클릭하는 동안 Button_press 프레임으로 바뀌어 표시됩니다.

 

완성된 모습입니다!