Back to Plugins

ComponentFiller AI
Insert the text from the design data into your code
Plugin Preview
About this plugin
ComponentFiller は生成AIを用いて、選択したフレームの原稿と、人間が用意したコンポーネントのコードを組み合わせ、コンポーネントに適切な原稿を入力したコードを返します(要APIキー/Gemini のAPIは無料で取得できます)
利用方法
- 利用するAIのAPIを選択
- APIキーを入力
- 利用する言語と、言語に合わせた基本のプロンプトを設定(任意)
- ベースとなるコンポーネントのコードを入力
- 利用したいフレームを選択
- コードを生成
注意事項:コードを生成するために、選択したAIサービスにデータが送信されます
---
ComponentFiller uses generation AI to combine the script for the selected frame with the component code prepared by humans, and returns a code with the appropriate script entered into the component (API key required).
How to use
- Select the AI API to use
- Enter the API key
- Set the language to use and the basic prompt for the language (optional)
- Enter the base component code
- Select the frame you want to use
- Generate code
Please note: Your data will be sent to the AI service of your choice to generate the code.
Plugin Details
Version | 5 |
---|---|
Created | May 7, 2025 |
Last Updated | May 21, 2025 |
Category | Software development |
Creator | miral |
Stats | 2 installs, 0 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- https://api.openai.com
- https://generativelanguage.googleapis.com
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI