Figma to React에서 의도한 대로 코드가 동작하지 않습니다.
536
작성한 질문수 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
5
1
사진과 같이 영상에 한글이 실시간으로 영어로 번역되어 보입니다
0
3
1
커밋버튼 비활성화
0
11
1
Cursor 질문
0
11
1
웹사이트 구축 질문
0
14
0
플러그인, git repo 설치 및 삭제
0
12
0
162 자료
0
10
1
supabase mcp로 테이블 생성 보여주실떄
0
16
2
settings.local.json
0
24
1
강의자료는 어떻게 제작하시나요?
0
20
2
notion 에이전트와 prd-generator 에이전트와의 관계
0
19
2
PRD.md
0
20
2
클로드코드 단축키 문의
0
22
1
Shrimp Task Manager npx 설치 질문
0
25
1
클로드 코드 초기 설정이 안되요
1
25
2
클로드 코드 터미널 텍스트 중복 출력
0
28
2
비밀번호 재설정 1회용 이메일 링크
0
30
1
강의교안
0
39
1
DOCs와 스킬관련 PRD 폴더트리
0
25
2
캡쳐이미지 터미널에 복붙하는 방법 (윈도우 사용시)
0
30
2
강의교안
0
35
2
확장프로그램 찾기
1
33
2
/statusline 상태표시줄 표시 왜 안될까요
0
31
2
컴포넌트와 레이아웃
0
28
2





