디자인 도구'Framer'부터 React까지 Component로서 import의 새로운 기능handshake에 대한 논평

Framer는 XD에서도 Figma와 같은 디자인, 원형 도구입니다.아직 일본 내 채용 사례는 드물지만, 웹 프런트엔드...특히 리액트를 적용한 경우 UI 디자인과 프런트엔드 설치의 협업이 쉬운 도구라고 할 수 있다.
그런 프레임은'하나셰이크'기능(2021년 10월 현재 알파 버전)을 추가했다.
이것은 Framer에서 만든 어셈블리를 기존 React 항목으로 가져올 수 있는 기능입니다.

Framer란 무엇입니까?

https://www.framer.com/
Framer는 내부에서 React를 사용합니다.디자이너가 프레임에 벡터 등을 활용해 만든 컴포넷을 스마트컴포넷(=Design Component)이라고 부른다.이는 Figma, Adobe XD, 스케치 등의 Component와 Symbol과 같다.이 도구들이 할 수 있는 일은 대충 할 수도 있고, import 항목도 할 수 있다.
https://www.framer.com/blog/posts/announcing-smart-components/
또 디자인 도구임에도 코드 컴퍼니 형태로 리액트 컴퍼니를 추가할 수 있는 구조가 있다.이렇게 하면 Framer에서 더욱 상세한 상호작용과 상태를 가진Component를 설정할 수 있다.
https://www.framer.com/support/using-framer/property-control-code-component/
또한 Framer 프로젝트에서 import 외부 패키지를 사용할 수 있는 구조도 있습니다.
창고 등을 통해 자사 제품을 관리하는 리액트 컴포넌트는 프레머 자체 프로젝트에도 추가할 수 있다npm install.
이로써 디자인 도구로 제작된 Component와 이를 참고로 전단에서 실시된 Component가 시간과 비례하는 것을 방지할 수 있다는 장점이 있다.
또 지아이허브의 창고로 컴포넌트를 관리할 수 있지만 이용bit해 공유하는 방법도 있다.

Handshake 기능으로 리액트에 디자이너가 만든 Component를 게재할 수 있습니다!

지금까지의 Framer도 최종적으로 Figma와 Adobe XD와 마찬가지로 디자이너는 도구에 Smart Component와 화면을 만들고 미리보기 기능을 사용하여 원형을 만들어야 한다.
또는 엔지니어만 React Component 를 실행하고 실제 애플리케이션 형태로 실행합니다.다른 도구도 이 절차를 바꾸지 않을 것이다.
그러나 Framer의 Handshake 기능은 Component 단위로 URL을 발행하여 Jsx/Tsx 파일에 쓸 수 있습니다!
이렇게 되면 디자이너가 제작한 스마트컴포넷을 실제 응용에서 검증할 수 있게 된다.
그리고 Smart Component에서 Variant(마우스 이벤트 등의 상태에 따라 설정할 수 있음)와 props를 유연하게 설정할 수도 있다.Handoff 상호작용에서 애니메이션을 간단하게 추가할 수 있습니다.

실제로 시험해 보다

1. Framer에서 Design Component 만들기

이번에는 심플한 상호작용을 통해 import의 느낌을 더 잘 알 수 있도록 Light/Dark Mode로 전환할 수 있는 카드형 Component를 제작했다.

Component 제작

화면 위의 탐색 중인 Component에서 적합한 Component를 새로 만듭니다.이번에는 SwitchDarkmode라는 Component 이름입니다.

Component에서 Light/Dark의 Variant 설정

이번에는 라이트를 누르면 Dak과 Component를 누르면 전환할 수 있는 간단한 모드를 선택했다.


프람머도 베리언트를 설정할 수 있기 때문에 UI 상태의 물건을 만들 때 임의의 베리언트를 추가해 다양한 일을 할 수 있다.hover와 클릭 등 이벤트를 설정할 수도 있고 Transition 등 ease/spring 등을 유연하게 설정할 수도 있다.이번에는 스프링 애니메이션으로 설정했습니다.

Proops 설정

props에서 Light/Dark와 각자의 배경색을 변경할 수 있도록Component의 Fill 속성에서 props를 통해 수치를 전달했습니다.

Screen 구성 설정 Component

구성을 위해 왼쪽 아래 모서리의 Assets 패널에서 Component 를 드래그 앤 드롭합니다.이번에는 Stack(Flex 레이아웃과 동일한 의미)로 포장하여 Component가 화면의 상하좌우 중앙에 배치할 수 있도록 합니다.

Preview를 통해 동작 확인

프리뷰 모습이 유튜브에 올라왔다.뭐, 클릭만 하면 전환할 수 있는 간단한 것.딱히 볼 만한 정도는 아니지만 그런 느낌으로 움직인다.
framer-motion
그럼 지금까지 Framer의 준비가 완료되었습니다.실제 작업 절차라면 디자이너가 여기까지 책임질 것 같아요.

2. 개발 환경에 대한 준비

jsx/tsx에서 Framer로 제작된 Smart Component를 준비합니다.
필요한 것은 다음과 같다.

framer,framer-motion을 설치한 패키지

TypeScript의 경우 d.ts 파일에 유형 정의가 필요합니다

Next.js의 경우,next.config 파일에서dynamic import와 관련된 옵션이 필요합니다

framer, framer-motion을 설치한 패키지

npm install framer@beta framer-motion@rc

TypeScript의 경우 d.ts 파일을 통해 유형 정의를 추가합니다.

declare.d.ts 등 유형 정의 파일 및 다음 추가

declare module "https://framer.com/m/*"

Next.js의 경우,next.config 파일에 urlImport 설정 추가

Next.js의 경우 외부dynamic import을 직접 사용할 수 없습니다.다음 설정을 추가합니다.

module.exports = {
    experimental: {
        urlImports: [
            "https://framer.com/m/",
        ],
    },
}

3. Smart Component를 jsx/tsx로 가져오기

Framer에서 임의의 Smart Component를 선택하고 Handshake 단추를 누르면 import의 코드 샘플과 import 목적지의 URL을 얻을 수 있습니다.

// コピーされるimport先のURL
https://framer.com/m/SwitchDarkmode-n9HL.js@NXeZ8ihO62YTo61lZYbw

@ 이후에는 버전이 산열되어 있기 때문에 최신 버전을 자주 가져오려면 다음 URL을 지정하십시오.

https://framer.com/m/SwitchDarkmode-n9HL.js

이 단계를 할 수 있다면 임의의 jsx/tsx 파일에 제출하기만 하면 됩니다.

import "./styles.css";
import SwitchDarkmode from "https://framer.com/m/SwitchDarkmode-n9HL.js";

export default function App() {
  return (
    <div className="App">
      <SwitchDarkmode />
    </div>
  );
}

※ 아래 코드스탠더드박스는 공식 샘플입니다.