Figma to React에서 의도한 대로 코드가 동작하지 않습니다.
524
작성한 질문수 1
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에서의 그것과) 맞지 않는데 레이아웃이 들어가지 않은건가요? 어떻게 해결해야 할지 조언 부탁드립니다.
답변 1
오류사항
0
12
3
md 파일을 위한 폴더 관리의 기준이 궁금합니다.
0
7
2
혹시 결제연동
0
13
1
claude code가 작업중일때 ctrl t 눌러서 진행상황 확인 불가
0
19
1
메타프롬프트 관련
0
20
2
side bar positon. 어떻게 해도 안돼요..;
0
17
1
모델 고정방법 문의
0
19
2
98강. 1인 사이드프로젝트 시 질문
0
24
2
state 객체로 묶기
0
14
0
강의화면과 Cursor프로그램 화면이 달라서요..
0
20
2
커서 설치했는데 이해 안되네요
0
27
2
공식사이트 관련과 workspace
0
19
2
수업 잘 들었습니다.
2
23
2
user-memory-setup 저장 관련
0
17
2
user-memory-setup 작성하고 클로드 코드로 돌아가는 방법
0
16
2
에러화면 질의
0
21
2
[미션6] output-style 위치 변경
0
18
2
아래 에러가 나는 경우의 대처법
0
20
2
이전 커밋으로 롤백을 하고 다시 롤백하기 전 커밋으로 돌아가려고 하는데 그래프 패널에서 main이 사라져 버립니다.
0
17
2
CLAUDE.md 에 import 문법 질문
0
23
2
Github 404 Error
0
25
2
/update-roadmap 는 언제 어떻게 사용하는건지요?
0
27
2
깃 관련질문입니다!
0
31
2
53강 질문
0
32
2





