Parabeac-Core is an open-source repository that converts design files into Flutter code.
Parabeac-Core is an open-source repository that converts design files into Flutter code. The biggest challenge in code conversion is achieving quality code, but in a tool like this, there’s so much variability in what quality code should look like. So Parabeac-Core is built in a way not to promise quality code, but to be driven by the community so that you can configure & tweak to you or your teams liking. See our Manifesto. We welcome contributors to improve Parabeac-Core, create Parabeac Eggs, & to join our Discord community!
If you have any trouble with getting Parabeac-Core running, check out this video!
Development on Windows is possible, too. However, this requires some setup.
Parabeac-Core now supports both Figma and Sketch! We have plans to expand in the future as Parabeac-Core is built to support more platforms by design.
Need a file to test with? Feel free to download one of our sample design files below (Make sure to duplicate the Design to your account if you're using Figma):
Because parabeac-core contains the Sketch-Asset-Converter submodule, it is easier to clone the repo using the following command:
git clone --recurse-submodules https://github.com/Parabeac/Parabeac-Core.git
If you have already cloned the repo without the submodule, simply run the following command which will add Sketch-Asset-Converter:
git submodule update --init
In order to pull new changes from the repository, run the following command to also update the submodule:
git pull --recurse-submodules
For more information about git submodules, click here.
We currently support both Sketch and Figma. See below for running the conversion for both Sketch and Figma.
Follow these steps in order to run Parabeac Core on your local environment:
- Clone PBCore repo in order to get the code on your machine
- If you have any plugins make sure to put the plugins in the plugin folder
- In your terminal change directory to the root PBCore directory and run:
$ pub get
$ dart parabeac.dart -p <Absolute Path To Design File> -n <ProjectName> - Clone PBCore repo in order to get the code on your machine
- If you have any plugins make sure to put the plugins in the plugin folder
- In your terminal change directory to the root PBCore directory and run:
$ pub get
$ dart parabeac.dart -f <Figma File ID> -k <Figma API Key> -o <Absolute Path To Output Directory> If you're wondering about where to find your Figma File ID or Figma API Key Please Read Below:
Since Figma operates from a cloud native approach we use the Figma File ID and a Figma User API Key in order to pull down your figma designs and run the conversion. Your Figma File ID is a unique ID used to identify your specific Figma File amoungst all other Figma Design Files. Your Figma API Key is a custom key assigned to your figma account that you generate in order to give Parabeac Core the ability to pull down your Figma File. In order to find your Figma File ID do the following:
- Go to your Figma Homepage at www.Figma.com
- Select your Design File
- Within your design File's URL is your Figma File ID. Simply take the value after Figma.com/file/. So in the URL
https://www.figma.com/file/zXXWPWb5wJXd0ImGUjEU1X/parabeac_demo_alt?node-id=0%3A156the Figma File ID iszXXWPWb5wJXd0ImGUjEU1X
In order to create a Figma API Token do the following:
- Go to your Figma Homepage at www.Figma.com
- Navigate to your user Profile
- Scroll Down to the "Create a new Personal Access Token"
- Create a new Personal Access Token with the name Parabeac, you should then be prompted with your new API Key. Make sure to copy this as you wont be able to access it again after you click confirm. (It should look something like this:
64522-a0e5509a-d5ce-47a8-880b-c295f9cb27ed
Coming Soon... See here!
Parabeac-core keeps track of how many times it is run. Although we do not collect any personal information, you can turn off metrics at any time by creating the environment variable PB_METRICS = "false".
- Flutter
- Dart
- Make sure you have flutter installed correctly. (You can run
flutter doctorwithin your terminal to easily check) - Move to the Flutter Projects Root Directory
If your Project utilizes Sketch Prototyping Skip to Step 5
- Within Main.dart import the main screen that you want the app to launch with from the screens folder
- Next change the home property of the MaterialApp that is being returned in the Build Method to the name of the Screen imported in Step 3
- Save Main.dart and Execute
flutter runin your terminal
Parabeac eggs are essentially plugins that change the way a set of design elements are interpreted. A very simple example of this are 2 eggs that we created called NavBar & TabBar. Eggs are loaded into the project before the runtime of Parabeac-Core because unfortunately dart doesn't support dynamic module loading.
You can also create your own eggs! By using our Parabeac Egg Template you can quickly define your own semantics and corresponding code generation which allows for the most flexible and robust export customization possible. You can also upload your eggs to our git-based marketplace for templates to help support the community going forward.
To add a Parabeac egg, download the egg and add it to the parabeac-core/plugins folder. When you run Parabeac-Core it will automatically grab & import the egg into the project.
Parabeac-Core is essentially broken up into 3 pieces which you can see in the list or animation below. While most of the magic is in the interpretation engine, you can view more animations & information here.
- Convert design file into Parabeac design protocol
- Interpretation Engine
Made up of the Visual, Layout, & Alignment generation services.
- Generate Flutter code
Parabeac Design Protocol is our way of helping define UI/UX elements within Design Files for cleaner and more succinct code conversion. By adding naming-semantics to elements, symbols, and layer names to the design file, Parabeac-Core is able to identify specific UI elements & override interpretation & generation with a specific implementation.
These are mostly built by a one to one relationship from the Parabeac Design Language into Parabeac Intermediate Nodes. For example, a rectangle in the design language will simply convert to an InheritedContainer.
This service is a bit more interesting, as we break down each group of nodes to be laid out by the layout service. The service takes the first 2 nodes compares them & generates a layout, we grab the next node, compare it to the layout & then the leaves if needed to and continuously traverse the rest of the layer into the laid out tree that we construct.
In Flutter, there are only a couple ways to achieve alignment. We recognized the following as the most common:
- Flex-based layouts
- Padding/margin
- Positioning (Stacks)
- Alignment (Container/Single Child/Visual Node)
Depending on the type of layout to add alignment to we have various services to take the nodes in and apply the alignment information needed.
Welcome! The best way to contribute to Parabeac is through pull requests, filing issues on Github, writing documentation & helping others in our Discord community. We are an early project, but like many other projects, helping with bugs that others have filed on Stack Overflow is extremely helpful. We recommend filing bugs & feature requests on the Github issue tracker. For more details make sure to check out our wiki.
- Plugin Duplication in the Plugin Service
- Egg Marketplace