Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • How to import a Figma file
  • How the import works
  • Known limitations
  • Tips for setting up your Figma file
  • Troubleshooting

Was this helpful?

  1. User manual
  2. Design

Importing from Figma

This feature will import your Figma design into your Bubble app. Due to the differences in the two platforms, the import will not be at 100% fidelity, but can give you a head start on the app design process.

How to import a Figma file

  • Go to Settings > General and scroll down to the Design Import section

  • You can find your Figma API key by going to your Figma account settings

    • On your Figma dashboard page, click your name in the upper left, and then Create a new personal access token if you don’t have one already - this is your API key

  • You can find the Figma File ID by looking at the URL when you have the file open in Figma

    • The URL should have the format figma.com/file/{random letters and characters}, or figma.com/file/{random letters and characters}/[slightly more readable name]; the file ID is the {random letters and characters}

  • Clicking “Import” will begin the import, which can take a few minutes for large Figma files

How the import works

  • Every top-level frame in every page of your Figma file will be imported as a new page in your Bubble app

  • Invisible items in Figma (made invisible in the layers sidebar) will not be imported

  • Bubble tries to import as much from Figma as possible, mapping Figma elements to the closest kind of Bubble element

  • Bubble will create groups out of elements that are grouped in Figma

  • Names of elements in Figma will carry over to Bubble as well (note that there is a character limit on imported names and Bubble will avoid duplicate names)

  • Bubble tries to create Styles to match styling from Figma, but in more complex situations (e.g. multiple styles in one piece of text), Bubble may make assumptions about the style to apply or use rich text markup (bbcode) for text

  • Any kind of vector in Figma will be imported as an image in the app

    • Any group in Figma that contains only vectors is imported as a whole image (having sub-groups, even if they only have vectors themselves, will not trigger this rule)

  • Images will source the image uploaded to Figma’s servers, i.e. images will not be automatically uploaded to your Bubble app

  • Bubble will not make any assumptions about what’s a repeating group

  • If a shape or frame has invisible fill, it carries as transparent fills

Tip: During the import, Bubble will treat every image as a separate image, even if two images are technically copies of one another. Also, in the event the Figma file has a large image (e.g. an SVG containing large embedded PNGs), Bubble will still faithfully try to import those (very large) images!

Known limitations

  • This is a one-way, one-time import and we do not maintain a link between a Bubble page and the Figma frame; if you trigger the import again, it will simply create a new Bubble page for each top-level Figma frame again

  • If you experience a “Network error” upon trying to import:

    • First, check your ad-blocking / anti-tracking software, as that can sometimes block our call to Figma’s API

    • Please try again a little bit later; if you consistently experience this, please file it as a bug

  • Because Figma allows tighter constraints around text boxes, Bubble will add to the height and width of text elements to get it closer to the Figma design

  • Any styling that’s possible in Figma but not currently possible in Bubble will not be imported - though workarounds usually exist for implementing complex styling; these include:

    • No bottom vertical alignment for text

    • Can only have one shadow per element

    • Can do a max of 3 colors for gradients

    • Does not support multiple fills at the same time — Bubble only takes the first fill in an object

    • 0px rounded borders are overridden

  • There are some other styling properties that we do not carry over yet, but which might come in a future release; examples include:

    • Having different border styling on different sides of an element

    • Elements that go off the frame towards the top or left

Note also that if you try importing a significantly large and complex Figma file, the import may timeout (this also depends on your computer's resources). If you're bumping into this limitation, try breaking up your Figma file into smaller files and importing those individually instead.

Tips for setting up your Figma file

  • Since this feature imports every frame in your Figma file, if you have a very large Figma file with many variants of a given page, you may want to copy a subset of frames to a new file to use in your import

  • Remember that every top-level frame gets imported as a new page, and that the import is a one-time import. You may want to consider designing a Bubble page in chunks in Figma, and doing periodic imports to bring in new chunks into Bubble

  • Great way to make mobile pages and add them directly to your application.

  • Experiment with importing components from your Figma file all bundled into a frame so that you can easily copy / paste them while building your Bubble application

  • You can outline elements as strokes with no issue; these will transfer over normally.

  • If you want to import masked elements, create a group (not a frame) with the masked elements only. We look at a group to see if any of the elements in the group are masked - if a masked element is found, the whole group is imported as an image.

  • If you’re experiencing trouble importing an image: Make sure you’re using the image object and not an image fill on a frame. Currently, we only support image objects (i.e. when you click “place an image” on Figma) and you can mask it with other objects as needed.

  • If you’re experiencing problems with importing background fills: when frames are imported as pages, we don’t currently support fills for those pages. If the fill isn’t showing up for objects, inner frames, etc. please check and make sure there aren’t multiple fills. Bubble only supports a single fill for any element so we only choose one.

Troubleshooting

  • If you're encountering a "Network Error" or if Bubble does not consider your API Key and File ID to be valid, first try regenerating a new API Key in your Figma account...

  • ...if that also does not work, try turning off any ad / tracking blockers you may have active.

Last updated 1 year ago

Was this helpful?