How do we create a style for text hyperlinks?

Ask the community
1

By text hyperlink I mean this.

So let’s say we want all text hyperlinks in our design (which can be part of a text layer and not the entire text layer), to appear as follows:

  1. Not underlined
  2. For the text color, use a color style (for example, let’s say “primary color”, which is #F88078)

How do we set this up?

1 Like
2

You can create a Text Style and apply it to every link manually. There is no such special thing as “hyperlink style” in Figma.

1 Like
3

Yikes. This seems like a basic thing to set up when defining a theme within a design system (the styling of text hyperlinks).

I wonder why this exception exists. Having to manually apply a style for every text link in a design doesn’t make much sense, especially when Figma has its Styles capability. :thinking:

7 Likes
4

Possibly part of the reason this does not exist is that it is a bit more complex than it first appears.

Hyper links have multiple states (default, active, focused, hover, visited). Those states can have different combinations of text styles and colors.

So really there is not one “link style.” Maybe better to think of it as an in-line (text) component or something (I’m new to Figma, so I’m not sure about this).

2 Likes