CodeLens Pro

About this plugin

Figma デザインからHTML・CSSコードを瞬時に生成

CodeLens Pro は、Figma の選択要素からHTMLやCSSなどのコーディングに必要なコードを即座に生成・コピーできる日本語対応の開発者向けプラグインです。

そのほかTailwindCSSやpx→rem変換も可能！

HTML構造も同時出力でき、ネスト構造にも対応。グラデーション、シャドウ、Auto Layoutまで完全対応し、デザインからコーディングへの橋渡しを劇的にスピードアップします。

主な機能

✅ HTML + CSS セット出力

✅ HTML 構造の自動生成

✅ネスト構造での一括出力に対応

✅ クラス名の編集機能

✅ スタイルとマークアップを同時取得

✅擬似要素への変換機能（before/after）

高度なスタイル抽出

✅ グラデーション完全対応（線形・放射）

✅ シャドウ自動変換（DROP_SHADOW → box-shadow）

✅ Auto Layout → Flexbox 自動変換

✅ line-height の自動計算・変換

✅ 回転対応（transform: rotate()）

✅ 画像アスペクト比の自動取得

✅ 非表示プロパティの自動除外

✅要素間の余白を取得

柔軟な出力形式

✅ CSS / rem / Tailwind CSS/ HTML の 4 形式対応

✅ rem ベースサイズ変更（10px〜20px）

✅ SCSS 関数形式出力（rem(24) 形式）

✅ カラーフォーマット切替（rgba ↔ hex）

開発効率化

✅ クラス名編集機能

✅ 複数要素の一括取得

✅ プロパティのみコピー

✅ リアルタイムプレビュー

安心の価格設定

✅ 5 日間無料トライアル

✅ 買い切り $15（サブスクなし）

フロントエンド開発者・デザイナーのワークフローを加速し、デザインからコードへの変換時間を大幅に削減します！

------------------------

Instantly Generate HTML & CSS Code from Figma Designs

CodeLens Pro is a developer-friendly plugin that instantly generates and copies HTML, CSS, and other code from

selected Figma elements. Supports Tailwind CSS and px→rem conversion!

Simultaneously outputs HTML structure with full support for nested elements. Complete coverage for gradients,shadows, and Auto Layout—dramatically accelerating the design-to-code workflow.

Key Features

✅ HTML + CSS Set Output

✅ Automatic HTML Structure Generation

✅ Bulk Export with Nested Structure Support

✅ Editable Class Names

✅ Simultaneous Style & Markup Extraction

✅ Pseudo-Element Conversion (::before/::after)

Advanced Style Extraction

✅ Full Gradient Support (Linear & Radial)

✅ Automatic Shadow Conversion (DROP_SHADOW → box-shadow)

✅ Auto Layout → Flexbox Auto-Conversion

✅ Automatic line-height Calculation & Conversion

✅ Rotation Support (transform: rotate())

✅ Automatic Image Aspect Ratio Detection

✅ Auto-Exclude Hidden Properties

✅ Extract Spacing Between Elements

Flexible Output Formats

✅ 4 Format Options: CSS / rem / Tailwind CSS / HTML

✅ Adjustable rem Base Size (10px–20px)

✅ SCSS Function Format Output (rem(24) syntax)

✅ Color Format Toggle (rgba ↔ hex)

Development Efficiency

✅ Class Name Editing

✅ Bulk Multi-Element Export

✅ Properties-Only Copy

✅ Real-Time Preview

Simple Pricing

✅ 5-Day Free Trial

✅ One-Time Purchase $15 (No Subscription)

Accelerate frontend developer and designer workflows—drastically reduce design-to-code conversion time!