This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.
Fetching your projects, please wait…
Fluid UI is a prototyping tool used to design mobile apps, websites and more.
Some of the heroes who have contributed so much to Fluid UI.
If you have ideas about how to improve Fluid UI please share with us using the feedback tab on the right. If you require technical support or notice a bug please check this list of
© Copyright 2011-2012 Fluid Software Ltd. All rights reserved.
Watch short tutorial videos to get started. Fluid UI videos…
Click the “projects” tab in the Fluid menu to access your projects.
Click on a folder to open a project. Alternatively, drag the folder onto the canvas to open the project. Open projects are indicated by an open folder with a little page sticking out.
Click the “add project” button to create a new project. Click on the project label to edit the name.
Drag a project to the bin to delete that project.
Newly created projects are active by default. Depending on your account type there are limits to the number of active projects you can have at any one time. When you reach your active project limit, delete an existing active project, or make the project inactive. To make space for more active projects, drag-and-drop the active project folder in the inactive area.
Inactive projects are read-only archived projects. To make an active project inactive, drag-and-drop the project folder into the inactive project area. This project may be viewed but not edited unless made active again.
Click and drag anywhere on the canvas to move it around. Pages and links move with the canvas. If you drag the canvas far enough in any direction you will reach the outer boundary, indicated by a dark border.
Double-click anywhere on the canvas to create a page at that location.
Zoomed out: Click and drag a page to move it around on the canvas.
Zoomed in: Click and drag the “move page” area on the page frame to move the page around.
Click on a page to zoom in and begin editing.
Zoomed out: Click and drag the page to the trash area (bottom right corner) and drop there to delete.
Zoomed in: To clone a page click on the “clone page” button above the page, on the page frame, an exact copy of the page is created to the right of the original page.
Zoomed in: To add design notes click the “page notes” button above the page on the page frame to open the notes text area begin typing. Click the page notes button again to close the text area.
Page settings menu
Zoomed in: Click the “page settings” button above the page to open the page settings menu. Click the button again to close the menu.
Set the target device for your mockup. iPhone and a range of Android resolutions are provided. Custom allows you to specify the screen size of the target device. Full tablet support coming soon.
Select page orientation – choose from landscape or portrait.
Set the page size. The page can be larger than the screen size of the target device – for example, tall scrolling pages. The page size cannot be smaller than the screen size.
Select a widget. From the toolbox menu, click the link button to start a link – move the end of the link connector to another page and click to complete the link.
Hover over the link to display the link settings button. Click the button to display the link settings panel. Click the “remove link” remove the link. Alternatively, delete the widget where the link originates.
Hover over the link to display the link settings button. Click the button to display the link settings panel. From the drop down menu select a gesture.
Hover over the link to display the link settings button. Click the button to display the link settings panel. From the drop down menu select a transition.
While zoomed out click on a page to zoom into that page. Alternatively, mouse-wheel up to zoom in.
While zoomed in click the ‘zoom out’ button (in the top right of interface to zoom out). Alternatively, mouse-wheel down to zoom out.
Click a library heading (Sketchy, Android, iPhone, Uploads) to switch between libraries and to manage image uploads. Use the search box to search for any widget in the library. To adjust the width of the library click and drag the right edge beside the scroll bar. Click the hide/show button to quickly hide the library and click the same button again to show the library.
Drag a widget from the library and drop it on a page to begin creating your mobile mockup. Double-click a widget in the library to add it to the current page with automatic positioning.
Select a widget by clicking on it. To select or deselect widgets hold down the control [CTRL] key (CMD key Mac) and click each widget to add or remove it from your selection. Alternatively, click and drag a selection box around the widgets you want to select. Multiple widgets can be moved at the same time and aligned relative to each other.
When a widget is selected the toolbox menu is shown. The toolbox provides access to the following functionality.
Create a link from the selected widget
Make an exact copy of the selected widget
Copy the selected widget to the clipboard
Cut the selected widget to the clipboard
Paste the selected widget from the clipboard
Delete the selected widget
Align widgets vertically or horizontally (two or more widgets)
Reorder the height (z-depth) of the selected widget
Display shape property inspector – modify colour, opacity, border and radius sizes
Display text property inspector – modify colour, font style, opacity and alignment
Click the preview “play” button (top right of interface) to preview your mockup. Click the same button again to exit preview mode.
There are several ways to share your mobile mockup with your team.
Capture your mockup code with a QR reader app to test mockups on a mobile device.
Copy the generated link and share your mockup as a standard web link.
Send your project link by email to project collaborators.
Generate a print-ready version of your mobile mockup, ready to save in PDF format.
Export your mockup in HTML5, store locally on your computer, great for archiving or offline presenting.
Export your mockup screens in image format, great for documentation. Images are emailed to you directly.
Share your mockup with your social network for instant reaction and feedback.
Drag a page or widget to the trash area in the bottom right of the interface and the trash drop area will appear – drop the item there to delete.
Undo / Redo
At present undo and redo actions are limited to text edits. Full support for undoing and redoing all other actions will be added soon.
To upload your own images drag the image files from your computer and drop them directly in the browser window. Alternatively, click the Choose file button in the uploads library to browse for images on your computer and upload. To delete an uploaded image, simply drag it from the library directly to the trash area.
Fluid UI has the following keyboard shortcuts. Need more? Let us know.
Nudge selected widget or widgets 1 pixel left, right, up or down
Delete the selected widget
Duplicate the selected widget
Copy the selected widget
Cut the selected widget
Paste the selected widget
Select all content while zoomed in on a page
Hold control and left-click to select/deselect multiple widgets
Access developer menu to reset Fluid – Please use with caution.
Fluid UI uses the latest HTML5 technology meaning your work is automatically stored locally and online. Please sign up for a new account or sign in to your existing account to save automatically.
All major buttons have tooltips. Hover over a button to display a tooltip that will help you identify what it does. If you notice any controls without tooltips please let us know using the feedback tab.
via Hacker News https://www.fluidui.com/editor/live/