Figma 디자인 버튼 React 적용하기

Figma 디자인 버튼을 React 로 실제 구현하기

지난번에 한 번 Figma 를 이용해서 특정한 에셋을 어떻게 디자인 하고 어떻게 추출하는지를 해봤습니다.

Figma 디자인 하는 법

만약 디자인 된 버튼을 어떻게 추출하는지 모른다면 위 링크를 통해 먼저 숙지가 필요합니다.

적당한 디자인 탬플릿 찾기

디자인이 재능이 있다면 본인이 디자인을 하는 방법도 있겠지만,

저는 발로 그리나 손으로 그리나 비슷한 디자인 실력을 가진 인간이기에.. 위와 같이 누군가가 잘 만들어둔 탬플릿을 이용하겠습니다.

탬플릿 주소

여기 보면 여러 버튼 디자인이 있는데 저는 버튼 하나 복사해서 핑크색으로 바꿔서 사용해보겠습니다.

저는 핑크색을 좋아하니까요.

핑크색으로 바꾸는 김에 한글로 버튼이라고 글자도 넣었습니다.

이제 이걸 SVG 파일로 추출하겠습니다.

그리고 이 SVG 파일을 버튼으로 사용해보죠.

React 에서 구현해보기

다운로드 한 파일을 압축 해제하고, 안을 보면 이렇게 Button 이미지 그대로의 SVG 파일이 있는 걸 확인 가능합니다.

열어서 제대로 다운이 된 건지 확인하고, 이름도 예쁘게 MyButton 으로 변경해줬습니다.

이제 이걸 제 React 경로 상에서, src>page>img>test 라는 폴더 내부로 이동하겠습니다.

				
					import React from "react";

import MyButton from "../img/test/MyButton.svg";
import "./MyButton.css";

const Footer = () => {
  return (
    <div className="My-Test-Area">
      <button className="My-Button">기본 디자인</button>
    </div>
  );
};

export default Footer;


//
.My-Test-Area{
    height: 800px;
    width: 100%;
}

.My-Button{
    margin-top: 300px;
    margin-left: 50%;
}//

왼쪽의 코드를 사용해서 우선 아무런 디자인이 되지 않은 기본적인 버튼을 보겠습니다.

그냥 구린 파란색에, 하얀색 폰트가 나타납니다.

import 한 SVG 를 이용해서 다시 한 번 코드와 CSS를 작성하겠습니다.

CSS 는 아래에 // 부분으로 추가하겠습니다.

				
					import React from "react";

import MyButton from "../img/test/MyButton.svg";
import "./MyButton.css";

const Footer = () => {
  return (
    <div className="My-Test-Area">
      <button className="My-Button">
        <img src={MyButton} />
      </button>
    </div>
  );
};

export default Footer;

//

.My-Test-Area{
    height: 800px;
    width: 100%;
}

.My-Button{
    margin-top: 300px;
    margin-left: 50%;
}

.My-Button img{
    width: 100%;
    height: auto;
}

단순히 “기본 다지인” 이라는 글자 대신에 img 가 들어갔습니다.

이때 src 부분에 import 한 svg 의 경로를 넣어줍니다.

그럼 위처럼 기존에 버튼이 있던 영역에 적절한 비율로 버튼이 나타납니다.

문제는 기존 영역과 이미지의 크기가 딱 맞지 않아서 그렇지 않은 부분에 저렇게 파란색이 효과가 나타납니다.

이걸 해결하기 위해 CSS를 덧붙입시다!

				
					import React from "react";

import MyButton from "../img/test/MyButton.svg";
import "./MyButton.css";

const Footer = () => {
  return (
    <div className="My-Test-Area">
      <button className="My-Button">
        <img src={MyButton} />
      </button>
    </div>
  );
};

export default Footer;

//

.My-Test-Area{
    height: 800px;
    width: 100%;
}

.My-Button{
    margin-top: 300px;
    margin-left: 50%;

    border :transparent;
    background-color: transparent;
    box-shadow: none;
}

.My-Button:hover{
    border: transparent;
    background-color: transparent;
    box-shadow: none;
}

.My-Button img{
    width: 100%;
    height: auto;
}

CSS에서 달라진 부분이 보이시나요?

border, background-color 에는 transparent 를 넣고,

box-shadow 에는 none 을 넣습니다.

이 3가지 요소가 기본적인 My-Button CSS에..

그리고, My-Button:hober CSS에 들어가면..

우리가 추출한 SVG 요소의 버튼만이 남고 기본 디자인은 보이지 않게 됩니다.

버튼 기본 디자인만 괜찮은 거 하나 잘 따와서 이런 식으로 사용하면 괜찮더군요ㅎㅎ

마치며...

혹시나 단순히 이 버튼을 그대로 사용하는 것이 아니라,

버튼을 누르면 다른 이미지로 변경하기를 원한다면 아래 포스팅 이동하기 버튼으로 다른 프로젝트를 보는 것도 추천드립니다!