From Design to Code

The Edge Code and Brackets team(s) at Adobe has been experimenting with some workflows for extracting design assets and turning them into something that would be usable in a code environment. One example of that is something we’re calling “PSD Lens” internally that lets you link to specific items in a PSD file and then get CSS code hints on that item inside your code editor. This would let you pull out gradients, fonts, colors, sizes, and other properties from your design file so that your code matches exactly what’s in the PSD.

Note: This is just something we’ve been experimenting with. It’s not yet available in Edge Code or Brackets.

We know designers and developers have a variety of workflows and this is just one idea we’ve been playing with. On the Edge Code team we fully embrace the web designers who code and the web developers who appreciate design. That’s who we’re building Edge Code for. If you want to design in the browser you can use features like Live Preview to do that. If you’re working from a Photoshop file, something like PSD Lens might be helpful. If you’re coming from Edge Reflow we’re also looking at ways to easily access your Reflow design so you can match exactly what’s in your design in the context of code. In that vein there’s also a lot of thinking going on about some potential responsive design and development workflows in Edge Code and Brackets you should check out.

If you have feedback on this or anything else in Edge Code (or Brackets) definitely feel free to drop me an email directly.

=Ryan
ryan@adobe.com

This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

4 Responses to "From Design to Code"