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.
---
Component Fill , Component FIller
Plugin Details
| Version | 9 |
|---|---|
| Created | May 7, 2025 |
| Last Updated | August 6, 2025 |
| Category | Software development |
| Creator | miral |
| Stats | 3 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
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.