목적은 Figma 로 디자인한 페이지를 React 에서 이용 가능하도록, 곧바로 코드로 추출하는 것입니다.
저는 Figma 로 우선 다음과 같은 Demo 페이지를 제작하였습니다.
테슬라 모델들이 쭉 있고, 그 아래에 버튼이 있는 형태의 페이지가 연속되는 형태이죠.
가장 위쪽에는 메뉴바가 있고, 이 메뉴바는 고정된 상태입니다.
아래로 드래그를 하면, 모델들의 페이지가 내려가는 형태이지요.
요것을 저는 한 번에 React 코드로 변경을 해보려 합니다.
우선 Figma 좌측 상단에 있는 플러그인 버튼을 이용해서 Anima 를 Run 해주세요.
요걸 통해서 특정한 요소를 React 코드를 전환하려고 합니다.
Figma 우측 상단에서 있는 기본 버튼을 Inspect 버튼으로 위 그림처럼 치환해주세요.
버튼을 클릭하면 알아서 변경이 됩니다.
고러면 이렇게 왼쪽에서 현재 선택한 요소의 레이아웃 값과 스타일 등을 주르륵 확인이 가능하게 됩니다.
여기서 왼쪽에 나타난 영역 위를 보시면, 지금은 Inspect 가 되어 있죠?
이 Inspect 옆에 Plugins 가 보일 겁니다.
이쪽을 선택해 주세요.
여기서 Anime 를 선택 후, 추출을 원하는 영역을 클릭해주면 위와 같이 전체 코드를 확인 가능합니다.
이제 이 코드를 입맛에 맞게 변형하여 사용하면 되겠네요.
import React from "react";
import { ButtonDetail } from "./ButtonDetail";
import { ButtonPrimary } from "./ButtonPrimary";
import { FooterLm } from "./FooterLm";
import { MenuEnabled } from "./MenuEnabled";
import "./newhome.css";
export const L = () => {
return (
<div className="l">
<div className="div">
<div className="overlap-group">
<FooterLm
className="footer-LM-instance"
text="TestPage © 2024"
text1="All rights reserved. | TestPage © 2024"
/>
<div className="ment-last-l">
여기까지가
<br />
테스트 페이지
<br />
끝이었습니다.
</div>
</div>
....
제가 선택한 요소를 React 코드로 받으면 다음과 같이 이어집니다.
보시면 가장 앞에서 import 를 통해 특정한 컴포넌트를 먼저 가져오고 있지요?
그 이유는 제가 선택한 요소 내부에 다른 디자인 요소들도 들어있기 때문입니다.
실제로 제가 선택한 요소 내부에는 각 페이지마다 버튼이 있습니다.
그리고 이 버튼은 Figma 내에서 특정한 Component 를 생성하고, 그 Component를 이용하여 만든 것이지요.
때문에 사용한 Component 를 클릭해서, 해당 Component 의 React 요소를 적절한 위치에 넣어주면 됩니다.
예시로 제가 선택한 커다란 페이지 요소가 “test/page” 라는 위치에 있다고 가정할까요?
시작 부분에서 import 로 불러오는 컴포넌트가 다음과 같죠?
import React from "react";
import { ButtonDetail } from "./ButtonDetail";
import { ButtonPrimary } from "./ButtonPrimary";
import { FooterLm } from "./FooterLm";
import { MenuEnabled } from "./MenuEnabled";
import "./newhome.css";
이때 우리는 내가 선택한 Figma 요소 내부에 사용된 컴포넌트가 총 4개 있구나 라는 것을 알 수 있습니다.
내가 만든 컴포넌트를 각각 선택하여 React 코드로 마찬가지로 추출하면 됩니다.
ButtonDetail 이라는 컴포넌트를 Figma 에서 React 코드로 추출을 했다고 생각할까요?
이 React 코드는 “test/ButtonDetail.js” 라는 경로 파일 내부에 넣으면 될 것입니다.
상대적인 위치니까요.
오늘은 간단한 플러그인을 이용해서 곧바로 React 에서 사용하기 위한 코드를 추출하는 방법을 알아봤습니다.
오랜만에 포스팅인데, 너무 게을러진 것 같네요..
앞으로 열심히 포스팅을 실천하겠습니다.^^