前提
- Figmaでのプロトタイプデザインはありますが、Pencilへの移行は未完了
- デザイントークンやコンポーネントの準備もまだ
手順としては以下の流れで進めます。
- FigmaのデザインをPencilに移植
- 移植したデザインを整理（色変数やコンポーネント分割）
- アプリケーションの土台を用意
- デザインからコード生成＆微修正
技術スタック
フレームワークに Remix を使用し、コンポーネントライブラリの一部に shadcn を採用、スタイリングは TailwindCSS で表現するというシンプルな構成で進めます。主に Claude Code Ops 4.6 で作業を進めました。（セッションあたりのトークンを使い切った場合はCodexも併用しました）
移行前の準備
フレームのコピペ
書籍を販売するECサイトのモックアップの一部で試してみます。先頭にカルーセル、その下にニューリリースのアイテムを並べています。
移行の方法は、FigmaのファイルをローカルにダウンロードしてPencilに読み込ませるか、シンプルに要素をコピペするかのどちらかです。
コピペで対応した場合、画像が欠落してしまいます。デザインも一部崩れます。
画像を移植する場合はFigmaの素材をローカルに保存し、Pencil用のディレクトリに配置する必要があります。または画像のパスを直接指定する方法もあります。
docs/
└── pencil/
├── project.pen # Pencilのデザインファイル
└── images/ # .penから参照する画像を設置
├── hero.png
└── icon.png
.figファイルからインポートする場合
ローカルコピーとしてFigmaファイルを書き出すこともできます。
ただし、複数のページをまたいだりファイルサイズが大きい場合、Pencil側でインポートに失敗することがあります。少し手間ですが、Pencil用に要素を分割してからローカルに書き出すとうまくいきました。
フォントの指定
本当は Hiragino Sans を利用したかったのですが、デフォルトの選択肢にありませんでした。
（海外のベータ版のため仕方がない）
フォントファイルを読み込ませてカスタムフォントとして利用することもできますが、今回は代わりに Noto Sans JP で代用しました。
階層整理
Figmaから持ち込んだ場合以下のように、命名がわかりにくかったり冗長な階層になっている箇所があるため、全体的に整理します。
「冗長に深い階層をシンプルな状態に、フレームの命名はセマンティックでわかりやすい状態にリファクタリングしてください」と指示することで、以下のように整理されます。
変数の管理
使われている色を変数化してVariablesに定義します。この変数管理の仕組みはFigmaとかなり近い感覚で使えます。
Pencilのvariablesのスクリーンショット
アプリケーション側に反映するため、指定のファイルに出力させます。
こういった変数の網羅とコードとの同期がとても楽になったと感じます。
運用でなんとかするんじゃなくて、AIでこの整理をゴリ押しできるのがいいですね。
color.css
再利用可能なコンポーネント化
デザインの中で繰り返し利用される要素はコンポーネント化しておきます。「再利用可能なUIコンポーネントとして定義して、他のページではそのインスタンスを利用してください」などと指示して整理します。
Pencil (.pen) におけるコンポーネントバリアントの表現方法
PencilにはFigmaのような組み込みの「Variant」機能は今のところ実装されていないので、個別のreusableコンポーネントとして定義しました。
- Buttons / Primary
- Buttons / Cta
- Buttons / Outline
また、現状Figmaのようにページ単位で管理することはできないため、レイヤーで管理しています。
実際に作らせてみた
体感7割の完成度
かなり良い仕上がりです。過去にFigma MCPを利用したときと比べて、体感的に良いものが出来上がりました。背景画像がなかったり色が異なる箇所はありますが、Footerなど画面外の部分を含めても全体的にバランスは取れています。
localhostで立ち上げたトップのスクリーンショット
実装されたTypescriptのコードを見ると、アイコン系はSVGタグを直接記述していたり、色変数の扱いが text-[var(--color-text-primary)] のように冗長になっていたりと、人が読む前提では可読性が低い箇所もあります。
自然言語の指示が通りやすくなった
「全体的に著者名がないから追加して」という指示がそのまま通るようになりました。
以前は「著者」と伝えてもデザインのどの要素を指しているかAIが理解できず、結局NodeIdを教えて「Id=xxxの下に著者名を追加して」という冗長な指示が必要でした。それが自然言語で伝わるようになっています。Pencilの構成がシンプルになったからなのか、単純にAIの性能が向上したからなのかは判断できませんが、とても便利に感じました。
繊細な調整はまだ苦手
ランキング用の王冠アイコン内の数値の位置がずれてたり、ディティールのずれはまだ目立ちます。「Crownの中の数値の位置が左上にずれているので、左右中央・上下はやや下に配置してください」と具体的に指示する必要がありました。
その他
Pencil自体のアップデートがとても速いです。✨
数日ごとに改善が続いているので、使っていてとても楽しいです。💪
Figmaで便利だったVariant機能も待ち遠しいですね。
つい先日（2026年3月25日）のアップデートでUIが大きく変わりました。サイドバーが追加されてレイヤーごとの管理が楽になったり、コンポーネント化がGUI上で直感的に操作しやすくなったりしています。
こういった変更はPencilのDiscordで告知されています。
開発者からの質問も活発なコミュニティです。
https://discord.com/invite/Azsk8cnnVp
FigmaにもMCPを利用したAIデザイン生成機能が登場
Pencilを利用していてなんですが、FigmaにもAIでデザインを生成する機能が登場しました。
AIがFigmaに書き込み、Figmaからコードを生成する流れができそうですね。
この比較も面白そうなので別で試してみたいと思います。
https://x.com/figma/status/2036434766661296602
https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/
以下の記事にまとめてみました
Claude CodeからFigmaを操作できるようになったので試してみた
最後に
ここまで読んでいただきありがとうございました。
次はデザイナーがデザインを追加した時のコラボレーションについて書いていきたいと思います。
Part.1はこちら
Figmaから Pencil.dev に乗り換えを検討してみた Part.1【検証編】