/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
  • 좋은 웹페이지 즐겨찾기