Getting Started with deeepSpace: A Friendly Guide to Making Your Design System Shine

Nicolas El Mir

— 3 min read
Getting Started with deeepSpace: A Friendly Guide to Making Your Design System Shine

Hey there, and welcome to deeepSpace! 🎉 Whether you're a designer, developer, or someone wearing multiple hats, you're in the right place. If you're tired of the chaos that comes with building scalable products—or if you've just had it with all the messy hand-offs—deeepSpace is here to change the game.

Let me walk you through how to get started with deeepSpace. It’s super simple, and trust me, once you’re set up, you’ll never want to go back.

What is deeepSpace, Anyway?

So, here’s the deal: deeepSpace is a design-to-code platform built specifically for design systems. We're not here to generate endless pages of code (because let’s be honest, that always ends up needing tons of dev fixes). Instead, we focus on making sure your design system is solid, scalable, and ready for action with developer-friendly code that actually works out of the box.

Here’s how it works:

  • The Figma Plugin: Push your design system components directly into deeepSpace.
  • The CLI Tool: Pull the generated code into your project (and yep, it’s neatly organized).
  • The Web Interface: Keep track of your projects, manage your workspaces, and collaborate like a pro.

Why Should You Care?

Good question. Here’s why deeepSpace is awesome (and why you’ll probably love it):

  1. Focus on Scalability: We’re laser-focused on design systems, so your components stay reusable and future-proof.
  2. Less Dev Work Later: The code we generate is clean, structured, and ready to go. No messy clean-up required.
  3. It’s Fast: From design to code, the process is streamlined so you can ship faster and focus on the fun stuff.

Step 1: Let’s Start with the Figma Plugin

Figma is where the magic begins! Here’s what you need to do:

  1. Install the Plugin:

    • Open Figma, head to the Community tab, and search for “deeepSpace.”
    • Hit Install (that’s it—easy, right?).

  2. Log In:

    • Launch the plugin from your design file.
    • Sign in with your deeepSpace account. Don’t have one yet? Sign up here.

  3. Push Your Components:

    • Select the components in your design system (think buttons, cards, modals—whatever you’ve got).
    • Click the “Push to deeepSpace” button, and boom, they’re uploaded.

Step 2: Pull Your Code with deeepCLI

Now that your components are in deeepSpace, let’s get them into your project.

  1. Install deeepCLI:
    Open your terminal and run:

    npm install -g deeepcli

  2. Log In:
    Authenticate your account with:

    deeep login

  3. Pull Your Code:
    In your project folder, run:

    deeep pull

    This pulls all your components into a nice, clean folder structure.

  4. Integrate and Build:
    Start using those components in your app! You’ll notice the code is structured to make your life easier, so you can focus on building instead of debugging.

Step 3: Manage Everything in the Web Interface

The web interface is where you can keep everything organized. It’s like your command center for all things deeepSpace.

  1. Log In:
    Head over to deeep.space and sign in.

  2. Set Up Workspaces:

    • Create workspaces for your projects or teams.
    • Invite teammates and assign roles (you’re the boss now).

  3. Track Your Components:
    View all your design system components in one place. Need to update something? Easy.

  4. Collaborate Like a Pro:
    Designers, developers, and stakeholders can all stay in sync. No more miscommunication or “What happened to that button?” moments.

Pro Tips for Using deeepSpace

  • Keep It Modular: Design your components to be reusable. Future-you will thank you.

  • Test Your System: Before you push to deeepSpace, double-check your components in Figma.

  • Get the Team Involved: The earlier everyone is on the same page, the smoother things will go.

Ready to Dive In?

And that’s it! Getting started with deeepSpace is as easy as 1-2-3. In no time, you’ll have a scalable design system that’s ready for whatever your team throws at it. Plus, the time you’ll save? Priceless.

Still have questions? Hit us up anytime—we’re here to help. Happy building! 🚀

Got feedback? We’d love to hear it! Let us know how your deeepSpace journey is going and what we can do to make it even better.

Read more