Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sureskumar/sketch-isometric?ref=fordesignrs

Generate Isometric and 3D Rotation views from Artboards and Rectangles in Sketch app.
https://github.com/sureskumar/sketch-isometric?ref=fordesignrs

Last synced: 28 days ago
JSON representation

Generate Isometric and 3D Rotation views from Artboards and Rectangles in Sketch app.

Host: GitHub
URL: https://github.com/sureskumar/sketch-isometric?ref=fordesignrs
Owner: sureskumar
Created: 2018-01-26T05:59:27.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2024-05-03T14:27:55.000Z (7 months ago)
Last Synced: 2024-11-11T17:45:39.769Z (about 1 month ago)
Language: JavaScript
Homepage:
Size: 11.6 MB
Stars: 1,645
Watchers: 33
Forks: 64
Open Issues: 9
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

sketch-goodies - Sketch Isometric Plugin - Generate Isometric and 3D Rotation views from Artboards and Rectangles in Sketch app. (Uncategorized / Uncategorized)

README

        # Sketch Isometric Plugin v4.2 `Ctrl + shift + I`

Generate Isometric and 3D Rotation views from Artboards and Rectangles in Sketch app.

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_08.jpg)

## Video Tutorial from Skillthrive

[![Single Isometric Video Tutorial](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_video_tutorial.jpg)](https://www.youtube.com/watch?v=8kAlHz9t_5Y)

## Steps

1. Select source Artboard / Rectangle

2. Hit `Ctrl + shift + I` or Run plugin from 'Plugins > Sketch Isomeric > Generate Isometric View'

3. Select Rotate direction, adjust 'Depth' and 'Scale' as per your requirements and hit 'Done'

4. Use [Magic Mirror](https://magicsketch.io/mirror/) (free version) or [Angle Plugin](https://designcode.io/angle) (free) to map the contents of your artboard to the generated isometric shape.

## This plugin DOES NOT

- Map artboard contents to the generated isometric shapes. See step 4 above for details.

- Support rounded corners. If anyone knows how to do this, please reach out to me.

## More examples ...

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_01.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_02.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_05.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_06.jpg)

## Can we have some GIFs please ...

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_2.gif)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_1.gif)

## Features

### Rotation direction

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_7.gif)

### Depth

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_3.gif)

### Scale

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_4.gif)

### Color

Colors of the sides can be changed manually after quiting the plugin. Just select the appropriate shape and update fill with your desired color.

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_5.gif)

### Map Top Surface

[Magic Mirror](https://magicsketch.io/mirror/) plugin can be used to map the desired artboard on top of the Isometric view.

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_demo_6.gif)

## Installation

#### Recommended

* Install via Sketch Runner or [Sketchpacks](https://sketchpacks.com/sureskumar/sketch-isometric/install) by searching for Sketch Isometric.

#### Old-Fashioned

Make sure you have the latest version of Sketch installed. **(Sketch 40+)**

1. [Download the ZIP file of this repository](https://github.com/sureskumar/sketch-isometric/releases/download/v4.2/Sketch-Isometric.sketchplugin.zip)

2. Double click on `Sketch-Isometric.sketchplugin`

## You can also do isometric illustrations like these ...

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_04.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_12.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_11.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_03.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_13.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_10.jpg)

![Single Isometric example](https://github.com/sureskumar/sketch-isometric/raw/master/assets/sketch_isometric_sample_09.jpg)

## Contact me

Feel free to contact me for any suggestions or critique.

Email: [email protected]

[Portfolio](http://www.sureskumar.com)

## Thanks / Credits

Thanks to [Gokulan Vikash](https://github.com/gokul0) for collaborating and adding really cool features.

Illustrations inspired from Nitish Khagwal, Cognitive-scale and many others.

Thanks to Tim Wantland and Kyle Pedersen for inspiration and moral support :)