Frames

Figma to Bubble Converter

Convert your Figma designs into responsive, pixel-perfect Bubble elements in just a few clicks — for free. Convert your Figma designs into responsive, pixel-perfect Bubble elements in just a few clicks — for free. This tool is ideal for founders who got started on Figma and are ready to start developing. Figma is great at design. Bubble is great at turning design into real apps. Now you don’t have to choose. Make sure the Figma plugin is installed. Select your Figma design using that plugin. Bubble can convert Figma assets with up to 1,000 elements but works best with designs built using auto layout. Once you submit a Figma design using the Figma plugin, copy it using this Chrome extension. You’ll automatically see it available to copy. Paste into your Bubble editor. Turn your polished designs into production-ready apps — no rebuilding required. Access is free with a Bubble account. See additional documentation here. Note: This tool is not affiliated with, endorsed by, or sponsored by Figma.

Nocodext for Bubble

This extension extends Bubble.io editor's UI with missing features. These features, also known as Widgets are the following : [2026-05] * ERD diagram : visual overview of all your tables schema and relations * Databrowser : Get your tables and props in a glance. Run a reverse search * CommandPalette : bookmark everything and reach any element in a snap * Designer : show all elements on the page preview [2025-10] * Designer : Reveal everything in a page Stop clicking on each of many elements to unhide * Elements tree : filter by type Show only the elements of type you want to see * API connector revamped Work with API Connector reimagined * API connector & Postman Leverage the power of Postman from insde Bubble. Handle endpoints in a snap * API Navigator Overview all your API connector queries. No endless scrolling v3.0.1 : fixed options panel content fixed : enabled : revamp api connector and navigator

Bubble Buddy

Bubble Buddy allows you to quickly add/remove the debugger, reveal an element in Elements tree, start/edit a workflow, switch between live and test versions of Bubble Editor, and App pages by using *Keyboard Shortcuts* Use the following 8 Keyboard Shortcuts to make the desired changes: 1. To add/remove “debug_mode” to the page URL, use “Ctrl + M” (or click on the Bubble Buddy extension icon) 2. To reveal an element in Elements tree, a) Select an element of your choice and then b) Use "Ctrl + Shift + E" 3. To start/edit a workflow on an element, a) Select an element of your choice b) Use "Ctrl + Shift + F" 4. To switch between live and test versions of your app pages, use “Ctrl + Shift + L” 5. To switch between live and development versions of your Bubble Editor, use “Ctrl + Shift + K” 6. To select first parent of an element, a) Select an element of your choice b) Use "Ctrl + Shift + Y" 7. To open app's Backend Workflows page in a newtab, use "Ctrl + Alt + B" - With Bubble Buddy sidepanel, you can organise all your URLs (Bubble Editor, App preview pages, any resource links) and Branches linked to your Bubble Projects at one place. - "Toggle Sidepanel" shortcut will work only on Bubble Editor pages. For Bubble Buddy tutorials, checkout this playlist: https://www.youtube.com/playlist?list=PL4YOHwiJinHt3S7Y7TOLxIj2lvcE776O- - - - - - - - - - - - - - - - - - - - - - - - - - - UPDATES: v2.4: - Bug fixes Version 2.0: - Open Backend Workflow in newtab shortcut - Show/Hide Buddy Buddy sidepanel shortcut - Organise your Bubble projects' related URLs and Branches [Demo Version] - Added shortcuts support to apps on Bubble Dedicated instances (suggested by Andy Kalati - @akalati)

Bubble.io Toolkit - Framify.io

The ultimate toolkit for Bubble.io developers. Access essential UI components, convert Figma designs, and build professional apps Transform your web development workflow with Framify, the definitive library for Bubble.io & Webflow users. Whether you're new to no-code or a seasoned developer, our comprehensive suite of tools helps bring your vision to life. ⭐️⭐️⭐️Core Functionality Provided⭐️⭐️⭐️ ✨ Component Library & Marketplace - Browse and copy high-quality UI components for Webflow & Bubble.io - Access community-created components vetted for quality - Organize components with smart folders and categories - Copy-paste implementation with just a few clicks - From buttons to complex layouts, everything you need is ready to use 🎨 Figma to Bubble.io Converter - Convert Figma designs to Bubble.io-ready components in seconds - Maintain responsive design with Auto-Layout support - Organize converted components in custom folders - Export entire sections or individual components - Seamless integration via Chrome extension and Figma plugin 🎯 Color Palette Generator - Create and customize professional color palettes - Generate complementary shades, tints, and tones - Preview colors on actual components - Save and organize palettes for future use - One-click color code copying 🖼️ Dynamic Placeholder Generator - Create custom-sized image placeholders instantly - Access curated stock image library - Download or copy shareable URLs - Multiple aspect ratios and dimensions supported - Perfect for prototyping and development 🎨 CSS Classes Manager - Add custom CSS classes to your elements - Organize and manage styles efficiently - Create reusable style components - Live preview of style changes - Recommended for Bubble.io users 🔄 Option Sets Manager - Bulk import and export option sets - Modify multiple option sets simultaneously - Create option sets with AI ⌨️ Keyboard Shortcuts - Create custom keyboard shortcuts - Speed up your development workflow - Configure shortcuts for common actions - Increase productivity with quick commands 🔒 Security Analysis - Quick overview of your app's security status - Identify potential vulnerabilities - Get actionable security recommendations ⭐️⭐️⭐️Why Choose Framify?⭐️⭐️⭐️ - Immediate Benefits Save countless hours by avoiding building from scratch Access optimized workflows designed for maximum efficiency Join a thriving community of creators and developers Benefit from regular updates and new features Boost productivity with smart automations Focus on refining and launching your projects faster - Time-Saving Features Ready-to-use components that fit seamlessly into your projects Optimized workflows crafted to simplify processes Intuitive design focused on user experience Significant reduction in development time through automations Community & Updates Share your creations with the Framify community Learn from others and get inspired Contribute to a growing library of components Regular updates ensuring access to the latest design and functionality trends In the fast-paced world of web development, Framify is your trusted companion for creating stunning, functional websites without the hassle. Start transforming your workflow today - Install Framify from the Chrome Store!