Getting Started

For Designers

This guide is for designers to organize their Sketch files & prepare them for conversion. We will cover an exercise to easily understand the basic concepts & create an app screen with a top navigation bar & bottom tab bar. You can always check out our documentation for more details or to learn about other aspects of Parabeac.

1. Creating your Sketch file

Designers like to organize their Sketch files in their own ways. Some pages that we often see are pages such as Screens, Symbols, & Design System. Right now, we don’t have a way to support a Design System, but that’s ok, keep your Sketch file just the way you have it, we’ll worry about that later. The more broken down you have your screens into different pages, the better & more organized the code will be for the developer.

Let’s get started by creating a Sketch file & creating 2 pages, Home & Symbols.

2. Creating a Screen

Parabeac detects artboards as screens, let’s go to Insert > Artboard to create a new artboard. Then select iPhone 11.

3. Structuring your UI

Take the below example. We’ll call the blue cell “Careers Cell“.

Sometimes our algorithms don’t play nice, to get the best out of Parabeac, you’ll want to organize your sketch elements. Notice how the image & “Careers” text is wrapped inside of a blue rectangle? To keep all three of these items neatly organized as a single unit, the best practice is to group them as shown on the right.

4. Creating Reusable Items

Sketch Symbols are a powerful way to reuse items and reduce the number of sketch elements that are created. Coincidentally, programmers write code in the same way & we support that! Let’s turn the “Careers Cell” into a Symbol. Right-click on the Careers Cell group & hit Create Symbol.

5. Interacting with Plugins

Parabeac currently has few plugins baked in which you can see here. For the exercise, we will build a Top Navigation Bar. In accordance with our documentation, we will create a group with a name extension of .*navbar. Inside of that group, we will create 4 optional items:

  • .*leading Will set the leading item, of the AppBar in Flutter, can be any type of Sketch Element.

  • .*middle Will set the middle item, of the AppBar in Flutter, can be any type of Sketch Element.

  • .*trailing Will set the trailing item, of the AppBar in Flutter, can be any type of Sketch Element.

  • .*background Will set the background color of the AppBar in Flutter, must be of type Rectangle.

6. Convert

At this stage, if you’re a developer great! If not, that’s ok. If you’d like you can grab your developer to demonstrate how Parabeac converts.

Log in to app.parabeac.com. If you’re on the Personal license, hit the Upload Sketch File Button & convert the project. If you’re on the team license, you’ll want to create a project first, then hit the Upload Sketch File Button. Check out the Flutter project & you will see your code working with the Top Navigation Bar plugin & how it seperates the Career Cell into a shared file to be reused across the application. You can learn more at our designer documentation here.