Frontender

Frontenderは、フロントエンドのワークフローを効率化するために設計された、個人用のジュニア開発者のように動作するFigmaプラグインです。

主な機能と特徴

1. デザインからコードへ：Figmaで任意のレイヤーを選択すると、Frontenderがフロントエンドコードに変換します。
2. Auto Layoutに依存しない：Auto Layoutや整理されたレイヤー構成を必要とせず、ファイルが複雑でも順序、階層、意味を判断します。
3. CSSとTailwindに対応：CSSとTailwindを深く理解し、任意の値を使ったり、設定内で最も近い値を探したりできます。
4. カスタム設定に対応：カスタムTailwind設定を貼り付けると、カスタムクラスを使った本番環境向けコードを作成します。
5. 複数の出力形式：Only CSS、Only CSS-in-JS、Only Tailwind、HTML with CSS、HTML with Tailwind、JSX with CSS-in-JS、JSX with Tailwindに変換できます。
6. フレームワーク互換性：NextとReact（JSX）、VueとSvelte（HTML）などのフレームワークで利用できます。

料金モデルと費用

アカウントは不要で、永久に無料です。毎月15回の変換を無料で利用できます。

利用方法

アカウントを作成せず、今すぐFigmaで試せます。レイヤーを選択するとコードを取得できます。