Brackets: From Design Comp to Code

An experiment in extracting content from a Photoshop design comp from within a code editor. NOTE: This is just a prototype. It's not yet included in Brackets or Edge Code.

Recorded at Adobe MAX 2013 w/ Rain Wilson and Mary Lynn Rajsku.

[waadeland]

"I like this" feels like a massive understatement right now!

[RAWKNtoni]

brought me to tears! I need this ASAP! 

[jeromematthews]

Hello. 
I'm new to Brackets, have only been using it for about 2 weeks.
How would you go about finding the PSD lens feature to allow you to do what the presenter did in the video? 

[jessesmit]

I think that this is a great fusion of software. If you're working on a site with a partner, or someone who is great at designing in photoshop and has ideas for the site, you can easily mesh the two workflows with this idea. I'm currently learning to code, which I will keep doing. But I will also start learning to put designs/logos together in photoshop so I can work in multiple ways.

[jmarx]

amazing! this could be the best tool for developers to translate the disaster that typically is a comp file! nice work.

[JoeOracoy]

Brilliant! New version still don't have this yet. Any news on this? Perhaps there's a brackets addon for this?

[IlyaZub]

Finally there is such tool. I don't be surprised if next year there will be a tool that allow me to click a button and correctly convert PSD to HTML with CSS.

[LanPham]

amazing! I love brackets, it beats every other editor i ever used ♥

[loztparadise]

It looks alright for a simple page, but how accurate would it be when working with more advanced layouts. I had seen a lot of PSDs from different designers and I already can see there would be problems occurring, but maybe they can figure a way around it. I'm looking forward to seeing the end results.

[prashanthggbits]

This Video has blown my mind for the day.

[MrAlexander]

How do you upload the .psd file to your work in brackets? I made a PSD design and I couldn't open it within Brackets. What needs to be done for this to work?

[tarungupta]

Awesome tool .. great work guys.. Is it available on bracket now ??

[rictushep]

Yup, we are planning to bring Brackets into the browser in the not-too-distant future. We wanted to focus on on-desktop workflows first because a lot of developers still work on local files so they can use command-line tools, etc.

[marcln]

when will this be available? this would just shatter the time it takes to code the structure of a site.

[_lukewh]

It only defines them into pixel values, not percentages / em's etc so I can't see that really working out, unless you're doing adaptive not responsive, which is pretty much not good. Also, do you design 5-6 different iterations? That seems like it would be a crazy amount of time for one project. If I ever needed to do that I'd probably use style tiles anyway, which this wouldn't work for. The concepts pretty cool don't get me wrong, I just see me personally using it. Each to their own :)

[nthweb]

tomara que não demore essa ferramenta no brackets, é perfeita!!

[casduplessis]

Awesomeness! When will this be available for Brackets?

[mdsalahuddin]

Man, this is making my head spin.. what the hell they are doing .. they will making amazing editor for me... cool thing. keep going..

[nadimhossain]

hey, guys how can I get this ps extension in my brackets.
please comment hurry up.

[ScottLahteine]

I "Save For Web" a lot of PNGs out of Illustrator and incorporate them into templates and portions of existing layouts (e.g., blocks or regions). Since my final goal is usually to make a (Drupal) template I usually skip Photoshop and do the layout by adding CSS to a Zen template. The browser is an ideal tool to view the work in progress. But every developer gets PSDs from clients that need to be decomposed. So any tool that makes it easier to pull apart PSDs is welcome.