States

States are visual representations of a specific element or component at that particular time. Below we'll talk about the different states that you can edit in Ycode, and what each state does, exactly.

Switching to different states

In the editor, open the Design tab on the right side and navigate to States.

The default neutral state shows your website in its regular shmegular state. If you want to edit website elements in another state, click Neutral, open the menu and pick a state.

Now that you know how that works, let's explain what each state means.

Active

This state means that the element is highlighted, whether by default or initiated by the user.

Example: Your website has a menu with different menu items. The menu item that’s selected is the active one.

Adding an active state

Open a project and choose an element from your canvas. We chose the H1. Then open the layer styles, click on neutral and choose Active from the dropdown. You will see a green color around the element you’re selecting.

Go to Typography and change the color (e.g. red like ours). Once done, return to the Neutral state.

If you now preview the app and select the H1, it will change to the new color.

Hover

This state happens when someone places their cursor above an element, hovering over it.

Tip: Most touch devices don’t make hovering possible, so on smaller screens your hover design might not be shown.

Adding a hover state

Open a project and choose an element from your canvas. We chose a button. Then open the layer styles, click on neutral and choose Hover from the dropdown. You will see a green color around the element you’re selecting.

Then open Backgrounds in the design tab and change the color. We picked a default green color. Once done, set the state back to Neutral.

If you now preview the app and hover over the button element, it shows the green color we chose.

Focus

This state happens when someone highlights an element, using an input method such as their keyboard or screen reader (voice). Focus states are also often seen for links and input fields, like in a signup form.

It’s good practice to add a border or shadow to focus items, so people can see this visual cue and follow where they are on the website. Though it can make your design a little less clean, it does guarantee a great user experience. Sometimes you have to pick your battles. 😉

Adding a focus state

Open a project and choose an element from your canvas. We chose the logo text link. Then open the layer styles, click on neutral and choose Focus from the dropdown. You will see a green color around the element you’re selecting.

Then go to Typography and change the color (e.g. purple like ours). Once done, return to the Neutral state.

If you now preview the app and click on the link element, it shows the purple color we chose.

Disabled

The disabled state is used when you want to disable elements.

This state can be used in many different situations, like to showcase that a product is no longer available and a shopper can't purchase the product.

Current

By styling current links, you're giving web visitors a visual indication of the page they're currently visiting. This might seem like an insignificant detail, but it can improve someone's experience on your website or app a lot!

Adding a current state

For this example, we'll use one of the many Ycode templates. If you have an existing project with a navbar and pages, great! Otherwise, you can quickly create a new project and use a Ycode template.

Navigate to your Ycode dashboard and click on New project. Then select the Product website template (for example), select Use template, and name your project.

Open your project and let’s get started!

Our goal is to show a website visitor that when they're seeing the About page, the text link element in the navigation bar is highlighted (aka styled).

First, go to the top-left corner and select the About page from the dropdown menu. This brings you to the actual About page. Select the Header and then click Edit master component. You can edit every element inside this component. (here's how to create components)

On the About page, select the About text link element in the navbar. Then open the Design tab on the right. Under Layer styles, you will see neutral. To change this view, click on it and choose Current. You will now see a green color around the element you’re selecting.

Now go to Typography and change the Color—for example. You can style the link in any way you like, and even add transformations or effects. We decided to keep ours simple and change the link text to pink.Once you're done, change back to the Neutral layer style and press Done editing on the top of your canvas.

If we now preview the website, you'll see that when a visitor lands on the About page, the text will be highlighted in pink. You can now repeat this process for all remaining links in the navigation!