Pen2Figma
pen.dev 디자인을 오토 레이아웃, 컴포넌트, 변수, 테마를 유지한 채 Figma로 가져옵니다.
플러그인 다운로드
Pen2Figma는 .pen 파일을 바로 편집할 수 있는 Figma 네이티브 레이어로 변환합니다. 변환 규칙은 Pen의 자체 렌더러로 항목별로 보정했습니다. 선 정렬, 다각형 형태, 그라디언트 각도, 호 방향, 테마 값, 자간처럼 오류가 발생하기 쉬운 세부 사항은 모두 Pen의 실제 렌더링 결과를 기준으로 처리합니다. 완전 무료이며 계정이 필요 없고 제한도 없습니다.
기능
- 오토 레이아웃
- 방향, 간격, 패딩, 정렬과 함께 hug, fill, 고정 크기, 절대 위치 자식 요소를 지원합니다.
- 컴포넌트와 인스턴스
- Pen의 재사용 컴포넌트는 Figma 컴포넌트가 되고, 인스턴스는 중첩을 포함한 오버라이드를 유지하며, 아이콘 변경은 인스턴스 교체가 됩니다.
- 변수와 테마 모드
- 테마 축(라이트, 다크 등)마다 모드가 있는 변수 컬렉션을 만들고, 변수 참조를 유지하며, 프레임도 각자의 테마를 유지합니다.
- 라이브러리
- 디자인이 참조하는 라이브러리 .pen 파일을 함께 끌어다 놓으면 자동으로 연결됩니다.
- 스타일
- 단색, 선형·방사형·각도 그라디언트, 이미지 채우기, 면별 선, 그림자와 블러, 둥근 모서리, 호와 벡터를 지원합니다.
- 텍스트
- 설치된 글꼴에 맞춰 굵기를 찾습니다. 한중일 텍스트는 Pen과 마찬가지로 PingFang SC 또는 Noto Sans SC로 대체됩니다.
- 아이콘
- lucide, Material Symbols, phosphor, feather를 지원하며 Pen과 같은 아이콘 버전을 사용합니다.
설치
Pen2Figma는 아직 Figma Community에 게시되지 않아 직접 가져와야 하며, Figma 데스크톱 앱에서만 가능합니다.
- 위의 압축 파일을 다운로드해 압축을 풉니다.
- Figma 데스크톱 앱의 메뉴에서 Plugins → Development → Import plugin from manifest…를 선택합니다.
- 압축을 푼
manifest.json을 선택하면 Plugins → Development에 Pen2Figma가 나타납니다.
사용 방법
- Pen2Figma를 실행하고
.pen파일(사용하는 라이브러리.pen파일과 이미지 포함)을 Figma 캔버스로 드래그합니다. 플러그인에서 파일을 선택할 수도 있습니다. - 가져올 프레임을 선택하고 가져오기를 시작합니다.
- 모든 내용은 현재 페이지에 배치되고, 확인이 필요한 항목은 요약에 표시됩니다.
개인정보
변환은 모두 플러그인 안에서 이루어지며 파일은 업로드되지 않습니다. 네트워크 요청은 아이콘과 디자인이 참조하는 이미지를 가져올 때만 사용합니다.
알려진 제한 사항
셰이더, 메시 그라디언트, 스크립트 노드, 웹 페이지 노드는 Figma에 대응 기능이 없어 명확히 표시된 자리 표시자로 가져옵니다. 컬렉션당 모드를 하나만 허용하는 Figma 요금제에서는 다른 테마가 고정 값으로 들어갑니다.
Pen2Figma는 UISurf가 독립적으로 개발한 도구이며 pen.dev 및 Figma와 제휴 관계가 없습니다.
릴리스 노트
- 첫 공개 버전.
- 오토 레이아웃, 컴포넌트와 인스턴스(중첩 오버라이드 포함), 테마 모드가 있는 변수, 라이브러리, 그라디언트, 이미지, 효과, 아이콘을 지원합니다.
- 한중일 글꼴 대체, 10개 인터페이스 언어, Figma를 따르는 라이트·다크 UI.