A tool for quickly converting Adobe Illustrator shapes into SwiftUI code.
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.
Just grab a copy of this repo.
- Create a custom shape or shapes in the included AI file
- Center the custom shape(s) on the artboard
- Select the custom shape(s) to be converted to swift code
- Run the included javascript using Illustrator's built in scripting (for more info, see Adobe's guide)
- Save the script's output text as a .swift file
- Import the .swift file into your XCode project
- Implement the generated SwiftUI view as you please
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! |  |
- 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.
This project was tested using:
- Illustrator 24.2
- XCode 12.2
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
SwiftyIllustrator is available under the MIT license. See the LICENSE file for more info.