인프런 커뮤니티 질문&답변

Figma에서 디자인한 파일을 Figma to Code 플러그인의 (Tailwind JSX) 옵션을 통해 변환한 후, react의 App.js에 넣었습니다. 실행된 결과는 다음과 같습니다.

import './App.css';

function App() {
  return (
    <div className="w-[1920px] h-[969px] relative bg-white">
      <img
        className="w-[1011.68px] h-[238.57px] left-[454.16px] top-[387.92px] absolute"
        src={'https://via.placeholder.com/1012x239'}
      />
      <div className="w-[230.06px] h-[64.13px] left-[878.36px] top-[697.91px] absolute">
        <img className="w-10 h-10 left-[22.20px] top-[12.07px] absolute" src="https://via.placeholder.com/40x40" />
      </div>
      <div className="left-[1380.61px] top-[913.41px] absolute text-black text-4xl font-normal font-['Inter']">
        서비스 소개
      </div>
      <div className="left-[1584.30px] top-[913.41px] absolute text-black text-4xl font-normal font-['Inter']">|</div>
      <div className="left-[1624px] top-[913.41px] absolute text-black text-4xl font-normal font-['Inter']">
        만든 사람들
      </div>
    </div>
  );
}

export default App;

궁금한 것은 원래 피그마에서 디자인했을 때는 1012x239 이미지가 화면 정중앙에서 약간 아래 왔었고 전반적으로 위치가 다 (figma에서의 그것과) 맞지 않는데 레이아웃이 들어가지 않은건가요? 어떻게 해결해야 할지 조언 부탁드립니다.