Docs
BlupLearnSupportDownload
  • Home 🏠
  • Wiki
    • Design (UI) ✏️
      • Blup Top Bar
      • Blup Menu Bar
      • Pages/Layers Panel
      • Toolkit
      • Insert Panel
        • TextField Widget
        • Progress Widget
        • FAB Widget
        • Icon Widget
        • Lottie Animation Widget
        • Text Button Widget
        • Appbar Widget
        • Checkbox Widget
        • Switch Widget
        • Slider Widget
        • Radio Widget
        • Progress bar Widget
        • Multi choice dialog Widget
        • Web View Widget
        • Camera View Widget
        • Map View Widget
        • Date Picker Widget
        • Time Picker Widget
        • IOS Date Picker Widget
        • IOS Timer Widget
        • Alert Dialog box Widget
        • Dropdown Menu Widget
      • Properties Panel
        • Pages Properties
        • Text Properties
        • List Properties
        • Rectangle Properties
      • Page Canvas
      • Choose from Assets
      • Right-Click Menu in Design
      • How to use navigate page in Blup
    • Logics ⚡
      • UI Nodes
        • Rectangle UI Node
        • Text UI Node
        • Group UI Node
        • List UI Node
        • Page ListView UI Node
      • Helper Nodes
        • Boolean Nodes
        • Date Time Nodes
        • Double Nodes
        • Duration Nodes
        • Integers Nodes
        • Json Nodes
        • List Nodes
        • Map Nodes
        • String Nodes
      • Variables Node Section
      • Function Node Section
      • Maths Node Section
      • Flow Control Section
      • Relational Operators Section
      • Logical Operators Section
      • System Node Section
      • SDK Library Section
      • Blup Sheet API Node Section
    • Backend 🔗
      • Sheets
      • SQL
    • Blup Code Editor
      • File Explorer
      • Editor Area
    • Publish to stores 🚀(Ship)
      • iOS Cloud Build 😮‍💨
        • Configure ⚙️
        • Run ▶️
      • Play Store
    • Build Your First App
      • TODO App
  • Blup Settings
  • Import from Figma
  • How to use WebView in Blup
  • How to use Google Maps in Blup
  • How to use the camera in blup?
  • How to add Splash screen in Blup?
  • How to know Debug prints in blup
  • How to use Google sign in in Blup
  • Creating sign up/ sign in in Blup
Powered by GitBook
On this page
  • Step 1: Copy the File ID from the URL
  • Step 2: Paste the File ID
  • Step 3: Create a Token from Figma
  • Step 4 Paste the copied token
  • Step 5: Wait & let the magic happen!

Was this helpful?

Edit on GitHub

Import from Figma

Import your figma files directly in Blup.

PreviousBlup SettingsNextHow to use WebView in Blup

Last updated 10 months ago

Was this helpful?

There are some steps to bring your Figma file inside Blup.

Import your Figma files directly into Blup with ease! Follow these simple steps to get your designs into Blup in no time. 🚀

Step 1: Copy the File ID from the URL

Open your Figma file in a browser. Look at the URL and find the text after '.../file/' and before the next '/...'. This is your File ID. Copy it! 📋

Example: If your URL is https://www.figma.com/file/abc12345/your-design-file, you need to copy abc12345.

Step 2: Paste the File ID

Go to Blup and open the "Import from Figma" dialog box. Paste the File ID you copied in the designated field. It's that easy! 🖱️

Step 3: Create a Token from Figma

Now, you need a token to allow Blup to access your Figma file. In Figma, go to your account settings and generate a personal access token. This token is essential for the import process. 🔑

Step 4 Paste the copied token

Go back to Blup. In the "Import from Figma" dialog box, paste the token you just created. This will authenticate your import request. ✅

Step 5: Wait & let the magic happen!

Click the "Import Design" button in Blup. Select the frames you want to import from your Figma file. Click on "Import" and watch the magic happen! ✨

  1. Click on Import design's Button

  2. Select the frames you want to import and click on Import

  3. And the magic happens.

You’ll see your Figma designs appear in Blup, ready for you to continue working on. 🎨

Copy File FiD
Paste the file-id
Create token from figma
paste the copied token
import design
copy file id from figma file url
paste file-id
create token from figma
paste the copied token