Skip to main content

I have created this graphic in illustrator representing a menu, which allows you to scroll through the various pages of a website. When you hover your mouse over one of the numbers corresponding to the page, this line positions itself next to the pointer of your mouse on the number of the page you stopped on. The problem is that I can’t create it in adobe xd. I create a component for when I hover the mouse over the number 1. I insert the line in the component, so that it moves together, but the problem comes out, when I create a second component, with the number 2. the line being inside component 1 I can’t move it. I cannot create a second line and hide the first one, because it is on another component. I tried to create a single component, with both the numbers (1 - 2 - 3 etc…) and the line inside, but by doing so, I could not select the number and whichever number I placed the mouse over, the line would always be placed in the same place.


I apologise for a very poorly made explanation, I am using the translator to make myself understood on a very technical subject of which I am a novice. I kindly ask for your patience.

Thank you in advance for your time.

Screenshot 2024-02-05 231034

You said adobe XD in your post! Are you trying to create this in Figma?


Check the solution below in the attached Figma file. You can either use variables to change the page variant or you can create one long page with different sections and anchor the page location using ‘scroll to’ trigger.


pagination.fig (103.7 KB)


pagination

I thank you for your response! Indeed that was exactly what I was trying to do. Only you did it better. In the two days that I had posted this question, I got stubborn and managed to make the menu (only mine has many more problems than yours).

You having the premium version of Figma you were able to use the variables, which I until now have always ignored completely.

At the end of the day the menu came to me too, only it is much more cumbersome, and I don’t know for what reason, the line to the right of the numbers, sometimes moves by its own will.


Looking at the file you sent me, and analyzing it, I realized that I didn’t understand anything, of what you created. many things you use, I have never seen and I don’t even know what they are for; but I thank you very much for the time you used to help me.


This is the page I am creating, and the “method” by which I have managed so far.

You don’t need variables to achieve what you are trying to do. Regarding the issue around the line moving on it’s own - I think it has to do with the hover effect and timing. Obviously, I can’t tell without seeing the editable file.

I apologize, I didn’t realize what I was sending you

I didn’t know I could make such a choice

link for the file

Reply


Terms & ConditionsCookie settings