At Crowdbotics, we’re building a platform that eliminates common sticking points in the software development lifecycle to make development faster, easier, and more accessible to non-technical users. This year, we've decided to tackle one of the biggest sticking points there is: the design-to-development disconnect.
To put it simply, most designers don’t develop apps, and most developers don’t design them. These two teams use different tools, follow different workflows, and report to different managers. To turn design specs into a functioning UI, a designer needs to hand visual design files to a developer and provide constant guidance as the developer converts those designs into code.
This back-and-forth, known as the design-to-development handoff, creates friction before development even begins and can cause repeated delays downstream whenever design changes are implemented.
Today, we’re introducing a Figma integration in the Crowdbotics platform that we believe will make design-to-development friction a thing of the past.
By simply pasting your Figma share link into Crowdbotics, you’ll instantly convert your design files into real, cross-platform React Native code running in a live emulator. Developers can directly modify these screens inside an accompanying code editor and save their changes to a linked GitHub repository with a single click.
In other words, no more tedious documentation, handoff meetings, or miscommunications — just paste a link to turn your product specs into development-ready code.
There are two ways to import your Figma designs into Crowdbotics.
From the Create App wizard, select “Import From Design”. You’ll be prompted to provide your Figma design URL, which will populate the list of pages available in your Figma file. Select a page name from the dropdown, then click Import.
When the app is created, a module will be created for each frame in the indicated page. Note that this process may take a few minutes.
From the Storyboard Tool, click Modules in the right-hand menu. Under the arrow to the right of "Create a Module", you can choose to import your designs.
You will then see the below screen.
From here you will need to copy-paste the URL for your Figma design. This will populate the list of pages available in the file. You can then select a page from the dropdown options. From the final dropdown (titled "Frame Name"), select which frame name you’d like to import as a single module or select “All" for all of your frames.
Finally, press Import. Importing a single frame usually takes less than a minute.
You can also view and modify the code for each module in the Code Editor. Note that in order to use the code editor, you must first link your Crowdbotics account to GitHub and accept the GitHub invitation to your new app that was sent to your email address.
Screen code is generated in React Native, an open source framework used to build iOS and Android apps simultaneously.
Take a look at the video below for a step-by-step breakdown:
Converting visual design files into real code is a longstanding technical challenge that has historically produced subpar results. Existing design-to-code tools are usually standalone offerings, meaning that you have to take the files they generate, customize them in a code editor, and integrate them with an existing codebase on your own.
With Crowdbotics, you get high-fidelity imports directly from a leading design platform with a code editor conveniently located right next to your imported screen. Moreover, your newly converted screen now sits inside Crowdbotics, where you can visually build associated data models, deploy with a single click, and enjoy built-in security and maintenance right out of the box.
We expect this feature to enable product teams to deliver new features and frontend assets more quickly with fewer rounds of design iteration.
Figma is a powerful freemium tool that enables design teams to collaborate in the cloud in real time. We’re huge fans of its ease-of-use, broad platform support, and, of course, its open API.
We have other design integrations planned for the near future, so keep an eye out for more design-to-development announcements soon.
Like any new feature, our Figma import still has a few kinks that need to be worked out. Specifically, you might run into the following issues:
We’re working hard to eliminate these issues and gather as much user feedback as possible. If you find that you’ve run into an issue that isn’t cited above, or you just want to tell us about your experience using the tool, we encourage you to submit feedback via this form.
The Crowdbotics platform also offers the ability to hire expert PMs and developers to manage your custom app build from design to deployment. If you’re looking to hand off your entire from-scratch app build to vetted development experts with deep experience in healthcare, finance, tech, and more, get in touch with us today.
Crowdbotics
Originally published:
January 29, 2021
