Skip to main content
Solved

How do these menu buttons function in appearance

stefan cargoski

Hello Figma Community.

 

I’m fairly new with Figma, and also with web interaction concepts, because I’m coming from the world of print design. I have a question related how this particular concept works with a 6 state button function. I’m confused why it’s set up the way it is, with the hover states being on 5 & 6, and not on states 3 & 4. One would think, the button by default is OFF, and when the mouse hovers over the button it would HOVER, then when pressed it would make some change of colour (button Background or text colour Change). 

 

I have been assigned a task in my group, and this is the layout of the buttons, Can someone please explain how this works, and what would be a good example, by making a mock up I could possibly follow the layout. 

 

 

 

 

Thank you.

 

 

Best answer by KennLucas

Who cares what the order is? That has nothing to do with function.

 

i would more concerned that whomever has given you the task is not very strong in this.

 

There are not “on and off” states. It is basically:

 

base = default

hovered = when hovering with cursor. Not relevant on mobile devices.

focused = when interacting with keyboard or voice

pressed = called "active” in HTML, is when clicked or held down

selected = might be if the item had a state to indicate it was the active item

disabled = self explanatory


but no matter the state, the order makes no difference in function and is not where you should be focusing.

 

not sure if you are being given this task as part of a work assignment or some class project. What is the “group” that you mentioned?

 

In either case, I would question the authority here.

 

 

 

 

View original

    4 replies

    Raphael_M
    • Raphael_M
    • Active Member
    • 328 replies
    • March 23, 2025

    Hi, Stefan.

     

    I think you need to understand first the user actions that would trigger the button's state.

     

    On web, the button state would always start at default (unless it's disabled) then when cursor is on top of the button the on hover state would trigger then after that when you click it or press it that's when the pressed state would trigger. But on mobile since there is no cursor, the hover state would be skipped and only the pressed or onclick state would be triggered. 

     

    The pressed state would only trigger when you click the button, so it'll depends on which state would it be first before the user clicks the button. The most common visual design on pressed state is a ripple effect on the button.

    • WEB - on hover → pressed
    • MOBILE - default → pressed

     

    But on web, there is another state which is on focus when the user is using a keyboard and not a cursor.

    stefan cargoski

    Thank you for your explanation Raphael.

     

    I'm starting to get more familiar with the functions, and your information is helping me.

     

    But why has the team member given me the buttons in that order: Default, Pressed, Hover rather than Default Hover, Pressed? 

    KennLucas
    • KennLucas
    • 220 replies
    • Answer
    • March 23, 2025

    Who cares what the order is? That has nothing to do with function.

     

    i would more concerned that whomever has given you the task is not very strong in this.

     

    There are not “on and off” states. It is basically:

     

    base = default

    hovered = when hovering with cursor. Not relevant on mobile devices.

    focused = when interacting with keyboard or voice

    pressed = called "active” in HTML, is when clicked or held down

    selected = might be if the item had a state to indicate it was the active item

    disabled = self explanatory


    but no matter the state, the order makes no difference in function and is not where you should be focusing.

     

    not sure if you are being given this task as part of a work assignment or some class project. What is the “group” that you mentioned?

     

    In either case, I would question the authority here.

     

     

     

     

    stefan cargoski

    Thanks for your input Lucas.

     

    As its common sense, to have the functions from Default/off to hover, then click to activate a button behaviour. 

     

    This is a group assignment, some B class type of media college. I'm only following what the instructor is telling the class. 

     

    What confused me is why the mouse functions can go back and forth and not in order. but you said it doesnt matter. So is up to the developer to make the button functions appear as he likes with code?

     

     

     

    Reply


    Terms & ConditionsCookie settings

    Cookie policy

    We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

     
    Cookie settings