프로토타입 스크롤 넣는 방법
안녕하세요 서버 컨설팅 전문업체 (주)아이유입니다. 오늘은 피그마 프로토타입 기능에서 스크롤을 넣는 방법을 게시합니다.
프로토타입(Prototype)이란 무엇입니까?
인기글
우측 상단 디자인/프로토타입 전환 버튼
피그마 프로토타입은 디자인을 공유하고 사용자 경험(UX) 디자인 아이디어를 시각화하기 위한 도구입니다. 피그마는 웹 및 모바일 애플리케이션 디자인을 비롯하여 다양한 디자인 프로젝트의 협업 및 디자인 도구로 널리 사용되고 있습니다. 피그마를 사용하면 디자이너, 개발자 및 기타 이해 당사자가 디자인 프로젝트를 협업하여 프로토타입을 만들 수 있습니다. 프로토타입 스크롤은 어떻게 적용하나요?
스크롤 테스트를 위해 하나의 iPhone 프레임과 두 개의 사각형을 준비합니다.
프레임 내에 준비한 사각형을 넣고 오른쪽 상단 프로토타입을 클릭합니다.
* 프레임 하단에 넣은 도형이 보이지 않을 경우 Design-Clip Content 해제 시 프레임 영역 밖 도형도 표시됩니다.
Overflow를 클릭하면 3가지 옵션이 있습니다.Horizon Tal: 좌우 스크롤 Vertical: 상하 스크롤 Both directions: 상하좌우 스크롤 작성자는 도형을 상하로 배치하였기 때문에 Vertical을 적용하였습니다.
우측 상단 버튼으로 Present 또는 Preview를 실행하면 스크롤 기능을 확인할 수 있습니다.
스크롤 이미지를 고정하다
홈페이지나 모바일 앱 등의 서비스를 기획하다 보면 스크롤 시에도 고정된 이미지를 표현해야 하는 경우 프로토타입에서도 이미지 고정을 적용할 수 있습니다.프로토타입 스크롤 시에 고정하는 위치에 화상을 올립니다.이지미를 클릭한 후 프로토타입 모드에서 오른쪽 Position을 클릭하면 세 가지 옵션을 확인할 수 있습니다.아래 이미지로 기능 설명 도와드리겠습니다.Scroll with parent : 배경과 함께 스크롤Fixed: 이미지가 고정되어 배경만 스크롤Sticky : 이미지가 스크롤을 따라 상단에 고정된 후 배경만 스크롤Sticky : 이미지가 스크롤을 따라 상단에 고정된 후 배경만 스크롤감사합니다。지금까지 피그마 프로토타입 기능에서 스크롤을 넣는 방법을 포스팅했습니다.㈜아이유블로그에서는 피그마 활용법과 기능 등 피그마 이용에 도움이 되는 포스팅을 작성합니다.㈜아이유는 IDC 인프라 및 서버 전문업체로 안정적인 서버 호스팅 및 콜로케이션 서비스를 제공하고 있습니다.아이유에서 제공하는 서비스 상담이 필요하시면 지금 방문해보세요.㈜IU – LG IDC 리셀러 / AWS Korea 공식 리셀러 ㈜IU는 합리적인 가격에 안정적인 서비스를 제공하는 서버 호스팅 회사입니다.www.iunetworks.com㈜IU – LG IDC 리셀러 / AWS Korea 공식 리셀러 ㈜IU는 합리적인 가격에 안정적인 서비스를 제공하는 서버 호스팅 회사입니다.www.iunetworks.com㈜IU – LG IDC 리셀러 / AWS Korea 공식 리셀러 ㈜IU는 합리적인 가격에 안정적인 서비스를 제공하는 서버 호스팅 회사입니다.www.iunetworks.com