46

Open Sketch files without Sketch

almost 2 years ago from , Programmer

Hi, my name is Ivan and I am a developer of the Photopea photo editor, which works in a browser and has an excellent support for the PSD format.

Now, I have added the support for Sketch files. You can open any Sketch file, view the file structure, edit texts, export as PNG etc. Since Photopea can save documents as PSD, you can use it as a Sketch to PSD converter.

Instead of writing the details and how everything works, take a look at several examples. Also, feel free to try out your own Sketch files :)

Code Editor: SketchViewer - Photopea

Miranda Kerr: SketchViewer - Photopea

Milk Page: SketchViewer - Photopea

The Martian: SketchViewer - Photopea

Do you think it can be useful for you? If yes, what other features would you like to have? :)

P.S. follow Photopea on Facebook or Twitter.

29 comments

  • Rawal Baig, over 1 year ago

    Thanks For this great app, It really solved my biggest headache of sketch files.

    1 point
  • Boris KozelevBoris Kozelev, almost 2 years ago

    Excellent tool especially if you want to convert a Sketch file to PSD. It even preserves paths, effects and masks. That's really nice! It would be awesome if it could export Sketch files as well.

    1 point
    • Ivan Kutskir, almost 2 years ago

      Thanks! It also preserves text layers with the correct format (font, size, color ...) and converts them to PSD layers :) If you have a blur on a shape, it is converted to the blur of a vector mask :) Blurs of bitmap layers are converted to Blur Smart filters on Smart objects :)

      Yes, Sketch to PSD would be a nice thing, too :) Honestly, I think that these companies should cooperate on developing one common format. Remember the days, when each phone needed a different charger? That's what we have now in the area of image formats :D

      2 points
  • Oleg Gorlachov, almost 2 years ago

    https://icons8.com/lunacy

    Tool-viewer for sketch file.

    1 point
    • Ivan KutskirIvan Kutskir, almost 2 years ago

      I know about this tool :) actually, I wanted to use it for testing, but then I found out, that it requires .NET, which has about 4 GB, so I gave up :(

      1 point
      • Oleg Gorlachov, almost 2 years ago

        ohh, than u are right, but it seems like a good tool for somebody, who have already installed .NET

        Thanks for Photopea:)

        0 points
  • Marcel M., almost 2 years ago

    That's quite interesting and I'm really impressed. :)

    I tried some online tools in the past to convert .sketch files to .psd but all of them horribly failed even on simple files (handful of layers, nothing fancy).

    Looks like your conversion is "rock solid".

    Figma lately did a great job to bring professional UI design into the browser and there's Affinity and Gravit. If you ever got your hands on any of these tools you would understand why I would never consider photopea as a tool for professionals at this time and date :( The UI looks fairly outdated and just by trying to move some layers around or selecting elements it feels like you're using Photoshop from a decade ago. Please don't take it personal Ivan. I read your initial blog post and I'm still impressed how far you got from your initial idea in 2012. For me it's more like an "online sketch and psd viewer and converter"

    The value i can see for todays design world:

    • view and convert Sketch files to PSD (#FOMO)
    • no more Mac OS only lock-in bullshit
    • can properly handle complex conversions (e.g. UI Kits with multiple artboards)
    • Fonts get loaded automagically (everyone knows the pain in Photoshop)

    I saw that you're providing an API, thumbs up for that :)

    1 point
    • Ivan Kutskir, almost 2 years ago

      Thank you :) when making Photopea, my original goal was to make a raster editor, not a vector editor. The UI is not similar to Sketch in any way. But if you know Photoshop or Gimp, Photopea should be familiar to you. I already have several thousands of users, who use it as a replacement for Photoshop in Chrome OS and Linux.

      What do you mean by "Photoshop from a decade ago", besides the gray color of the UI (which you can change in More - Themes)? If you miss some features from Photoshop (or other anraster editor), I will be very glad to add them :)

      1 point
  • Surjith S MSurjith S M, almost 2 years ago

    Awesome!

    But I have noticed one problem.

    I just opened a sketch with Multiple Pages, But it shows only artboards of first pages.

    Where did the other pages go?

    I know Photoshop does not have a multipage option, still a Popup to select the page first will be super cool.

    ~Surjith

    0 points
    • Ivan KutskirIvan Kutskir, almost 2 years ago

      For some reason, I assumed, that Sketch designers do everything in the first page, so I decided to ignore all other pages. I know, that designers often put Symbol's Masters into the second page.

      Should I add the artboards of other pages into the same PSD, or create new PSDs? You can start a discussion at our GitHub (press Report a Problem at the top right corner).

      0 points
  • Jonathan SimcoeJonathan Simcoe, almost 2 years ago

    None of my Sketch 43.2 files open.

    0 points
  • Florian GrauFlorian Grau, almost 2 years ago

    Sounds super useful, but when I try to open a Sketch file I get "unknown format" error. Does it already work with Sketch 43.2?

    Other than that, stellar work! :)

    0 points
  • Lukas DolezalLukas Dolezal, almost 2 years ago

    It's great stuff. Few use cases that we find sketch working for us at work that you can consider implementing better:

    • picking color of text/background. Ideally click to copy CSS style
    • picking shadows color
    • copy and paste text
    0 points
  • Max Stasiuk, almost 2 years ago

    Thanks for this awesome tool. Can you add export as Sketch file too ?

    0 points
  • Blagoja Karafiloski, almost 2 years ago

    Thank you for this editor. It is definitely useful especially for sending files to developers or other designers who are not familiar with or don't have Sketch.

    I'm not sure how difficult will it be but in the future, it will be interesting if you can do the opposite, upload a PSD file and save it as a sketch file.

    0 points
    • Ivan KutskirIvan Kutskir, almost 2 years ago

      Thank you :) Regarding PSD to Sketch, I am afraid it can not be done "completely". Some layer effects (Bevel and emboss, satin etc) don't have an analogy in Sketch (yet). Also, there are no adjustment layers, Perspective transform of bitmaps etc.

      0 points