Pen2Figma
pen.dev のデザインを、オートレイアウト、コンポーネント、変数、テーマを保ったまま Figma に取り込みます。
プラグインをダウンロード
Pen2Figma は .pen ファイルを編集可能な Figma ネイティブレイヤーに変換します。変換ルールは Pen 自身のレンダラーで項目ごとに検証済みです。線の揃え、多角形の形状、グラデーションの角度、円弧の向き、テーマの解決、字間など、誤りやすい細部はすべて Pen の実際のレンダリング結果に基づいて処理します。完全無料で、アカウント不要、回数制限もありません。
機能
- オートレイアウト
- 方向、間隔、パディング、整列に加え、ハグ、フィル、固定サイズ、絶対配置の子要素に対応します。
- コンポーネントとインスタンス
- Pen の再利用コンポーネントは Figma コンポーネントになり、インスタンスはネストを含むオーバーライドを保持します。アイコンの変更はインスタンスの入れ替えになります。
- 変数とテーマモード
- テーマの軸（ライト、ダークなど）ごとにモード付きの変数コレクションを生成します。変数の参照は保持され、フレームもそれぞれのテーマを保ちます。
- ライブラリ
- デザインが参照するライブラリの .pen ファイルを一緒にドロップすると、自動でリンクされます。
- スタイル
- 単色、線形・放射状・角度グラデーション、画像の塗り、辺ごとの線、シャドウとぼかし、角丸、円弧、ベクターに対応します。
- テキスト
- インストール済みのフォントに合わせてウェイトを選びます。CJK テキストは 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 に対応する機能がないため、明示的なプレースホルダーとして取り込まれます。コレクションごとに 1 モードのみの Figma プランでは、ほかのテーマは固定値になります。
Pen2Figma は UISurf が独自に開発したツールで、pen.dev および Figma とは提携関係にありません。
リリースノート
- 最初の公開バージョン。
- オートレイアウト、コンポーネントとインスタンス（ネストしたオーバーライドを含む）、テーマモード付き変数、ライブラリ、グラデーション、画像、エフェクト、アイコンに対応。
- CJK フォントのフォールバック、10 言語の UI、Figma に連動するライト／ダーク表示。