Understanding the code export

For Developers

This guide is for developers looking to understand the conversion from a design file. We will walk through the conversion from the getting started guide for designers which will look like the image below. This guide assumes the developer reading has basic knowledge of Flutter & the Flutter material library. Before getting started, be sure to run flutter pub get in your project directory.

1. Directories

Sketch Designers create pages (Layers in the image) in Sketch to organize their design files. You’ll notice in the current project that there are 2 pages, Home & Symbols. In your conversion, you should see the following two folders in the conversion as well.

Each page will hold several dart files that will be of 3 possible types.

  • Screen: This is created when the designer creates an artboard as this is typically a screen.

  • Shared: This is created when the designer creates symbols in the Sketch Page. For designers, Symbols are their ‘Reusable elements’.

  • Misc: These will be random items that we could not determine as a screen or symbol.

For the example above, we should see 2 folders under /screens which will be /screens/home & /screens/symbols.

2. Artboard = Scaffold

Each Artboard in a Sketch Page will be interpreted as it’s own dedicated screen. For the example, we should only see one screen: /screens/home/iphone_11.dart. Parabeac generated a Stateful Widget with the UI provided in the build method. Our relative sizing will be based on the size of the artboard the designer used. The naming here is obviously horrible, you can either rename the class and file to your choosing, or you can ask your designer to change the name & reconvert.

3. Direct App Bar Implementation

Designers can use Parabeac Plugins to have intelligent implementations. When looking at the generated Scaffold, you will see an AppBar implementation rather than the implementation being inside the body. This is due to the designer conforming to a plugin that allows them to describe an app bar & its properties such as leading.

4. Shared Items & Imports

You’ll notice for the blue cell careerCell() that it is described by a function call. Likely, there are errors because Parabeac doesn’t support intelligent imports yet but it is coming soon. For now, use your IDE to import the shared widgets & the Flutter material library.

Designers use something called Symbols to create reusable UI elements in Sketch. We take this implementation so that the developer will have reusable code representing those Symbols. As you can imagine, this dramatically reduces the size of the codebase.