Adobe Edge Reflow Team Blog

The next-step in next-gen web design

Since our last update in April, the Edge Reflow team has been hard at work. This release is all about the feedback and conversations we’ve had with you. We’ve included over 20 great features and almost 200 bug fixes, with much of our focus on the details, making the app a pleasure to use. For a quick video overview checkout a few of the highlights of this release

If you’re new to Reflow, this is a great time to start. If you’ve used a previous version, we think you’re going to love what you see. Either way, if you are ready to get started, Reflow team member Joan Laferty (@laffertybug) has put together an in-depth Getting Started Guide that provides invaluable insight to even the most seasoned Reflow user.

Integrations:

This Reflow update is part of the huge Creative Cloud or “CC” release. As a result, cross product workflows have been a big focus. Adobe TypeKit leads the industry in providing professional web fonts for your web sites. We now support using any “Kit” you’ve created as you design within Reflow.

Scalable Vector Graphics, or SVG, is one of the most useful graphical formats when creating a responsive design because it looks perfect not matter what screen size it is viewed on. Adobe Illustrator CC offers the most advanced vector drawing to date, and there is no better place to create SVG. Now, you will be able to seamlessly share these assets between Illustrator CC and Reflow CC by simply using the copy & paste functions. Just choose a set of paths and copy them, jump over to Reflow put your cursor where you want it land and hit paste. An SVG file will be created in your project, and you will be one step closer to a beautiful responsive comp.

A better design experience:

Manage assets

Now you will more efficiently be able to mange the assets in your project. For example, you can see which assets are available to your project, how many times they are used, and update and delete them if you wish.

Reuse Styles

In the past, there was no easy way to apply a visual style previously created to another element. Now, you’ll find the ability to copy and paste visual styles in the Edit menu.

Working with Elements

The Elements panel is one of the easiest ways of seeing the hierarchy of your design. Previously it was not as interactive as it could have been. Now you will be able to simply grab any of the elements and reorder them by dragging. This action is extremely powerful and effectively allows you to visually reorder the DOM.

Previously you could only name elements in the Elements Panel and this required an extra few clicks. Based on your feedback, we know a lot of you wanted to rename elements directly on the DOM bar, and now you can!

Base Type styles

By selecting the “Body” of the design surface, you can define things like the default font. Reflow also defaults to EM based text sizes, but you could not define the size of an EM. Defining the base typography size will adjust the size of 1em. This property is customizable between breakpoints and is a huge step to creating relative sized layouts.

Text enhancements

Another common request that we’ve heard–besides TypeKit support– is the ability to design backgrounds and border styles on text boxes. You will now be able to do so!

Experimental features

Under the View menu, there is a new Experimental Tab you can click on. We will surface emerging CSS features via this tab. For example, CSS filters recently made its debut in all Webkit-based browsers (for both mobile and desktop). While this feature is not supported in all browsers, this is an awesome place to see what’s coming.

Cleaner CSS

While Reflow focuses specifically on helping designers create HTML-based responsive comps—rather than generating production quality HTML and CSS–we’ve made several improvements to the CSS that Reflow creates. Any element names that you’ve customized will now trickle through the HTML and CSS for easier identification and reuse. For details on the other enhancements check out our release notes.

What’s up next?

You may have seen a demo of Photoshop exporting assets and creating a Reflow project. We are hard at work with the Photoshop team and hope to release this soon!

Feedback

Getting your thoughts and opinions on how Reflow can become the best web design tool possible is our #1 priority. To help with this, in the lower right corner of the screen, you can easily send the team a note. We’ll be reviewing this feedback daily. If you include your contact information we can respond directly to you. Otherwise your feedback is anonymous. We can’t wait to hear what you think.

This is a shortened list of everything in this release. Did I mention this was a huge release? For a more in-depth look check out our release notes and Getting Started Guide. We sincerely hope you enjoy all of the hard work that has gone into this update and let’s keep the conversation going!