Collaborative UI Designing Tool with Sketch Import, React Code Export

This article talks about a free online collaborative UI designing tool with Sketch import and React code export. A UI designing tool should be simple and yet powerful to let the designers easily experiment with their designs. There are lots of prototyping and UI designing tools but most of those only create a static layout which is not an ideal choice when you have to show your design on various screen sizes.

Airbeam is an online collaborative UI designing tool that helps you create dynamic layouts for web and mobile UI that can easily adapt to any screen size. This tool integrates the designing and building process into one. You can either create a design from scratch or import layout from Sketch and customize it accordingly. In either case, it automatically generates React, Vue, NextJS, and React-Native code for the design and also lets you export design project to Codesandbox and Expo. The free plan allows you to host 1 project where you can add up to 3 people for collaboration.

Also read: Add React debugging to Chrome Dev Tools to Inspect React Components

Collaborative UI Designing Tool with Sketch Import, React Code Export

Airbeam is a web-based UI designing tool that you can access anywhere with a desktop-class web browser. To use the Airbeam, you can either create a free account using your email address or directly sign up with your Google or GitHub account.

Create Dynamic Layouts

When you sign in to the tool, it shows you a list of templates that you can use. Alternatively, you can start a new project and start designing from scratch. If you use Sketch, you can import your Sketch designs to Airbeam. When you do that, this tool automatically converts Sketch symbols to coded components and you can customize and reuse them.

• Info: Add a name and other info of the design.
• Properties: To customize the type, style, position, dimensions, margin, padding, text, background, border, and corner radius.
• Trigger: To set up triggers (click, hover, mouse, enter, mouse leave, or none) and define an action (navigate screen, open URL, back, or none).
• Code: Shows CSS, JSS, React Inline Style, and React Native code for the selected module.

Preview Design

While creating the design, you can preview it anytime for various screen types. Simply click the “Preview” option from the top and it opens the design in a new tab where you can preview for desktop, mobile, and tablet. You can also share this preview with others using the preview link.

Get Design Code

One of the main highlights of this tool is that it generates the code for the design. The “Show Code” button from the top opens a tab on the screen where you can get find the following types of code for your design:

• React (CSS Modules & ReactJSS)
• React-Native
• NextJS
• Vue

Unlike any other tool, Airbeam has a “Code Style Option” that allows you to specify the custom syntax for the code. With this option, you can set the print width, tab width, trailing comma, bracket spacing, use of semicolumn, and other options. This gives you the code in a custom layout that will suit your needs.

Apart from that, you can export the design project to the following platforms:

• CodeSandbox
• Expo

Create dynamic designs with Airbeam here.

Wrap Up

Generally, designers create disposable designs which are then replicated with the code for UIs. Airbeam is a comprehensive tool that integrates designing and coding parts into one. It allows you to create dynamic designs that can automatically adapt to the screen. It saves you a lot of time by automatically generating the code for the design. I really like the option to define the code syntax. This gives users the flexibility to get the design code in a specific syntax that fulfills their needs. Airbeam is still in its early stage with more features and export to NPM and Git on the way.