문서가져오기와 내보내기
가져오기
Figma 파일, pen.dev 파일, SVG, 웹 페이지, 스크린샷을 편집 가능한 레이어로 가져옵니다.
1Figma
- Figma에서 파일의 로컬 사본 저장(Save local copy)을 선택해
.fig파일을 받습니다. - 파일의 가져오기에서 Figma(
Cmd+Shift+F)를 선택하거나, 홈의 카드, 더블클릭, 창에 끌어다 놓기로 엽니다. - 원하는 페이지를 고르거나 모든 페이지 가져오기를 선택합니다.
- 위치를 그대로 유지하려면 Figma 레이아웃 유지를, 스택을 다시 구성하려면 Design Editor 자동 레이아웃을 선택합니다.
정확히 옮기지 못한 부분은 경고로 표시됩니다. Figma에서 레이어를 복사해 여기에 붙여넣어도 됩니다.
2pen.dev
.pen 파일은 제목 없는 새 문서로 열리며, 원본 파일에는 다시 쓰지 않습니다. 셰이더, 스크립트, 메모, 브라우저 노드도 함께 옮겨집니다.
3SVG와 이미지
이미지 도구로 PNG, JPEG, GIF, WebP, SVG 파일을 배치합니다. SVG는 편집 가능한 벡터 레이어가 됩니다. 래스터 이미지는 캔버스에 바로 끌어다 놓을 수도 있습니다.
4HTML
파일의 가져오기에서 HTML(Cmd+Shift+H)을 선택하면 .html 또는 .htm 파일, 또는 스타일과 이미지를 함께 담은 .zip을 가져올 수 있습니다. CSS 캐스케이드, 변수, 미디어 쿼리, 그리드를 따르며, 근사치로 처리한 부분을 목록으로 보여 줍니다.
de import:html https://example.com --viewport-height 9005스크린샷 재현
홈의 스크린샷 카드는 PNG나 JPEG를 에이전트에게 보내고, 에이전트가 이를 편집 가능한 디자인으로 다시 만듭니다.
6Chrome 확장 프로그램
저장소에 있는 확장 프로그램은 보고 있는 페이지를 실행 중인 에디터로 가져옵니다. 전체 페이지를 캡처하거나, 요소 하나를 고르거나, design.md를 추출하거나, .de 파일을 다운로드할 수 있습니다.
아직 Chrome 웹 스토어에는 없습니다. packages/de-chrome-extension에서 빌드한 뒤 Chrome 110 이상에서 압축 해제된 확장 프로그램으로 로드하세요. 내 컴퓨터의 에디터와만 통신합니다.