Using Storyboard variables to encourage consistent styling of your UI

Storyboard variables are data bindings that can be found throughout an application and are responsible for enabling dynamic content during runtime. Variables can contain values of properties for render extensions, such as font sizes, image names, rotation values and alpha. They can also be used for parameters of actions like screen transitions and timers.

Variables can live on every level of the model structure, at the application, screen, layer, group or control levels. If a variable exists on one of these levels, it's value can still be referenced anywhere in the application using its fully qualified name. 

Storing variables at a top level, like to the application or on a screen, is a great way to inject the concept of styling to your UI. Having generic reference variables in your application for things like colors and font sizes helps to keep uniform guidelines when building up your design. This is a common practice in web design with HTML and CSS, using a predefined set of style guidelines to apply to your interface. 

For example, here I have created a few styling variables at the application level to use throughout my project: 


Now as I continue to build up my UI and create new controls, I can bind the properties of render extensions to these variables as I go: 

Organizing the values of render extension properties in this way is useful for iterating your design. This is also important if there is need for theming/branding in your project. Because multiple render extensions are connected to the same variable, if that value needs to change, that change only needs to be applied once instead of every instance of that value. 

Top-level variables are not only useful for render extensions but they also can be helpful in standardizing functionality of an application. For example, if there are multiple screen transition actions in your application, you can use a variable to keep a consistent timing of every transition: 

Adding top-level shared variables to your application will help to keep a consistent UI design, and in turn will save you time during the development stage of your project. To learn more about variables and how they can be used, check out this video: https://support.cranksoftware.com/hc/en-us/articles/360058857972-VIDEO-Introduction-to-creating-event-variables