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 DesignsCodeLens Pro is a developer-friendly plugin that instantly generates and copies HTML, CSS, and other code fromselected 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 ElementsFlexible 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 PreviewSimple Pricing✅ 5-Day Free Trial✅ One-Time Purchase $15 (No Subscription)Accelerate frontend developer and designer workflows—drastically reduce design-to-code conversion time!