[React] figma 디자인 적용하기

피그마 디자인 적용

로그인 페이지를 만드는데, 피그마로 디자인된 페이지를 리액트로 적용해야 할 일이 생겼다.

 

다음과 같은 디자인을 리액트에 적용해야하는데, 문제는 피그마 디자인이 제대로 되어있지 않고, 애니마를 통해서 리액트로 import 할 수는 있으나 결제를 해야한다...

Anima를 통한 import

 

그래서 CSS를 보고 디자인을 적용시켜야 하지만, 디자이너가 만든 것이 코드로 바로 적용이 될 수가 없지...

 

단순 적용만 할 경우 나타난 결과

 

 

단순 적용만 하면 다음과 같이 괴작이 탄생한다...

 

 

 

다음과 같이 픽셀단위로 분석하고 알잘딱하게 코드를 짠다.

 

 

결과

 

완성!!

참 쉽죠?