Subscribe
Sign in
Launchpad for Sketch — Publish responsive HTML websites directly from Sketch
Launchpad for Sketch gives designers the power the create live website, directly from Sketch.
You design, we put it on the web.
48
Replies
Best
Chris Messina
Top Hunter
The @AnimaApp folks are on a roll... I've totally fallen in love with their Auto Layout Sketch plugin, and now they've basically built an awesome version of FrontPage directly inside of Sketch (kidding! That's a joke for old fuddy duddies).
Report
Share
@chrismessina @animaapp The Frontpage thing made me pause and laugh for a second. Could have also gotten OG lols with "It's like GeoCities for Sketch", perhaps :P
@chrismessina @animaapp Don't laugh - we made good money hosting FrontPage websites. Was the only reason to offer Windoz hosting until .Net was introduced
Absolutely crushing it, @avishic! How would you rate the code that is created using Launchpad to your own handwritten code? How much efficiency gains can you get by using Launchpad? Would love to see some examples and stats! 🙂
Thanks @kunalslab!
Launchpad code is readable & maintainable, on the current version you can't download the actual code but you will in future, and were making it more efficient too (merging similar CSS classes, etc).
As for how pretty it is - That actually depends on how organized you design is 😊
We've introduced Stacks on 'Auto-Layout' which are basically Flexboxes inside Sketch. So if you keep your design clean from crazy hierarchies + use Stacks + name you layers, the code is pretty neat 🤓
If you wanna see a code example, view-source of our homepage, it was created purely with Launchpad https://launchpad.animaapp.com 👊
And the gulf between design and code keeps shrinking. This one comes to you courtesy of the talented team at Anima. If you're a designer who uses Sketch at all to design websites, then you'll want to take a look at this very cool looking Sketch plugin that allows you to publish your responsive designs so you can see how they look and feel in a browser.
@alirtariq to be fair, the "gulf" between a static design and html/css/js specifically wasn't really a gulf. It was solved a long time ago by many people.
the way I personally always perceived the movement of closing the gap between design and code, was more surrounding dynamic applications. I.E. native mobile apps, SaaS, anything data/function/logic driven.
While this is great (upvoted!), Taking X design viewable in Y platform, just not as a static image, is an exercise in convenience, not advancement.
2 questions.
Does it allow me to use any html5 site and customize it? Webflow does not allow this.
Can we export the site or do we have to use your hosting?
Cheers!
@_pascalandy
Export full website - Very soon.
Customizing an existing website - Sorry, nope.
@_pascalandy
You can now export code if you're a Pro user - You'll get a pack of HTML, CSS, Media & Fonts, ready to deploy :)
Also, we can stay in touch on our Facebook group updating there all the time
https://www.facebook.com/groups/...
Hi Product Hunters!
For our Product Hunt launch we want to offer a coupon of 20% off for the first 3 months.
Redeem here: https://www.animaapp.com/signup?...
We’re empowering designers to do more without the need to code. A bit about Launchpad:
* It's a Platform as a Service for static websites.
* Everything is done directly in Sketch.
* You design, we put it on the web.
Some of the features amongst others:
* Breakpoints - To make your design look great on Mobile/Tablets/Desktops.
* Links - Link different web pages.
* Forms - Allow visitors to submit information.
* Videos - Embed videos.
* Analytics - Install any analytics provider code snippet such as Google Analytics or Mixpanel.
* SEO
and more..
It's a great tool for Landing pages and Marketing websites.
It's free to use with Launchpad branding or paid if you to remove the Launchpad branding.
Our Medium Post: https://medium.com/sketch-app-so...
Feel free to AMA!
@timolins That's something that crossed my mind as well. Seeing as how it's a SaaS pricing model, I doubt they'd give out the source code. Since it's static you could always open the dev tools and extract the HTML/CSS and JavaScript if there's any. From there you could modify the code and host it yourself, although it might be against their ToS or something.
WOW, this is brilliant! Another step to the no-code movement (freedom from the fixation that a problem can be solved just via code). Thanks @avishic for bringing Launchpad to us.
I was wondering why you guys were starting out with a generous Autolayout plugin...now it all comes together!
Cool what frameworks if any is this based off for breakpoints (eg. 960 grid or bootstrap or standard breakpoints), also any navigation page effects so things can fly-in as you scroll?
@mgaffneyny Breakpoints are pure vanilla CSS media queries, no frameworks at all. Meaning your design is not limited to cols / specific breakpoint value, it's set by your artboards sizes.
Docs: https://animaapp.github.io/docs/...
And yup, effects are coming soon in one of the next updates :)
@chanjohnathan Great question!
It’s always best to try it out to be sure before you go live with your website, but here’s what we do:
If this font is free and on an online repo - We’ll css import from there.
If you have downloaded & installed a font - We’ll upload it, assuming it's a format supported by browsers, i.e .ttf (Make sure you have a proper license to the fonts you use online)
If you’re using an OS fonts (i.e Avenir, Helvetica, SF) - We won’t upload it, so users on windows would probably not see it. Better to avoid these for license reasons anyway.
@avishic Thanks for the response! FYI, I updated Launchpad via Auto-Layout and upon restarting it completely bugged out my Sketch v42 (36781).
All my Sketch files opened but weren't showing anything and I was getting a permanent beach ball as well. I tried uninstalling the plugin via Finder but no luck. Had to use Time Machine to restore an older version of my plugins folder.
@chanjohnathan OMG, Thanks for letting us know and thanks to Steve Jobs for the Time Machine 😅 We'll look into it, sorry for that.
If you wanna retry, go to plugins folder, delete Auto-Layout, restart Sketch and reinstall, should be safe..
This is incredible, we just tried it out and it only took us 10 seconds (not even exaggerating) to go from basic Sketch idea to functional webpage. Great stuff guys!
I really enjoyed the Launchpad. I wish it could be a bit cheaper. So I can purchase it more in the long run. I would like to see it improve more in the future. In terms of making the linking of each artboards more user friendly instead of having to drag the line all the way to different artboards make it so it's less of a stretch for users. I truely enjoy everything sketch has to offer for the front end design. But back end wise, the case files are a bit difficult to decipher. Maybe figure out a way while designing in the front end the css code can also be more organize during export. Thank you Or Arbel - my go to support person in terms of Launchpad. He is really helpful in providing all the information I need regarding the app. I am truly thankful. I won't have been able to learn so much in such a short time, if I was not able to gather the information I need. The support team provided me with tutorial that could be useful and little tips that I won't know even when going through YouTube and the forum. But I feel like Launchpad has a lot of potential. I will definitely recommend this to anyone who has a design background.
Excited to give it a go. This could be a designer / front end dev game changer.
This is great. The tools that are becoming available for those who work on both design and development of websites are insanely useful and innovative, and Launchpad for Sketch is 100% one of those.
