I have semantic-level variables for various component widths, heights, and spacing. In order to apply them to an element in the UI, I have to click the select input field, which surfaces the drop-down. Then I have to click the “apply variable” option. Then I have to scroll to find the variable I want, and then I have to select the variable. This results in 4 user interactions, which is unfortunately slower/less intuitive than typing in a fixed number value.

2 ideas to simplify this process:

1. a shortcut when clicking the select input field to automatically open the variable list


2. (preferred) allow users to type the variable name in the input field to and surface a search drop-down.

For example, if I had a variable defined as col-8, with a value of 856 and number scope of width/height, and I typed in “col-8” into the width property text input, a drop-down would surface with the col-8 variable focused and I could click ENTER to apply the variable.