반응형 피그마4 Figma | 피그마 화면 이동 프로토타입 만들기 웹페이지를 만들 때 메뉴바에서 특정 메뉴를 클릭하면 해당 페이지로 이동되는 것을 볼 수 있습니다.오늘은 피그마에서 화면 이동 프로토타입을 만들어 보겠습니다.1. 기본 화면과 이동할 화면을 만들어줍니다. 2. 클릭했을 때 장면을 바꿀 요소를 선택하여 우측 프로토타입의 인터렉션을 다음과 같이 설정합니다.3. 결과를 확인합니다. 2024. 11. 5. 피그마 | 버튼 컴포넌트 만들기 안녕하세요, 오늘은 프레임으로 버튼 만들기에 이어 버튼 컴포넌트를 만들어보도록 하겠습니다!컴포넌트를 만들면 다시 만들 필요 없이 재사용이 가능하답니다 :)1. 먼저 버튼 모양을 만들어줍니다. 2. 만든 버튼을 선택하여 오른쪽 클릭->Create component를 선택합니다. 3. 다시 오른쪽 클릭하여 Main component -> Add variant를 선택합니다. 4. 새로 생성된 버튼의 스타일을 조정합니다. 5. 기존 버튼 선택 후 Interaction을 다음과 같이 설정합니다. 6. 프레임을 만든 후 기존 버튼을 Alt+드래그 하여 프레임 위에 올려줍니다. 7. 실행하여 결과를 확인합니다. 2024. 10. 29. 피그마 | 토글 버튼 만들기 안녕하세요, 오늘은 피그마에서 토글 버튼을 만드는 방법을 소개해드리려 합니다!1. 프레임으로 버튼을 만들어줍니다. 2. 인터렉션을 설정해줍니다. Button은 On click시 Button_toggle로, Button_toggle은 Button으로 바뀌도록 설정합니다. 완성된 모습입니다! 2024. 10. 28. 피그마 | 프레임으로 버튼 만들기 안녕하세요, 오늘은 피그마에서 프레임으로 간단한 버튼 만드는 방법을 정리해보려 합니다. 1. 다음과 같이 프레임으로 세 개의 버튼 모양을 만들어줍니다. 첫 번째는 기본값, 두 번째는 버튼 위에 마우스를 올려놓았을 때, 세 번째는 버튼을 클릭했을 때입니다. 2. 버튼 프레임에 인터렉션을 설정해줍니다. 먼저 기본값 프레임을 선택한 후, 우측의 메뉴에서 Prototype을 선택합니다.인터렉션을 다음과 같이 설정해주면 Button 프레임에 마우스를 올렸을 때 Button_hover 프레임으로 바뀌어 표시됩니다.다음은 Button_hover 프레임에 다음과 같이 인터렉션을 설정해줍니다. 버튼을 클릭하는 동안 Button_press 프레임으로 바뀌어 표시됩니다. 완성된 모습입니다! 2024. 10. 28. 이전 1 다음 반응형
