Skip to content

A tool for quickly converting Adobe Illustrator shapes into SwiftUI code.

License

Notifications You must be signed in to change notification settings

downtownjakebrown/SwiftyIllustrator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SwiftyIllustrator

A tool for quickly converting Adobe Illustrator shapes into SwiftUI code.

Description

This tool utilizes the built-in scripting of Adobe Illustrator ("AI") to convert shapes drawn with AI into swift code. The included javascript iterates over each point of an AI shape and converts the shape into a series of CGPaths that are wrapped in a SwiftUI view for easy implementation into your XCode project.

Installation

Just grab a copy of this repo.

Usage Outline

  1. Create a custom shape or shapes in the included AI file
  2. Center the custom shape(s) on the artboard
  3. Select the custom shape(s) to be converted to swift code
  4. Run the included javascript using Illustrator's built in scripting (for more info, see Adobe's guide)
  5. Save the script's output text as a .swift file
  6. Import the .swift file into your XCode project
  7. Implement the generated SwiftUI view as you please

Detailed Usage Example

In this example, we'll be converting the SwiftyIllustrator icon (drawn using AI) into a SwiftUI view.

Description Examples Images
To begin, open the included AI file, which has the SwiftyIllustrator icon already drawn on the lone artboard
Select all of the logo elements (e.g., using the Group Selection Tool)
Navigate to AI's built in scripting dialog via File -> Scripts -> Other Script...
Select the included javascript file and run it
Choose a name and destination for the script's output (e.g., "ShapeView.swift")
If successful, you should see the provided alert
Then, add the new .swift file to your XCode project
Open XCode's canvas to preview the new SwiftUI view. You should see a wireframe of the SwiftyIllustrator icon
In the new .swift file, you'll notice a single SwiftUI view comprising the 7 elements of the SwiftyIllustrator icon
Here, in the SwiftUI View, you can change the appearance of the individual shape elements (e.g., adding fills, strokes etc.) as you please, as well as adding animations to the individual elements, to create compelling, dynamic content in pure Swift code!

Caveats

  • To simplify the AI javascript, it is assumed that your artboard and your custom shapes are centered about (x:0, y:0) in AI's coordinate space. You can use your own AI file to run the script, but please take this into consideration. Otherwise, the shapes of your generated SwiftUI view may not be positioned as you'd expect.

Other Info

This project was tested using:

  • Illustrator 24.2
  • XCode 12.2

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

SwiftyIllustrator is available under the MIT license. See the LICENSE file for more info.