「Figmaで作ったデザイン、そのままコードにできないか」と考えたことがあるフロントエンドエンジニアは多いはずだ。今回紹介するのは、Figmaで作成済みのプロトタイプを Pencil.dev へ移行する準備フェーズのリアルな記録だ。
なぜPencil.devへ移行するのか
Pencil.dev はデザインからコードを直接生成できるツールで、特にReact/Remixベースのプロジェクトとの相性が注目されている。今回の移行プロジェクトのターゲットは書籍販売ECサイトのモックアップで、トップにカルーセル・新着アイテム一覧という典型的なECレイアウト構成だ。技術スタックは以下の通り：
- フレームワーク: Remix
- コンポーネントライブラリ: shadcn
- スタイリング: TailwindCSS
- AI支援: Claude Code Opus 4.6（トークン枯渇時はOpenAI Codexを併用）
移行方法の選択肢と注意点
FigmaからPencilへの移植方法は主に2つある：
- コピー法: Figmaファイルをローカルにダウンロードしてからインポートする方法。ただし、画像が欠落してデザインが崩れることがある
- 要素コピペ法: FigmaからシンプルにPencilへ要素を貼り付けるアプローチ
コピー法で.figファイルを使う場合、ページ数が多かったりファイルサイズが大きいとPencil側でのインポートに失敗するケースがある点も要注意。
画像ファイルの扱い方
移行で最も嵌りやすいのが画像ファイルの管理だ。Figmaの素材はローカルに保存してPencil用のディレクトリに配置する必要がある。推奨ディレクトリ構成は以下の通り：
docs/
└── pencil/
└── project.pen # Pencilのデザインファイル
└── images/ # .penから参照する画像を配置
├── hero.png
└── icon.pngあるいは画像パスを直接指定する方法もある。いずれにせよ、Figma内の画像参照はPencilに引き継がれないため、事前に素材の棚卸しと整理が必要になる。
まとめ・所感
「デザインツールの移行」は聞こえはシンプルだが、実際にはファイルサイズ・画像パス・コンポーネント設計と、地味な準備作業が積み重なる。この記事はPart.2（準備編）であり、実際のデザイン移植・コード生成は続編に続く。Figma→Pencil移行を検討しているチームには、この段階でのハマりポイントを知っておくだけでも価値がある内容だ。Claude Code + shadcn + Remixという最新スタックとの組み合わせも注目したい。