Back to Plugins
iTailwind

iTailwind

The Ultimate Handoff Tool for UI Designer and Frontend Developers

Plugin Preview

iTailwind preview

About this plugin

iTailwind adalah plugin Figma yang mengotomatisasi konversi desain menjadi komponen siap pakai.


Dengan iTailwind, setiap elemen desain yang Anda buat secara otomatis menghasilkan utilitas kode Tailwind CSS, memastikan sinkronisasi 1:1 antara visi desainer dan hasil akhir pengembang.


Komponen yang tersedia :

  1. Button (Tombol)
  2. Checkbox (Kotak Centang)
  3. Text Field / Input Field (Kolom Input Teks)
  4. Radio Button (Tombol Radio)
  5. Tabs (Tab Navigasi)
  6. Switch (Saklar On/Off)
  7. Alert Banner (Banner Peringatan)
  8. Tooltip (Informasi Melayang)
  9. Progress Indicator (Indikator Progres)
  10. Data Table (Tabel Data)


Fitur Utama iTailwind:

  1. Real-time Preview: Lihat perubahan desain secara langsung pada panel plugin saat Anda mengonfigurasi komponen, memastikan hasil sesuai keinginan sebelum masuk ke kanvas.
  2. Reusable Component: Setiap desain yang dibuat otomatis menjadi Komponen Figma dengan Auto Layout, sehingga konsisten dan mudah digunakan kembali dalam proyek Anda.
  3. Instant Tailwind Code: Hasilkan kode HTML dan Tailwind CSS yang presisi secara otomatis. Cukup salin dan tempel (copy-paste) ke proyek pengembangan Anda.
  4. Presisi Desain-ke-Kode: Menggunakan arbitrary values (seperti bg-[#HEX]) untuk menjamin hasil kode di browser 100% akurat dengan desain di Figma.

Plugin Details

Version3
CreatedDecember 27, 2025
Last UpdatedJanuary 22, 2026
CategorySoftware development
Creatorm4sbay
Stats3 installs, 7 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:build/ui.js
  • main:build/main.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://www.figma.com