Get To Know Adobe Edge Reflow, A Tool For Responsive Designs

We are live! For the past six months I’ve been working on a new product from Adobe’s “Edge” family. This week, my product, Reflow is having its first public preview. Reflow began development less than a year ago, so, this is certainly not a finished product. We are hoping to put it out to the public with frequent updates and get people’s opinions on how the tool can be useful to you.

If you want to check out some intro videos, go here.

Hopefully, you already know a bit about Reflow and just want to know how to get started. Here is a screenshot of what you see when you start up the tool and a description of the various controls available to you.

Image

1) Tools: Reflow offers the selection tool, box, text and image. Click on the box, text or image to add one of these elements to your design in a way similar to Photoshop. You can also your shorts V (selection), M (box), T (text), or I (image) to get into these modes.

2) Properties Panel: This section of Reflow gives you two tabs:Layout and Styling. You should be able to edit any css on a selected item from these panels. The styles available in these panels will change depending on what you have selected. If you have the main “Container” selected, you will see options to edit your Grid in the “Layout” tab.

3) Regions and Ruler: The top of the application will show you a ruler and your regions/breakpoints (if you have added some to your project). To add a breakpoint, you can either double click on a part of the ruler or click on the + button at the far right-top of Reflow.

4) Add/Remove/Edit button: You can add a breakpoint by clicking the + icon. If you have a breakpoint marker selected, the + symbol will turn into a -. If the – symbol is displayed, you can click on it to delete a region. Mousing down on the +/- button for a few seconds will bring up an orientation panel where you can change from using max to min regions, edit your regions, or delete them. Reflow uses max media queries, by default.

Image

5) This mobile device icon will allow you to view your Reflow designs in Edge Inspect. Click on it and follow directions to view your designs live on your device using Edge Inspect.

6) Elements Panel: The icon at the bottom left of the status bar will bring up the “elements panel” in Reflow showing you all the box, text and image items in your project. You can select elements from here and choose to hide/view them. At this time, you cannot re-order elements in the DOM form this panel.

7) Status Bar: When an item is selected, it will show up in the status bar along with all of its parents. You can select items using the status bar. You can also group and un-group boxes using the status bar.

8) CSS Output: Select an element on the canvas, then click on the “<>” icon in the status bar to see all the CSS (for every media query) for that element. The CSS can be copied by clicking on the clipboard icon in a particular region or the clipboard icon at the bottom left of the panel to copy all CSS for the region.

9) Align and Match Size Panel: When you have more than one element on the canvas selected, this icon will be enabled. By clicking it, you will see an align panel to align elements to the right, left, center, middle, top or bottom. You can also “match size” elements by width, height or both.

Screen Shot 2013-02-13 at 11.28.32 AM

10) Zoom Indicator: This dropdown on the bottom right of the application will zoom in or out of the canvas.

About these ads

One response

  1. It seems to be necessary to creat break points starting with the smallest first. I made the mistake of creating a 800px breakpoint first and them was unable to create any smaller breakpoints.
    You have to love how Adobe are adept at runing their products with unintuitive operation. Hire some UX/UI engineres!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: