Tip: Adding color to components with no text color property

· Posted by Mike in Products and tagged , , · 7 Comments

Mockups can seem like an iceberg. There's so much beneath the surface in terms of advanced features. The features that seem to be hidden are learnable, but we don't surface them until you are ready to use them.

The app is designed this way on purpose to make only the properties available that are necessary for quick ideation. This tool is made for low-fidelity, and we're trying to protect designers, ourselves included, from getting precious. We believe that giving you fewer choices when you're ideating lets you focus on the ideas rather than the presentation, so the necessary attributes are properties, and sometimes the optional ones are available if you know how to use them.

One typical component that we hide text color properties on is the Arrow / Line component. Labeling is an option and most likely rarely used by the majority of our users. But if you wanted to color the text, all you would need to do is add the color macro to the input. So for red, use the hexadecimal color value #f0000 like so:

{color:#ff0000}text{color}

Let's look at that a little more closely:

There are other text formatting rules you can learn by checking out the Basic Text Formatting section of our documentation.

Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.

Comments (7)

  1. Hi, David. Currently, in the List control you’d have to select the color property for each row. The color macro should work for each row of your List, like so:

    {color:#ffffff}Item One{color}

    There’s more info about this macro in our docs.

  2. in a “list” box I am unable to make the background color match the area it is pasted to and also cannot change the color of the text.

  3. Glad you could figure it out, Burnie!

  4. I did it! Works only per cell; needs [space] after {} and before {}.

    Burnie G.
  5. Unfortunately {color} seems not to work inside a table.

    Burnie G.
  6. Jon,

    What do you mean when you say, “I was trying to use the color macro, while having Wingdings in the config file?”

    You should be able to do use color macros with dingbats as with any characters in any component that supports color macros. Here’s a paragraph component using color macros.

  7. Hey Mike,

    I was trying to use the color macro, while having Wingdings in the config file, but there is no way to do this. Do you think that you could set a way for users to be able to use Wingdings for custom checkboxes, callouts, etc, while still being able to use the color macro?