A suite of tools for creating & managing Adobe Illustrator based embeds. Heavily inspired by and built upon ai2html.
When The New York Times created ai2html in 2015, it revolutionized the way online graphics teams published their work on the web. For the first time, a graphic artist could export an Adobe Illustrator file to the internet as web-friendly HTML instead of as a flat image, preserving text for SEO and maintaining responsiveness across all devices.
POLITICO created Artisan to close that gap, taking the groundbreaking foundation laid by ai2html and updating it for the modern world with a few extra quality-of-life features. Where ai2html produces static HTML, Artisan exports Adobe Illustrator files as React components. By allowing any Adobe Illustrator file to be saved as a component, an illustration can be easily plugged into an existing React project or reused across multiple projects.
While Artisan's practical uses are clear, it was also created as an easy and useful first step for our graphic designers to enter the developer world by introducing them to concepts like command lines, GitHub, and web components.
Whether you're a news developer, a graphic designer or an editor: Artisan's suite of tools makes collaboration easier than ever without having to make sacrifices to your workflow.
How's It Work?
Unlike its predecessor, Artisan is more than an Adobe Script, featuring a fully fledged command line tool that can be used to create new interactive projects. What typically could be a messy handoff between a designer and a developer is now simple — the designer creates a graphic, spins up an interactive project to house it, and sends it to a developer for finishing touches.
Artisan's command line tool also handles file and project management. With simple commands like "art new", "art activate", "art archive", "art open", and "art pub," users can move a project from a basic template to a published page without ever having to find a single file on their computer. Because all the file-management is handled by Artisan, users can also plug into their company's existing GitHub architecture. This means with simple commands like "art save" and "art download", entire projects (Illustrator files and all) can be viewed on GitHub and shared between designers, developers, and editors.
Artisan In Action
As An Embed
This historical chart on the unemployment rate was easily plugged into [a story](Unemployment soars to 14.7 percent in April amid coronavirus fallout) on the unemployment rate and a deeper analysis on the future of the job market. The graphic designer built the chart completely in Adobe Illustrator, and then ran a single command to grab an embed code to use in any article page. You can see the embed's repo here.
As Part of a Story
A designer worked on a single scatterplot showing the results of a survey in Adobe Illustrator. Then, she used Artisan to save her work as a component, which was slotted in with other interactive components to make a custom page. The designer didn't have to think about the page, and the developer imported the scatterplot the same way they would import any other piece of code. You can see the story's repo here.
A scatterplot is created in Adobe Illustrator at various breakpoints (first from left). Artisan exports the file as JSX (second) which can be easily imported and used like any other component (third) and integrates seamlessly (fourth).
Usage: art <command> [options] Commands: art activate [project] Sets a project to be active art archive [project] Archives a project art code Opens the active project in Atom art conf Open the artisan conf file art deactivate Sets no project to be active art delete [type] [selection] Delete something art dir Open the artisan projects folder art download [repo] Downloads (or syncs) a project from GitHub art github Opens the active project's GitHub page. art install [illustrator] Installs ai2jsx on your computer art new [type] Creates something new art open [illustration] Open an illustration art pub [environment] Publish the embed live art save [message] Saves latest changes to GitHub art start Start a development server art unarchive [project] Unarchives a project art update [project] Updates Artisan to the latest version art which Find out what the active project is Options: --version Show version number [boolean] --verbose, -v Log info & errors to the console [boolean] [default: true] --skip-health Skip the health checks [boolean] [default: false] --howto Show help [boolean]
Artistan was custom-made for POLITICO and as such is very opinionated about project organization and publishing strategy. If you're not a member of POLITICO's team, these instructions may not make the most sense.
$ npm install -g @politico/interactive-bin
$ pib setup
You'll need the following things from your AWS, Google Service Account, and GitHub setup:
- AWS_ACCESS_KEY_ID: AWS Credential
- AWS_SECRET_ACCESS_KEY: AWS Credential
- DEFAULT AWS_BUCKET_NAME: Name of AWS S3 Bucket
- DEFAULT AWS_BASE_URL: Base URL for that Bucket (e.g. "http://bucket-name.s3.amazonaws.com/")
- STAGING AWS_BUCKET_NAME: Name of AWS S3 Bucket
- STAGING AWS_BASE_URL: Base URL for that Bucket
- PRODUCTION AWS_BUCKET_NAME: Name of AWS S3 Bucket
- PRODUCTION AWS_BASE_URL: Base URL for that Bucket
- GITHUB_TOKEN: Personal access token from GitHub
Not Necessary For Artisan
Install the CLI.
$ npm install -g @politico/artisan
Find your Adobe Illustrator file. Go to your Adobe Illustrator folder in Applications. You should see an app called
Adobe Illustrator inside of that.
ai2jsx script by running the
art install command and dragging the Adobe Illustrator app into the terminal. You'll probably need to
sudo the command to have write access to that folder. See GIF below. (Alternatively if you don't want to use
sudo you can change the permissions on your Adobe Illustrator Scripts folder to allow your user read/write access.)
$ sudo art install PATH_TO_YOUR_ILLUSTATOR_APP
If that doesn't work, you can always copy the contents of the
install directory of this repo into your
Scripts folder directly.