Editing widget properties

Tags: Documentation | Prototyping | Widgets

Using the widget menu to edit your widgets

  • Click on a widget to access the widget menu.

  • Use the tool icon inside the menu to move the menu around your screen.

  • Clicking the widget menu tool icon will expand/collapse the menu

  • Some buttons on the widget menu can be expanded to show even more options.

  • The widget menu will always be visible on screen when a widget is selected. When no widget is selected, the page menu will be showing and the widget menu will be hidden.

Positioning the menu

  • The first time you drag the widget menu it will move to the location you choose.

  • Dragging it a second time will cause it to switch to best guess mode. This will make it centre over whatever widget you have selected.

  • Drag it once again and it will stay in the location you chose. You'll see the little blue lock icon on it when it is in locked mode. It won't move around unless you drag it again.

Customizing your widgets

You can change almost anything about your widgets and make unique designs to reuse over and over. Discover all of the options available in the widget menu.

  • Text - color, size, font
  • Background color
  • Save widgets to your saved design patterns
  • Group/ungroup widgets
  • Align widgets
  • Cut, copy, paste and clone widgets or parts of widgets

Backgrounds and borders

The background and border properties menu is used to set the non-text properties of a widget, including:

  • Background color (flat or gradient)
  • Border color (if the widget has no border, increase the border size and then you can give it a color)

  • Background opacity
  • Border size and radius
  • The width and height of the widget (exact pixels)

Tip: Different widgets have different customizable options. For example, you can change the color of some widgets but not others and some of the larger card widgets cannot be resized.

Use the background and border icons to toggle between color editing and all of the other editing options.

More articles for Documentation | Prototyping | Widgets

Keyboard shortcuts

Keyboard shortcuts available in Fluid UI to speed up your design process.

Changing view settings

Full details about the different view settings in Fluid UI and how to change them.

The difference between screens and pages

Learn about the differences between screens and pages in Fluid UI.

Hotspots

These links are visible on your page when creating your prototype, but don't show in preview mode.

Widget groups

Creating and working with groups.

How to upload your own images

How to upload, add, delete and filter your own uploaded images in Fluid UI. Also covers hotspots for linking prototypes together.

Snapping and grid

The snapping and grid settings are available in the page menu and can be used to lay out your prototype according to grids or other layouts.

Setting page titles and adding notes

All about page notes in Fluid UI

Changing page settings

Full details on page settings and how to change them in Fluid UI.

Creating projects

Creating projects in Fluid UI, naming and deciding on the default orientation of your screens.

All about the library

Learn how to access and add widgets, upload images, save design patterns and switch / search between library elements.

Why you should prototype

Fluid UI discusses the top 10 reasons you should prototype your apps before you hand them over for development.

Fluid UI introductory tutorial

Learn how to make your first Fluid UI prototype with this introductory tutorial.

Adding, cloning and deleting pages

Covers how to create, edit and delete pages in the editor.

How do I make a page scroll when previewing?

Increasing the page width or height in the page menu will automatically cause any pages to scroll (horizontally, vertically or both) when you preview.

Working with widgets

Everything you need to know about working with widgets in Fluid UI.

Links, gestures and transitions

How to add and delete links from your Fluid UI project. Also how to set link transitions and gestures to give a more custom look to your project.

Hotspots

Hotspot widgets are invisible when previewing though their links will still work. They can be combined with uploads to quickly create linked image maps.

Moving, resizing and aligning widgets

How to move, resize and align your widgets.

Widget backgrounds and borders

How to use the widget menu to edit the look and feel of your widgets to match the needs of your project.

Setting your splash screen and app icons

How to set these two important screens in Fluid UI.