pencildev-to-figma
CommunityStreamline Pencil.dev design imports to Figma.
Authorgerald-ica
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Migrates designs from Pencil.dev to Figma, converting .pen files, or bridging Pencil and Figma workflows with automatic handling of screens, components, images, fonts, auto-layout, effects, and rich text.
Core Features & Use Cases
- Automatic Design Conversion: Import .pen design files from Pencil.dev into Figma with full design structure.
- Component Support: Convert reusable nodes into Figma Components with proper instances.
- Image Handling: Load local images and fetch remote URLs; convert SVG/WebP to PNG.
- Font Remapping: Suggest fallbacks for missing fonts.
- Use Case: Migrating a design library from Pencil.dev to Figma for collaboration.
Quick Start
Import a Pencil.dev design by running the plugin in Figma's Plugins menu and selecting a .pen file.
Dependency Matrix
Required Modules
nodenpm
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: pencildev-to-figma Download link: https://github.com/gerald-ica/dev-tool-configs/archive/main.zip#pencildev-to-figma Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.