[React] XD 파일 React 페이지로 변환하기 (Fireblade 플러그인 사용)

xd파일을 받고 웹페이지를 만들어야 했는데..

픽셀 하나하나 옮겨가며 맞출 생각 하니까 짜증났는데

그럴 필요가 전혀 없었고.. 리액트는 신이고 어도비도 신이다.

 

1. react-router-dom 설치

$ npm install react-router-dom
$ npm install @types/react-router-dom

라우팅 할 때 필요한 거라 이미 설치했을 가능성이 크지만.. ^ㅁ^

 

2. Fireblade

Adobe XD 앱을 켜고, 플러그인 검색에서 Fireblade를 찾아 설치해 준다.

설치 후 XD 앱에서 Ctrl+Shift+F (Cmd+Shift+F) 를 누르면 창이 뜨는데,

우선 회원가입을 해 준다.

 

3. React, CSS로 export

Setup 버튼을 누르고, export할 파일을 저장할 위치와 CSS, React / Auto-align 을 체크하고 닫아준다.

그 후 export 하고 싶은 아트보드의 이름을 클릭하면 아트보드 전체가 선택되는데,

그 상태에서 왼쪽의 Export 버튼을 눌러주면 export 완료.

 

4. React 프로젝트에 적용

export 했으면 아트보드마다 파일이 생성되었을텐데,

그 파일 그대로 src 폴더에 넣어주면 된다.

이제 App.js 를 수정해 주면 되는데,

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// import (아트보드 export한 폴더명) from "./(아트보드 폴더명)/(jsx파일 이름)"
import Web1920_1 from "./web19201/web19201";
import Web1920_2 from "./web19202/web19202";
import Iphone from "./iphone/iphone";

function App() {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<[메인 화면] />} />
          <Route path="/[React 폴더명]" element={<[메인 화면] />} />
          <Route path="/[화면1]" element={<[화면1] />} />
   // ex) <Route path="/Iphone" element={<Iphone />} />
        </Routes>
    </BrowserRouter>
  );
}

export default App;

이런 식으로 수정해 주면 된다.

 

그리고 App.css 파일에

#root>div{overflow:hidden;}

를 추가해 주자.

 

그러면 끝-