Designers and developers can better manage their sites’ style variables using manual reordering and bulk actions. Organize your variables exactly how you like them, whether that’s structured type and sizing ramps, quick semantic color groupings, or even a bit of cleanup on design tokens you no longer need.

For keyboard power users, the updated Variables panel also includes faster keyboard navigation and controls.

Reorder variables

To reorder variables with drag and drop, open the Variables panel in the Designer and:

• Hover your mouse over a variable name (or a variable group name!). A drag handle icon will appear to the left of the name.
• Click the drag handle and drag the variable or group until the blue drop indicator line appears in your preferred location.
• Release the drag handle to lock the new position in place.

To drag and drop variables with a keyboard:

• Navigate to the variable (or variable group)’s drag handle to the left of its name, using arrow keys.
• Press ENTER or SPACE to “pick up” the variable.
• Use up/down arrow keys to “drag” the variable. The blue drop indicator line will follow your keystrokes.
• Press ENTER or SPACE again to “drop” the variable, or press the ESC key to cancel.

Variable order is also maintained when shared via a Library.

Bulk actions for variables

You can also edit variables in bulk in the Designer using the Variables panel:

1. Press the “Select” button in the Variables panel header to enter selection mode. Alternatively, you can hover over a variable name and press the checkbox that appears.
2. Use the checkboxes to select your desired variables. The checkbox in the variables list header selects all variables in the list, and the checkbox next to each group name selects all variables in the group.
3. Once you’ve made your selections, you can use the buttons in the Variables panel to group or delete these variables. Alternatively, you can use the drag handles to move these variables around in bulk.

Bulk actions can also be completed using the keyboard. You can press ESC to exit selection mode without closing the Variables panel.

Faster keyboard navigation

This update also introduces faster keyboard access for the Variables panel. To navigate the variables list quickly, you can:

• Use the TAB key to jump between variable groups
• Use up and down arrow keys to navigate between variable rows in a group
• Use left and right arrow keys to navigate within a variable row (note, some controls are disabled when in selection mode)

‍

You can start organizing your design tokens today in the Variables panel, or learn more about building with variables in Webflow University.