페이지 바로 아래 프레임만
안쪽에 겹쳐 넣은 프레임은 부모의 일부로 그려집니다. 잔가지까지 세면 목록이 못 쓰게 됩니다.
Figma 가져오기
그린 그대로 옮깁니다
피그마에서 그린 프레임을 읽어 자리와 크기를 픽셀 그대로 씁니다. 미리보기와 React + Tailwind 코드가 같이 나옵니다.
가져오기0px 차이
- 자리 오차(7화면)
- 한 번에 읽는 화면
- 옮기는 속성 갈래
- 저장하는 토큰
- React + Tailwind
- 미리보기 바깥 연결
화면 7개를 실제 브라우저로 재 봤을 때 어긋난 곳이 없었습니다.
이게 뭔가요
여백이 죽는 자리를 없앱니다.
디자인을 넘기면 결국 눈으로 보고 다시 그리게 됩니다. 그 사이에서 여백이 몇 픽셀씩 밀리고 색이 한 단계 달라집니다. 여기서는 파일을 읽어 자리·크기·색·글자를 숫자 그대로 씁니다. 옮기는 동안 다시 해석되는 구간이 없습니다.
어떻게 쓰나
가리키고, 고르고, 가져갑니다.
토큰은 파일을 받아올 때 한 번만 씁니다. 그 뒤로는 남지 않습니다.
- 파일을 가리킵니다
피그마 파일 주소와 개인 토큰을 넣습니다. 토큰은 받아오는 데만 씁니다.
- 화면을 고릅니다
페이지 바로 아래 프레임이 화면으로 뜹니다. 목록에서 볼 것을 고릅니다.
- 코드를 가져갑니다
미리보기·코드·요약 세 가지로 봅니다. 코드는 복사해서 프로젝트에 넣으면 됩니다.
실제로 잰 것
얼마나 가깝게 떨어지나.
문서로 주장하지 않고 브라우저에 실제로 띄워 쟀습니다.
- 자리 오차 0px
화면 7개를 실제로 띄워 원본 프레임과 견줬을 때 어긋난 곳이 없었습니다(2026-07-18).
- 화면 24개까지
한 파일에서 한 번에 읽어 오는 화면 수입니다.
- 옮기는 것 6갈래
자리와 크기, 자동 배치, 글자, 단색과 그라디언트, 이미지, 그림자.
- React + Tailwind 로 출력
정확한 px 를 그대로 적어 내므로 가까운 단계로 반올림되지 않습니다.
- 토큰 저장 0
넣은 토큰은 파일을 받는 데만 쓰고 어디에도 적어 두지 않습니다.
- 미리보기 격리
가져온 화면은 바깥으로 나가는 길을 막아 둔 상태로 띄웁니다.
안 되는 것
정확도가 끝나는 자리.
자리가 맞는 것과 바로 쓸 수 있는 것은 다른 얘기입니다.
부품과 벡터 도형은 다음 차례
만들어 둔 부품을 부품으로 알아보는 것, 펜으로 그린 도형을 그대로 옮기는 것은 아직입니다.
반응형으로 바꿔 주지 않습니다
그린 폭 그대로 나옵니다. 화면이 좁을 때 어떻게 접힐지는 사람이 정합니다.
피그마 계정을 붙이지 않습니다
가져올 때마다 개인 토큰을 넣습니다. 계정을 연결해 두는 방식은 아직 없습니다.
다음
이어서 볼 것
가져온 화면도 그다음부터는 보통 프로젝트입니다. 갤러리와 MCP 쪽이 이어집니다.