/UX 디자이너이지만 React를 사용하여 Framer X에서 프로토 타입을 만들고 싶습니다.

주식회사 어드벤처로, UI/UX 디자이너와 프런트 엔드 주위의 개발을 하고 있다 @f-umebara 라고 합니다. skyticket 라는 자사 서비스 사이트를 주로 만들고 있습니다.
어드벤처 최초의 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 정리

UI 제작과 프로토타입 제작이 동시에 이루어져 진짜 편리. 실시간 미리보기가 재미 있습니다.

디자이너나 엔지니어에서도 사용하기 쉽다. 특히 디자인 ~ 프런트 엔드까지하고 싶은 사람에게는 사용하기 쉬운지도.

디자이너와 엔지니어간에 발생하는 컴포넌트 관리 어려운 문제 해결에 꿈이 퍼진다.

일본어 입력이 버그한다. .

일본어의 자료 적기 때문에, 사용법의 공부는 Google 번역 등으로 노력할 수밖에 없다. .

겉보기 장애물이 높을 것 같습니다만, 익숙해지면 꽤 사용하기 쉽습니다. 아직 다른 조작도 공부중이므로, 지견 모이면 또 투고해 보고 싶습니다.
난필 난문, 무례했습니다.
끝까지 읽어 주셔서 감사합니다.

덤

주식회사 어드벤처에서는 디자이너에게 지지 않을 정도로 UX하고 싶은 프런트 엔드 엔지니어씨라든지, 프런트 엔드 엔지니어에게 지지 않을 정도 코드가 쓰고 싶은 디자이너씨 모집중입니다.
프런트 엔드 엔지니어
UI/UX 디자이너

흥미있는 분 꼭 동료가 되십시오.

도움이되었습니다.

Google, Facebook, Uber에서 사용되는 프로토타이핑 도구

Framer X의 베타 버전이 마침내 제공 시작! 그 전모가 밝혀졌습니다.

안녕 Sketch, 안녕 Framer X