When you first open Sigma to build an app, workbook, or dashboard, it may seem natural to load tables and datasets immediately. However, applying the “Look & Feel” first is best practice. Look & Feel is part of Sigma’s recommended blueprint for planning before building, described in their B.U.I.L.D framework (the L in the acronym). If you’re unfamiliar with this framework, see my previous blog for details. As a refresher, B.U.I.L.D outlines the aspects to define and plan before building. Assuming the framework has been considered before opening Sigma, the theme should already be finalised. Starting with the Look & Feel not only keeps the end goal in mind, but is also the most efficient approach. Here is how you can set up your Look & Feel before you start building.
Once you have navigated to a new workbook, you can immediately start implementing your Look & Feel. Head to the panel on the right, in the settings panel click on ‘Workbook settings’
Here you can customise the default presets of the workbook, including colour, font, layout style, table style, layout settings, and workbook navigation. The most notable edits, from my perspective, are within the workbook navigation settings. Here you can add a header and sidebar that remain consistent across any new pages added.
By clicking both the header and sidebar elements, you can customise it through the settings panel, including setting it to remain fixed in position while scrolling. In the format pane, you can also add a background image, which can be used to create custom banners that suit the theme of the workbook.
If you click the canvas and navigate to the format pane again, you will see the same upload image option under the background image dropdown. Having the ability to add custom images for headers, sidebars, and backgrounds provides creative freedom when defining the Look & Feel of the application.
Now that you know where to add custom banners for the header, sidebar, and background within Sigma, the next question may be: Where should the header be created? Which colours should be used? How can a background image be made? Let me show you how I do it.
First, the colour theme needs to be decided. If this is for a client or company that already has a colour scheme, use those colours. However, if you are creating an app without an existing colour scheme and need inspiration, I would recommend using Dataviz Color Palette Generator from DataMonster. It simplifies the process of selecting colours by using AI to generate professional colour themes. What makes it particularly useful is the ability to create palettes based on themes, moods, or brand styles while also checking for colour-blind accessibility. Instead of manually testing combinations, you can quickly generate and preview palettes directly on chart examples before exporting them into the project.
Here, the inputs have been configured with a theme, style, and palette type. You can also extract colours from a branding image, such as a company logo or website, and the generated colours will appear underneath. Once you are happy with your configuration, click generate. You will be met with a screen similar to the one shown below.
Clicking download the PNG will download a container showing the colours, names, and hex codes. This is already useful because elements in Sigma can be updated using the hex codes directly, or by using the magnifier tool to sample colours from the PNG. The next step is to create a gradient header using the generated colours.
To do this I use Adobe Express’ Gradient Generator. By uploading the palette, the gradient generator can be used to create a banner for the header. I decided to remove warm sand and coral dusk to reduce clutter. Typically, using three colours is best practice for a header. It should look something like this:
At the bottom left of the image above, you can see the banner preview, and across to the right you can download the gradient. This can then be uploaded directly into the header on the first page within Sigma. Now that the gradient for the header has been created, the next step is the background image. The simplest option is to take the lightest colour from the gradient and use that as the page background to keep it neutral.
Now that the colour theme, gradient, and optional background image have been created, they can be implemented into Sigma. To add the gradient to the header, click the header and navigate to the format pane. Open the background image dropdown and upload the image, which should be called ‘My Colour Theme’. To add the background image, repeat the same process but make sure the page canvas is selected first. If you want to use a single colour from the palette instead of an image, navigate to the format pane and open the Page Style dropdown. Click the paint icon and either enter the hex code from the PNG download or use the magnifier tool to sample the lightest colour from the palette (for me, Pale Surf). The page should now look something like this:
Now that a blueprint for the pages has been created, duplicate the page a few times before adding tables and data elements. This removes the need to repeatedly add the background image to every page. The header will remain consistent across newly added pages because it is part of the workbook theme.
Sigma Apps contain modals, and usually quite a few of them. Before adding tables and data, it is best practice to create a modal template design as well. Adding a header directly into a modal is not currently an option, so the best approach is to use containers instead. Once the modal has been added (by clicking the arrow next to the Add Page icon), a few formatting settings need to be adjusted to allow the header container to fit neatly within the modal.
Click the modal canvas and within the Modal Style dropdown, turn off ‘Padding’ and ‘Element gap’. Then, within the Header dropdown, turn off ‘Show title’ and ‘Show close icon’. Once these settings have been adjusted, drag a container into the modal and resize it to sit at the top. This will create the appearance of a header. Adding the banner image as the container background, alongside a background colour or image for the modal canvas, will ensure the modal remains consistent with the overall theme.
You may notice that the pre-built close modal button was disabled while adjusting these settings. However, what if a close button is still needed? Turning the default close modal button back on introduces a gap above the custom header container. Instead, a workaround can be used: create a ‘Close modal’ action on an image. By placing a close icon image within the custom header and assigning the Close Modal action to it, the header structure remains intact while still providing close functionality.