/UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다.
7065 단어 AtomicDesignReactFramerX프로토타입우이
어드벤처 최초의 Advent Calendar 2018 참가 의 16일째에 투고한 UI / UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다. 의 일부입니다.
React 이외의 사용법 메인입니다.
다른 기사 쓴 : Framer는 Framer Web이되었습니다! (2020/06)
Framer Web의 코드 기능으로 프로토 타입 만들기
Framer X라는 UI 디자인 툴이 대단하다.
Framer X
Meet Framer X
skyticket 톱이 움직이는 프로토 타입을 만들어 보았습니다.
여기↓ 브라우저가 아니라 Framer X로 움직이고 있습니다!
(※ 항공권 가격은 2018/12 시점의 가격입니다. 만약을 위해.)
한 일은 크게 세 가지.
トップページの画像を動画埋め込みにする
スクロール時にヘッダーとメニューナビは固定する
メニューボタンを押したらメニューが左から出てくる
시작하기 React 코드로 컴포넌트(Button) 만들기
UI / UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다.을 참조하십시오.
톱 페이지 이미지를 동영상 퍼가기
1. Store를 엽니다. (UI소재나 여러가지 입수할 수 있습니다.편리하다.)
2.YouTube를 설치.
3.Components 탭을 열고 YouTube iframe을 넣고 싶은 곳으로 드롭.
4. 위치에 맞게 크기를 조정합니다. (처음에는 데모 동영상이 들어 있습니다.)
5. Framer X 우측 하단에 있는 「Video」의 url을 재기록하면 지정 동영상에 넣어 바뀝니다.
끝.
스크롤 시 헤더와 메뉴 내비게이션은 고정
1. 고정하고 싶은 프레임과 스크롤하고 싶은 블록을 별도로 만듭니다.
2. 왼쪽의 "tools"블록에서 Scroll을 클릭합니다.
3. 톱 페이지에서 스크롤할 영역을 선택합니다.
4. 스크롤하고 싶은 프레임과 연결한다.
끝.
메뉴 버튼을 누르면 메뉴가 왼쪽에서 나옵니다.
1. 원래 화면과 overlay하여 나오는 화면을 별도로 만듭니다.
2. 클릭할 버튼(메뉴)을 선택하고 [L]을 클릭합니다. 링크 대상을 선택합니다.
3. Framer X 오른쪽 하단에 있는 대상의 움직임을 선택합니다.
4.overlay의 움직임을 지정합니다.
끝.
완성!
Framer X 정리
겉보기 장애물이 높을 것 같습니다만, 익숙해지면 꽤 사용하기 쉽습니다. 아직 다른 조작도 공부중이므로, 지견 모이면 또 투고해 보고 싶습니다.
난필 난문, 무례했습니다.
끝까지 읽어 주셔서 감사합니다.
덤
주식회사 어드벤처에서는 디자이너에게 지지 않을 정도로 UX하고 싶은 프런트 엔드 엔지니어씨라든지, 프런트 엔드 엔지니어에게 지지 않을 정도 코드가 쓰고 싶은 디자이너씨 모집중입니다.
프런트 엔드 엔지니어
UI/UX 디자이너
흥미있는 분 꼭 동료가 되십시오.
도움이되었습니다.
Reference
이 문제에 관하여(/UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/f-umebara/items/f370556e131ae3f3267a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)