Giter Club home page Giter Club logo

sketch-isometric's Introduction

Sketch Isometric Plugin v4.2 Ctrl + shift + I

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

Single Isometric example

Video Tutorial from Skillthrive

Single Isometric Video Tutorial

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 (free version) or Angle Plugin (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 Single Isometric example Single Isometric example Single Isometric example

Can we have some GIFs please ...

Single Isometric example Single Isometric example

Features

Rotation direction

Single Isometric example

Depth

Single Isometric example

Scale

Single Isometric example

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

Map Top Surface

Magic Mirror plugin can be used to map the desired artboard on top of the Isometric view. Single Isometric example

Installation

Recommended

  • Install via Sketch Runner or Sketchpacks 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
  2. Double click on Sketch-Isometric.sketchplugin

You can also do isometric illustrations like these ...

Single Isometric example Single Isometric example Single Isometric example Single Isometric example Single Isometric example Single Isometric example Single Isometric example

Contact me

Feel free to contact me for any suggestions or critique.

Email: [email protected]

Portfolio

Thanks / Credits

Thanks to Gokulan Vikash 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 :)

sketch-isometric's People

Contributors

matej-marjanovic avatar sureskumar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sketch-isometric's Issues

not working on sketch 50

I'm using sketch version 50, would like to know if it works on v50. I try to generate the isometric but nothing happens.

Rotate vertically

Feature request: For V/AR illustrations, it'd be nice to rotate in other directions too. Bonus points for arbitrary isometric rotations.

Why are the gifs so FAST?

Could you make the gifs any faster because I can't see exactly how to use your plugin? Honestly the most unhelp how to use example I've never seen.

Support for corner radius

Hi @sureskumar first of all thanks a lot for making this plugin. I was just wondering is it possible to also maintain its border/radius that would make the isometric view awesome :)

Sketch 52

Cant seem to get isometric to work with Sketch 52, nothing happens when I try to create a block. The dialog opens but then nothing is generated.

Sketch Isometric no longer working?

Hi there,

I've been using your plugin and it's been working amazingly. However it suddenly seems to have stopped working?

I've used the plugin before in conjunction with the angle & magic mirror but seem to still be having the issue. I've also deactivated a whole host of my plugins to see if one could potentially be causing for the plugin to no longer work.

Sadly, this did not fix the problem. Please feel free to see the screenshots below.

Mac OS: MacOS Sierra 10.12.6
Sketch Version: 51.3

Thanks,

Ade

screen shot 2018-10-19 at 14 46 01

screen shot 2018-10-19 at 14 46 13

screen shot 2018-10-19 at 14 46 20

How can you edit an existing isometric conversion?

This is a very helpful plugin but I can't figure out how to change the attributes of an existing isometric shape generated. For example once converted an artboard with Depth = 20, I would like to be able to change that to 10 without having to regenerate the whole thing again. It seems it's not possible as all actions will generate a fresh new isometric shape group.

It seems this is possible but I can't see it in the animated gifs as they run very fast.

Sketchpacks

Hi there, I can't seem to locate the plugin via Sketch Packs app.

it's no work!

I chose the picture and ran the plug-in. I could only see the rectangle. No picture was generated.

Generated image is empty

Hi, as I generate the image I get it light grey empty. Have you experienced this problem before, I wonder if this is general problem with plugins I have or this is plugin-specific.

My sketch version is 51.2 and Isometric Plugin's version is 3.0.0.

I have a problem with other plugin at the moment too, it's "Chart" with the version of 3.6.0, there I can't make the menu visible.

Thanks in advance,
Br, Andrei

Not working with Sketch 50.2

With sketch 50.2 I cannot properly generate shapes, and I get three vectors that are irregular sizes that I cannot see on my canvas. even after turning on Fills and Borders these are invisible vector shapes.

How can I select an image or group, and make *that* isometric?

Sounded like a helpful plugin, as we need to take our mobile images, etc and make them isometric. However, all this does is generate a random rectangle. What then? How can I make my image isometric, and not generate a separate random rectangle? Thanks.

无法使用

无论如何操作都无反应,一设置好参数,按下Done,显示框就消失了,然而图形也没有变成Isometric

Sketch 52.6

Doesn't seem to be working in Sketch 52.6, when I hit "Generate Isometric View" dialog appears but no preview of the isometric artboard or rectangle comes up.

感谢

谢谢你,现在没问题了!
弹出来的设置框是不是只能设置一次再重新打开一次的呀,能否一只打开呢?

Ensure all requests are made using https

An http: request is attempted when Sketch Isometric is installed, however App Transport Security (ATS) blocks the request.

I've noted that a number of other urls in the manifest.json for this plugin also use http: only. We recommend changing over to use https: for all such requests.

Steps to Reproduce

  1. Install Sketch Isometric, 2.1.0
  2. Launch Sketch (current version 51.1)

Expected Result

  • No http requests are attempted
  • All previous http: links are updated to https:

Actual Result

Could not read image data at /Users/<User>/Library/Application Support/com.bohemiancoding.sketch3/Plugins/Sketch-Isometric.sketchplugin/Contents/Resources/http:/www.sureskumar.com/sketch-isometric/github_imgs/logo.png «Plugin Developer»

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

Feature request

  1. Hope to add support for other shapes, such as circles. etc...
  2. Fill colors can be automatically adapted to the fill color of the pre-generated shape.

It always generates a gray shape?

No matter what type of artboard or rectangle shape I select, it only generates a gray isometric rectangle? Should it not at least adopt the colour of the original shape?

Your GIFs are way too fast to understand what steps I might be missing.

Doesn't copy

Trying out the plugin, all that every happens when I follow the steps is I get a blank isometric shape. Whatever is on the artboard or rectangle I'm trying to transfer into an isometric shape doesn't show up

input problem for depth value

When deleting the number of the Depth value the isometric shapes disappear and the plug-in stops working. The other values accept a null value.

screen recording

I'm using v4.0.0 with Sketch 52.5 on macOS 10.13.6

Plugin Sketch Isometric not working in version 53

I was prompted to update Sketch, and i'm guessing that today was the new 53 release. I had no issues prior to this update yesterday.

Once I tried the Isometric plugin i noticed that the preview wasn't updating. Repeated it several times to make sure it wasn't some anomaly but it kept happening.

screen shot 2019-02-05 at 1 52 01 pm

Not working with Sketch 51.2

I have v3.0.0 installed. After running the plugin, the popup appears but nothing happens after pressing "Done".

Environment: Sketch 51.2 + macOS 10.13.6

sketch 49.2

Does not seem to support sketch 49.2, but it's the nice plugin!

Using symbols, groups

Hi. First of all : excellent plugin !
Now, for my workflow, question :

  • can't make it work with groups
  • can't make it work with symbols
  • can't make it work with artboards
    Both display only an isometric rectangle with nothing in it except the "depth walls". I guess the plugin is just not updated for the latest sketch version ?

Is there something i am missing ?
Flattenning the layer to one bmp doesn't work either.
i'm sure i'm missing something…

Not working

Isometric is not working with my Sketch 4.6.2.
Is there any version compatibility?

Border radius

Please, add the ability to change scopenote angles

Not working

I did exactly As shown in the gif all it did was create a gray isometric box !!! and nothing in your screen capture .gif I can see magic mirror 3 option what is going on?

No webview present

Plugin creates a blank isometric artboard

Get this in the plugin output.log

No WebView present. Event cannot be posted to the web UI.
 «Plugin Output»
No WebView present. Event cannot be posted to the web UI.
 «Plugin Output»

Colors not transferring

Hey,

This plugin works great, except that the color has been transferring to the isometric :/

No isometric view after run the plugin

I selected the artboard and clicked Generate isometric view, but the isometric view does not appear in the Sketch after clicked in done.

Is my mistake?

I'm use Magic Mirror v3 and Sketch 51.3.

captura de tela 2018-10-15 as 17 37 31

Just get grey rectangle

I've installed the plugin fine, I'm using Sketch v49.1 and when I select an artboard and click Plugins > Sketch Isometric > Generate Isometric View all I get is a grey rectangle.

I see the Rotate, Angle, Depth and Scale options, but the newly created isometric rectangle doesn't have the selected artboard on it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.