Parabeac-Core
Parabeac-Core is an open-source repository that converts design files into Flutter code.
How it works
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
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.
Visual Generation Service
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
.
Layout Generation Service
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.
Alignment Generation Service
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.
Get Started
Parabeac currently supports conversions from Sketch but is designed to support more platforms in the future.
Dependencies
- Dart
- Flutter
- Docker (We're working on removing this)
To test out a Sketch file feel free to download this Sketch file!
Running the conversion
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
- Make sure you have docker running
- Within your terminal navigate to the sketch-to-svg folder within the Parabeac Core root directory. From here run
docker build -t sketch .
- Within the same sketch-to-svg directory run
docker run -p 5555:8081 -d sketch
- If you have any plugins make sure to put the plugins in the plugin folder
- In your terminal move to the root PBCore directory and run:
$dart parabeac.dart -p <Absolute Path To Design File> -n <ProjectName>
โ ๏ธ Note: Steps 3 and 4 create a docker container in the background, we know this is not ideal and are working to remove this currently. To remove the docker instance rundocker ps
to identify the container Id and thendocker kill <containerId>
to remove it. Please see the Docker docs for more details.
Running the exported code
Requirement(s)
- Download Flutter
- Traverse to main.dart
- Call the screen you want to view
- Execute
flutter run
How to contribute
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.
How to create & run Parabeac eggs
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.
Upcoming & Known Issues
- Plugin Duplication in the Plugin Service
- Remove Docker Dependency
- Support for Figma
- Egg Marketplace