Variants on components

newbie-question
#1

Similar to Figma and Framer: Variants are so powerful. I’m trying to figure out how to do similar in Axure. Example: you have a Travel company ‘primary button’ that says Book Now with an icon (airplane) on right side/ INSIDE the button, now maybe you want the same button but as a “variant” with “Book Now” and now instead a ‘hotel icon’. You could have entire Design Library of these variant sets and be able to access at any time in the system.

I know Axure isn’t like Figma or Framer, but I want to learn more about how to add more complex variants similar to these programs. Any tips or suggestions? thx

#2

have you looked in the component view feature and replacing text in component instances?

#3

Like @bamorris mentioned, Axure’s “component” feature is the closest equivalent to what you’re looking for. You’ll have to build the components a little differently than you would in Figma however.

There are lots of different ways to go about it, with varying levels of complexity. In my opinion, font icons are a good option. You get all the ease of use of a font (change color, size, spacing, alignment, etc.) and you don’t need to manage a massive collection of image files.

You could create a dynamic panel, with each state being its own icon, but it’d be labor intensive to initially setup.

If you want to get really wild, you could put all your icons in a repeater and use interaction logic to determine what icon you want.

These are some really crude, sloppy examples of what I’m talking about:
dynamic icon buttons.rp (115.0 KB)

#4

If you mash @huban’s dyn panel and repeater ideas together you’ll find that it’s not very labour intensive in the long run. Definitely a bit of upfront cost but once it’s done it’s largely unchanged (unless your icons change). I have two others among the many available approaches huban mentioned.

  1. Create an icon with images, shapes, whatevs
  2. Create a dynamic panel around the icon
  3. Make a state for every icon, and give the state a meaningful name - like the name of the icon for example
  4. Make this dyn panel a Component
  5. Create a repeater from this component instance - remove all but one row and all but one column, break the autogenerated connections
  6. On the Interactions for your repeater, under Item Loaded add: Set Panel State (Select your dyn panel in your component as Target, and set State to Value, set Value to “[[Item.Column1]]” - or whatever you called your column)
  7. In the value for Column1 row 1, enter a value matching a dyn panel name.

Then you can use this “icon library” component all over the place and edit the repeater value to whatever icon you want to use.

In case you already have a repeater in use (no nested repeaters are allowed), or for whatever reason the repeater method sounds onerous, another option is to follow the steps above up to 4, and then instead of making the repeater, you group that icon library component by itself.

Use the name for the icon you would’ve put in the repeater as the group name and then on the group interactions, On Loaded add: Set Panel State (Select your dyn panel in your component as Target, and set State to Value, set Value to “[[This.name]]”). This second method does have the downside that the correct icon isn’t displayed in the editor, but it will appear correctly on the prototype player.

I’ve included both of these examples in this attachment: icon library concept.rp (89.9 KB)

#5

Thank you for taking the time to explain in simple terms and with great examples-this was super helpfukl and an eye opener!

#6

Thank you for your help. I learned a bunch from your walk-thru-steps! Also, everyone on this forum is super helpful and consider myself lucky for your reply!