Widgets library

#1

Yay, after years I am now at a different client where some interactive prototyping is required for a rather complex app. So I convinced them to buy an Axure license.

I am setting up a basic library to mimic or design system for use over multiple .rp files. It seems like a heck of a lot of work and I don’t remember some things, not can I find simple descriptions.

As usual, our design system has buttons in a number of variants: primary, secondary, tertiary, etc. Mainly different colors, and off course that comes with different hover and font colors as well. Furthermore, the buttons are available in 3 sizes: large, normal, small. How do I create a maintainable system of this?

I see variants are still not supported, widget styles do not include the hovers and are local to a file.

What I did now is create a library, in that library create a component for the button, gave it views for all combinations of size and color (yikes) and then placed that component on a widget.

  • Seems to me like a pretty difficult way and having both a component and a widget for a single thing seems annoying (but components are the only ones that support views, right?)
  • When I use the button in a .rp file, I cannot add interactions to it.
  • When I update the library, existing instances of the widgets in .rp files are not updated.

This all seems basic stuff to me for a design tool, so what am I missing?

#2

You can create a library of widgets, similar to the default library. For each different button you can create a new page, rather than putting them all together in one. Then, in your main project file you can import the library and choose your desired button.

One tip - name the pages in the library (eg each button) with some breadcrumb type naming convention to search for it easily. eg Buttons | Primary | Light | Large, Buttons | Primary | Light | Medium etc etc

#3

Then you lose the benefit of the “views” functionality altogether, right?
(i.e. on a border size change or something, you are going to need to update all the pages). Furthermore, the library would explode, for buttons alone it would contain a whole bunch of entries, let alone if I’m going to add all the other controls.

#4

Well it depends what you are trying to acheive. You can use components if you want, and create a library of components so that you dont have to change them when you use them on every page. But I would generally advise against making buttons as components, since you will anyway have to check that the button looks OK on every page if you are making an adjustment. It depends what you are trying to acheive.

For me I find that creating a template and saving it as a library is the best course of action. I only really use components for menus, headers footers etc that do not change at all page to page

#5

Thanks. I though the ‘Views’ functionality of components was was a good fit for creating primary/secondary/etc variants of a button, as Axure even suggest this in their reference. But it turns out this is useless, because you end up with buttons that only allow you to overwrite the text, but you cannot change the resize behavior of the component (i.e. make the button auto-fit the text), nor can you resize a component instance, or put any interactions on it when using it (unless you mimic them all as events for the component). Okay, so components are out.

@axureboutique.com did show a neat trick in this thread though, by putting the components not in a RPLIB, but in a regular RP file, you can import and replace all instances in your RP design files, thus achieving what I think the aim of library is anyway. So shame that components are not suitable for core UI elements.

Still torn on how to proceed with creating a maintainable library of styled buttons in different variants, tabs, checkboxes, etc (essentially all regular form controls).

#6

Axure’s component functionality enables the creation of variants similar to Figma, including variations in colors and shapes. The Widget style manager further facilitates this process, making it easily achievable.

I invite you to watch this video, where I demonstrate the implementation of changing all component instances when the component is modified.
Face%20Face

Combining the use of the components as a widget library that I mentioned in this post, you can implement changing a component instances when the component is changed.
A maintainable design system component library can be made.

FOR AXURE UPDATES

To enhance Axure’s capabilities, it would be beneficial to elevate the placement of components to a higher level and enhance their flexibility in this collaborative design era. @axure:muscle:

It would be helpful if I had the option to choose whether to use the component views’ inheritance relationships or have them function like dynamic panels, where each state does not affect the others. Such an approach would provide maximum flexibility and efficiency.

More contents in axureboutique.com

#8

Thank you for your extensive reply, really appreciate it!
But I am afraid Axure’s variants are nothing like Figma’s. Unless I am missing something, you can’t specify the ‘parameters’ of the variant. Axure seems to pick text for a button and that’s it. Need an icon too or some booleans too? I think you are out of luck?

And as I explained above, going the component way seems a bad idea, because it seems that an instance of a component can not be resized. So for things like lists, tabs, etc. that seems useless. And on top of that, you loose all interactions. The only thing you can do is create custom events, like you did in your video. If the only thing you need is one for a button click, okay. But that is not viable for a whole library, unless you are willing to duplicate each interaction as custom event. That will take a ridiculous amount of time.

Still hope I am missing something here, cause creating an easy maintainable library based on a design system seems like basic functionality for a design tool.

#9

I understand your concerns regarding Axure’s variants and its limitations compared to Figma. It appears that Axure’s variants lack the ability to specify parameters or include additional elements such as icons or booleans, which can be a limitation. Additionally, using components in Axure may not be ideal for resizable elements like lists or tabs, as it seems to restrict resizing and remove interactions, except for custom events.

I believe the aspect of Axure components that should be improved the most is its functionality for variant resizing. This would greately increase its flexibility.

Figma or sKetch is powerful, but in my opinion, it is too complex for UX design and tends to be a UI design tool in styling.

I can’t understand what you mean by losing all interactions. After making a widgets into a component, its interactions still exist, if you want to interact with outer elements of a component, you may need add Raise event interactions for all its views.

#10

Blockquote
I can’t understand what you mean by losing all interactions. After making a widgets into a component, its interactions still exist, if you want to interact with outer elements of a component, you may need add Raise event interactions for all its views.

That is exactly what I meant. The interactions are only available inside the component, and can only target items within the component. So if you make a button as a component, you can not put any interactions on it in the place you are going to use it. The only thing you can do is create evens for all the actions you need, essentially linking all internal triggers through via custom events.

#11

Indeed, this is another inconvenience of using components. You cannot directly add or modify the interactions of elements within views on the page canvas. All interactions of components must be edited within the component’s internal canvas, where each view’s elements are defined. On the page canvas, you can only overwrite the content of individual views of the component. This might be a result of an engineering-centric mindset. While it reduces the coding work, it increases the workload for users.

It would be nice if components were as flexible as dynamic panels, which are really powerful and free.