Blog

Update on the Comp to Code Tool in Brackets

With the launch of Project Parfait in preview, as well as Lee’s open sourcing of his Response tool, I wanted to provide an update on the “Design Comp to Code” tool that we showed last year at Adobe MAX. After a bit of a delay in getting started, we’ve been hard at work turning that vision into a reality as an extension for Brackets. We’ve been able to leverage a lot of work from the Parfait team to bring a comp to code workflow directly into your code editor.

We’re excited about where we’re at now and we’ve recorded a video to share some of the progress we’ve been making. If you’ve seen the MAX video, you’ll see the core features that were in that original vision, as well as some new concepts like code hints for textย and generating an asset from multiple layers.

We’ll be doing a private beta of the extension soon and we would love you to be a part of it! If you’re interested in participating, you can fill out the survey here. We’ll be starting small but hope to expand the group fairly quickly after the initial invites.

Over the next couple of months we’ll be sharing more about what features we have planned, so keep an eye on the Brackets blog for updates. We’re looking forward to sharing more of the roadmap and information on the
public preview. Let us know what you think!

=Ryan and the Comp to Code Team
ryan@adobe.com

39 Responses


35 Comments

  1. Chad Watkins says:

    Keep up the amazing work that is going on with Brackets. I love it. Also, when you extract an image does it do any kind of optimizing for the web? Can we customize file quality that it exports out to? Thanks

  2. wil says:

    It’s an amazing TOOL that many are waiting… I hope it’s available soon for users to We use Brackets

  3. JarolinVargas says:

    AMAZING !!!

  4. Ryan Stewart says:

    Thanks for the kind words!

    @Chad, we’re absolutely planning on that. That’s one of the things we’re hoping to engage the private prerelease on. We have a couple of different ways that we’ve been kicking around to expose those settings and we’re hoping to get feedback from early testers on which of those ideas resonate the most.

    So definitely sign up for the private beta. We’d love your feedback.

    =Ryan
    ryan@adobe.com

  5. casper says:

    Awesome! I hope to try early beta!

    Keep it up!

  6. Bionik6 says:

    Amazing work you done. But am interesting about this workflow with SASS and Compass. What about them? Do you plan them cause many front-end developers are using these tools.

  7. Ryan Stewart says:

    @bionik6,

    Yup, absolutely. That’s also something we want to make sure we get right via feedback from you guys. I have an ideal picture in my mind of what supporting SASS and Compass looks like and we want to get feedback on whether that fits how you guys work.

    =Ryan
    ryan@adobe.com

  8. ????? ???? says:

    Thank you for the tips
    goodluck

  9. ariacompvpn says:

    Keep going Thank you so pretty and beautiful

  10. Faber04 says:

    Amazing or awasome aren’t enough to explain how this extension could be useful .. c’mon let’s try it!!! Great job!!!

  11. […] breve – ma con data ancora da definire – dovrebbe arrivare un’estensione dedicata anche per […]

  12. Paddy says:

    That extension looks insane, can’t wait to give that a go!

  13. David Elisma says:

    This is really cool, but I kind of remembering that Adobe was promoting a workflow like Photoshop -> Reflow -> Brackets. Any intention to add some tools for responsiveness or is that too early in development?

    • Chad Watkins says:

      I know that a responsive tool was being worked on by Lee Brimelow but it seems he has stopped developing it and has just open sourced the code, I have been looking at it a bit but if you want to take a shot at it, you can read the post here

    • Ryan Stewart says:

      We’re definitely look at what we could do for responsive from a development perspective. As Chad mentioned, there is Lee’s extension that’s been open sourced but not necessarily in active development.

      It’s something we’re planning to explore once we’re a bit further along with this comp to code tool/extension.

      Will keep you posted!

      =Ryan
      ryan@adobe.com

    • Peter Flynn says:

      David — it is possible to do that today. Reflow can import a Photoshop PSD, and then you can pull out the HTML/CSS code from the Reflow project to take it into a code editor like Brackets. (There’s actually a “Brackets Reflow Cleaner” extension for Brackets to help hand-tweak the Reflow output).

      PSD Lens is a somewhat different idea: instead of getting a bulk export/conversion of the whole PSD and then cleaning up / refactoring the code all at once, the developer is in charge of the large-scale code structure and PSD Lens helps extract the finer-grained design info like gradients and image assets.

      We’d certainly be curious which type of workflow you find more appealing, and why!

  14. daniel says:

    hi
    brackets is so useful for us.
    but when we type persian(it’s iranians language)(utf-8) and dbl click
    the selected text is nut carful.
    please solve this problem.

    keep happy us ๐Ÿ™‚

  15. David Elisma says:

    @Peter. The more appealing will depend on the project. I really like the idea of the workflow from Photoshop to Brackets and Lee Brimelow’s extension does show us that we can keep the Reflow workflow within Brackets.

    @Chad. But there’s a disconnection between PSD Lens and Respond since they’ve been developped separately.

    @Ryan. Can’t sait to see the next development in PSD Lens. I’ll stay connecter for sure.

  16. Short: AWESOME! ๐Ÿ™‚

  17. […] Update on the Code to Comp tool (the “PSDLens” demo from last year) […]

  18. Michael says:

    Will the Comp to Code extension be open sourced when it’s released?

  19. Can not wait for this, have followed them since the presentation and a avid brackets user even tho every one around me use’s sublime keep up the great work guys

  20. roxxar says:

    This is a life saver tool. I can’t wait for this to release. You guys are doing a phenomenal job. Will the background tool work with patterns in our image mockup? If we specify the dimensions of the pattern, perhaps it can take a .gif image file of the background pattern.. Actually, we could just simply use css to do it. Keep up the good work.

  21. Varun says:

    what a superb plugin most needed plugin for site designers / developers… i am waiting to use this plugin when its going to get released ??

  22. Panith ( Cambodia ) says:

    I’m a newbie to Brackets and I found this very useful, and this extension is amazing! can’t wait for that. Keep up good work guys!

  23. Loann says:

    Love Brackets even more. Very cool. Can’t wait. Thank you!

  24. daniel says:

    hi
    1. when im coding and i push f5 the brackets will be refresh
    I want to disable the f5 shortkey in brackets

    2.when i drag a folder to brackets and code… and close brackets and open it the file tree show the get started folder !

    * i want to show the folder that i choese it at yesterday (yesterday is an expmale)

    please help me

    whene you answerd my qustions send alert to me by mail

  25. Tan says:

    So just to confirm what I’m seeing. What this allows is that I can take a concept PSD on how the website should look, and use it as a reference to make coding the website faster?

  26. fieldsmb says:

    Are we going to see Illustrator file support with SVG conversion for the necessary elements added to this system?

  27. morley says:

    PLZ Complete this feature. I was remembering Doing crazy Layouts in ps 7.0 and slice them for frontpage and create nice Table layout.

  28. graphic says:

    brackets is so useful for us

  29. John Herne says:

    Really great updates to Brackets! One issue I have with extract—I am specifying the folder path and image name (image correctly previews in pop-up menu) but the image does not download from the source psd on cc. Anyone have a solution for this?

  30. […] Try this for size Update on the Comp to Code Tool in Brackets – Brackets Blog […]

  31. Thank you for share this tips

  32. isul says:

    i have installed a twig extention but it’s not working. Anybody have solution?

  33. Graphix.Sparrow says:

    Is The Private Prerelease Out Already…? It’s Such And Amazing Tool That I Would Like To Try It… ๐Ÿ™‚

4 Trackbacks


    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 174

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 174

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 174

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 174

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*


× three = 18