Figma to React에서 의도한 대로 코드가 동작하지 않습니다.
544
작성한 질문수 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
2
1
투명위젯.zip
0
4
0
첫 강의 이후 1년이 지났는데 괜찮을까요.
0
13
1
클로드 코드 실행 방법 문의
0
12
1
안녕하세요 ai툴 질문있습니다.
0
30
2
Python 문의드립니다.
0
20
1
슬랙 연동 방법 및 파일 관련 질문
0
24
2
터미널앱으로 Terminus 사용 문의
0
22
1
스킬생성 후 업데이트.
0
18
2
강의 화면이랑 조금 달라 문의드립니다.
1
29
2
서브에이전트 활용 질문입니다.
0
40
3
plan mode를 진행하는것에 있어서
0
38
2
auto layout 뎁스를 많이 넣는 이유?
0
40
2
클로드 코드 설치 관련
0
43
2
스타터킷 중요도에 대한 질문입니다.
0
48
2
mission12-01 guide.md파일 누락
0
39
1
슬라이드 오타
0
31
0
전체적인 개발에 대해 문의드립니다.
1
62
2
챌린지 시작일 문의
0
48
0
줄바꿈 시 \ 필수인가요?
0
69
2
2605 이후 최신 클로드코드 강의 추가 부탁드립니다.
0
77
2
커리큘럼 문서 제공받을 수 있을까요?
0
62
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
52
1
mission 09-01 을 수행할 수 없어요
0
43
1





