Back to Plugins
Figma to React Bootstrap

Figma to React Bootstrap

Convert Bootstrap 5 designs to React-Bootstrap components effortlessly. Design-to-code in 1 click!

Plugin Preview

Figma to React Bootstrap preview

About this plugin

Website:https://figma-to-react-bootstrap.vercel.app/How to use this plugin?:How to use: Figma to React Bootstrap PluginFigma to React BootstrapThis cool plugin takes your figma designs that uses the Figma components from Figma to React Bootstrap file and turns them into ready-to-use React-Bootstrap components. It's like having a design wizard by your side, so you can spend more time building your layouts. The preview mode offers an awesome user experiences that shows in real time the rendered react component.Figma to React Bootstrap Figma Component libraryThis component file library has been especially made to follow the React Bootstrap components API to match it's component's props, making it easier to use out of the box instances to use in your designs.ProTip!: As long as your layers are named after React Bootstrap components and follow the same nested components structure, then the plugin will render the React Bootstrap componentSupported components:✅ Grid❌Forms✅ Accordion✅ Alerts✅ Badge✅ Breadcrumb✅ Button group✅ Buttons✅ Card✅ Carousels✅ Close button✅ Dropdowns✅ Figures❌ Images✅ Figures✅ List groups✅ Modal✅ Navbars✅ Navs and tabs❌ Offcanvas❌ Overlay✅ Pagination❌ Placeholders❌ Progress bars (in progress)✅ Spinners✅ Tables❌ Tabs✅ Toast (and Toast container)*This plugin does not export your custom styles yet* This plugin is meant to render default styled React Bootstrap components.* Maybe in the future I will implement custom styling export.If you want to support my work in other ways:☕️ Buy me a coffeeThank you!

Plugin Details

Version25
CreatedJune 5, 2023
Last UpdatedSeptember 8, 2024
CategorySoftware development
CreatorEugenio Ciccale
Stats377 installs, 76 likes
PricingPaid

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://api.airtable.com
    • https://cdn.jsdelivr.net/
    • https://fastly.picsum.photos
    • https://maxcdn.bootstrapcdn.com/
    • https://picsum.photos
    • https://placehold.co/
    • https://unpkg.com/
    • https://www.picsum.photos