Moving Elements in an Axure Prototype

    Today I ran into a problem whose solution I would like to share. This post will be useful for those who try to make their Axure prototypes as interactive as possible.

    So the challenge. Visualize on the prototype the addition of an object with a shift of other objects. For example, take the addition of a question in an online consultation service.

    image

    It is necessary to make sure that when you click "Submit" a new question appears above the old ones, and the old ones, in turn, shift down. Like this:

    image

    Looking for a solution on the Axure forum, I found that this is a fairly common task among users of this program. Nevertheless, the developers have not yet implemented a dynamic relative positioning of elements, so when such a task arises, you have to either combine all the elements that need to be moved into a single panel (which is not always possible), or move each element separately.

    So what you need to do to move the item. First, you need to convert it to the Dynamic panel:

    image

    After these, select the element and its event, according to which the elements should shift:

    image

    And we add the Move panel (s) action, selecting the desired panel and indicating the relative shift value (just a number - shift down by the corresponding number of pixels, a number with a minus - shift up):

    image

    The prototype from the example can be downloaded from the link: petwork.ru/data /stuff/move-object-example.rp

    It seems simple, but on complex prototypes it can be torture.

    PS I would be glad to adopt a more elegant solution, if any.

    Also popular now: