This is an experiment to automate basic aspects of the design workflow within the context of a software development project.
Things change. In software development things change a lot, particularly if your design and development teams are working closely together, may that be in a sprint cycle or regular production maintenance.
Design tools today, while not perfect, are reaching a more mature state. Sketch has a vast plugin ecosystem somewhat due to the fact that it can export artifacts in ways that are machine readable.
If a machine can read and parse these artifacts, then the process of those being a part of an automated build becomes trivial.
In order to achieve this we leverage brand.ai coupled with their sketch plugin.
- Automates a design library
- Can edit (read/write) design library in browser
- Can edit (read/write) design library in Sketch via plugin
- Can use (drag/drop) any artifact from the design library directly in Sketch via plugin
- Can integrate with Slack for automated messaging
- Can export assets in a variety of formats, including CSS, SCSS, LESS, JSON, Android, iOS
- Color palette
- Logos & Images
- Icons
- Sizing
- Shadows & Radius
- Typography
Node v8.6.0
Angular CLI v1.4.3
- npm install
This project heavily utilizes npm scripts, please refer to package.json
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.