Qt Design Studio - Sketch Bridge tutorial part 2

Sketch, Qt Design Studio, UI/UX, Tutorial

Welcome to the second part of the Sketch Bridge for Qt Design Studio guide. At the end of the first part, you created the first button and made it work in various states in Qt Design Studio (abbreviated as qds in the rest of the tutorial). In this part, let's go back and create a menu component from instances of this button, and look at overriding the mcons and text for each instance.

Part 2.1 - Creating a Menu Component Using Button Instances

So let's open the Sketch file and start by creating the background menu, making it big enough to fit all four of your buttons. For now, let's keep it pretty simple - rectangular.

Again, you need to create a rectangle, convert it to a symbol, and then delete this instance and work on the main symbol on your symbol page.

It's possible to adjust the size and colors of the rectangle until you're happy, in which case it's possible to leave the single merge settings as you want a simple single asset to start there.

Also give the background a qml id, in this case myMenu_Symbol_background .

Once you have the background menu, you can start using symbols to instantiate the buttons from the main button component that you created in sketch and added the interaction functionality in Design Studio.
To do this, go to the Sketch Menu to add assets, the plus button at the top and go to symbols/document (symbols/document) - this displays the current symbols available in the document. There is only one symbol here for now, your button, so let's go ahead and add that to the new menu component.

Now you have the first copy and you can simply repeat this process, copy, paste or use alt + drag to add three more buttons to the menu.

Once this is done, you need to check the qml ids assigned to the new symbol instances, and while you do this, you can also make sure the menu has a good qml id.

So, let's start with the menu, since this is also a symbol, we use a naming scheme similar to the last one and call it myMenu_Symbol .

Now we can look at the buttons themselves, so in this case we will use the following naming scheme for these cases. It will look something like this:

myButton_myMenu_1
myButton_myMenu_2
myButton_myMenu_3
myButton_MyMenu_4

But what would be even better is a specific name for each button role, so let's think about what you want these buttons to do. Based on what that user interface could be, we can come up with an even clearer naming scheme for these buttons.

One thing you shouldn't do is change these IDs in the middle of a project, although in theory it's possible due to the merge mechanism keeping track of these ID changes, so it's a good idea to stick to the naming scheme throughout the process.

So instead let's use these IDs:

myButton_myMenu_home
myButton_myMenu_dashboard
myButton_myMenu_profile
myButton_myMenu_settings

This makes it clearer what each instance is for, and it also ensures that you have unique identifiers for each instance of your symbol.

At this point, we could have already re-exported it to qds, but while you're here, let's prepare a couple of extra things for the buttons by adding a label and an icon.

Part 2.2 - Preparing the symbol for property overriding

Let's start by adding them to the main button symbol, so let's get back to that now and get to work. You can start with the label and it's good to make sure it's visible but still under the mouse hotspot you added first.

Now go back to the Sketch Menu with the + symbol, select the text element and add it to your design, making sure it's the second layer, right below the mouse area.

Now make sure the textbox is a fixed size that spans the full width of the button and also that the text object is center aligned so when you override this text in your instances the new label will be centered and when you export to qds these properties too will be transferred.

Since we need to override this text, let's just use "default text" as the placeholder here.

Again, make sure the text object has a nice qml id, let's call it myButton_Symbol_label and then we can drag it so it's under the mouse area, and we also need to make sure the layer has the same name as the qml id .

Now to add an icon or actually three versions of the same icon at this point you need to use the placeholder icon for the main character and then go back and change the individual icons so you can just drag another shape, something as simple as a triangle, by going to the shapes menu (shapes menu) to sketch by selecting the triangle and dragging it.

It is worth making sure that it is also under the mouse area, but above the background layers (background layers). Once this is set, you need to duplicate it twice to have a version for each state of your button (default, hover, on click) and make small changes to each version so it can be tested in qds later.

In this case, it's worth just adjusting the colors a little, as these are graphic elements that we will replace later. It doesn't really matter what you do here as long as you can tell them apart.

Now, as with all layers, it's worth changing the IDs and checking the export settings, making sure all icons are set to export as children in this case. Let's name the identifiers:

myButton_icon_placeholder_default
myButton_icon_placeholder_hover
myButton_icon_placeholder_pressed

It's also worth making sure the layers have the same name as the IDs and are set to export as children, then drag them under the mouse area in the layer navigator.

With this set, you can go back to the menu symbol and see how it affected your instances, and as you can see they now all have icons and text labels. We'll come back and deal with icons later, as there are several different approaches that can be used for this, and it's worth looking into them in detail while you can use labels to create the first of your property overrides.

As a quick explanation for overriding properties, with symbols in sketch, you can change some parts of the symbol instance to something new. This will not affect the original master symbol, but will only make these changes to the local instance you are making changes to.

Although there are many different types of qds character overrides in sketch, developers only support a few of them, the main one being text. The other override is the symbol itself, but since this is a fairly advanced concept, it's not worth touching on for now, and instead we'll focus on the text version only.

To do this, you need to go to the first instance of your button, which is called home, and in the sketch properties panel for your button, you can see that there is a new field to override the text. To use it, you can just type new text here, so for this first instance, you can just add "Home" to the override text, and see that in this first case, only you have your new text.

When we re-import this later in design studio, we get the alias property for the button component for this text field and automatically add the text "Home" to this instance's alias. For now, let's finish adding a new text label to all your buttons, and then you can export your design and continue working with qds.

So let's add text to the second instance, in this case "Dashboard" ("Toolbar"), the third - "Profile" ("Profile"), the fourth - "Settings" ("Settings") .

Now you can also see why the button's fixed-width text box and used the center-align option, since your text is now always well-centered in your button design, no matter how long it is.

So let's export it again, this time we'll get a metadata override warning, which is normal, so let's continue and when it's over we'll get back to qds.

Part 2.3 - Merging Imports

With qds, make sure you're in the right project and then repeat the steps to import your metadata file by clicking the import assets button in the qml library and calling the asset importer. It is very important to make sure you select the merge option for the import, if you forget to do this all the work you did in the previous lesson will be overwritten. So please make sure you have the merge option selected before proceeding. This setting is persistent between sessions, so you only have to do this once, but you need to check it every time you import for security purposes.

As long as the merge is enabled, you can go ahead and import your projects and, assuming no errors are made (there should be no errors or warnings here), you can go ahead and look at your import.

The first thing to check is the new menu component, so let's look in the myMenu_Symbol.ui.qml project folder and open it in the form editor.

You should see a menu with four buttons and alias text for each, since the states and interactions for these buttons have already been created this menu should be fully functional, except for changing the icons, which we will do a little later.

So let's test it out by running the live preview and then hovering over the mouse, click on the buttons. It can be seen that thanks to the work done in the previous tutorial, you have a hover and click state for each newly added button without having to duplicate the work. This should show you the power of good componentization, which will surely be appreciated by the developers you outsource this work to.

Now, when you need to make changes to the general behavior of these buttons, you just need to go to the main component, make your changes there, and they will be automatically applied to all instances. Which we will do now, making the icons in the correct state.

So let's now switch to the button component and work with the icons.

With the button component active in the navigator, you can see three new asset layers for each icon. We need to repeat the steps we did in part 1 and make each icon visible in each state, so let's go through each state and use the visibility "checkbox" to do that. Make sure the default value is the only one visible by default, hover in hover state and click in pressed state.

With that done, you can test your button directly with the preview button and you should now see that it fires right away. You can also quickly test this in your menu component to make sure it works across all your instances.

The next step is to go back to sketch and create individual icons. Before that, you need to prepare a button to replace the icons in each instance, and you can do this by making your own aliases here in qds. So let's do this by making sure your component is in its base state and then selecting an asset for the first of the icons, by default.

Then look at your properties panel by selecting it in the navigator and the property you are interested in is your icon's source file, then use the action icon to bring up the menu and select the option to add an alias. This will mean that from the icon instances in your menu component, you can set a new icon asset for that button.

Let's repeat this step for each of the icons, hover over and then click. By setting the source icon alias, you can take a look at your menu component.

So let's load the myMenu_Symbol component in the form editor and select one of your button instances. Once selected, the properties panel on the right shows all the available aliases for that instance, showing the text alias you added to sketch and the three different icon state aliases you just added to qds.

We'll come back to them again after we create some icons in sketch and change them later.

Part 2.4. Icon development

With sketch open, we will create an artboard for icons only. Artboards are usually always components in qds after import, we will use them later when we come to developing screens, but for this case we will import assets from this artboard and will not generate qml, but more on that later.

For now, you can use Sketch's feature to create a separate page for assets to keep them separate from your screen design later, so let's add a new page in the top left sketch menu and we can call those assets and then drag the artboard to start creating icons . It doesn't really matter the exact dimensions of this artboard, as it's just a place to store assets right now, so just make sure it's big enough to hold this artwork and then you can focus on creating the icons.

Let's draw them directly in sketch and use some combined shapes to look at a good way to use the Bridge plugin's merge feature.

So let's start by drawing the house icon. The rectangle and triangle should do the trick, once you have both shapes, you can use the combo shape to create one element that will become the icon, and then take a look at the structure of your composition that works here with the Bridge plugin.

This way, the combo shape looks like a separate mini-component: the combo shape acts as a parent to the two child layers that are drawn underneath it, and since only one icon asset is needed, it can be ensured that the combo shape is itself a child and two child layers are set to merge. To do this, you need to merge these two layers into one image on export, which will become the merged shape, so it will have the ID of this element.

This is a particularly useful technique when looking at a continuous workflow as minimizing the assets in a project, but always allowing you to go back and modify individual parts of the project in a sketch.

To make multiple variations for each icon just copy twice. By copying two additional versions of your icons, you can make some color adjustments, and since this artboard isn't used as an actual screen in the design, you can put all your icons next to each other and not worry about stacking them on top of each other. While we're making the first icon, we're also creating unique qml IDs for each of the icon and subform options.

Once you've made the first icon, you can quickly make the remaining three using the same technique as before, creating a multi-part combo shape, making sure the child layers of the combo shape are set to merge and the combo shape itself being a child, copying the icon twice and making three icon options.

The video is sped up a bit to save time, but as you develop, you need to check to rename your id's and qml layers each time, and check that only the top combo shape is set to export a child and all nested shapes are set to merge.

So now there are 4 icons with 3 variants per icon, let's go through all these qml ids and make sure they are unique and meaningful to your project.

First, let's take a look at the artboard itself. It's possible to call something as simple as iconAssets, even if you don't intend to generate qml from that artboard, it's good practice to make sure you always check your IDs. Hopefully at some point this will become second nature to you.

myButton_icon_home_default
myButton_icon_home_hover
myButton_icon_home_pressed

myButton_icon_dashboard_default
myButton_icon_dashboard_hover
myButton_icon_dashboard_pressed

myButton_icon_profile_default
myButton_icon_profile_hover
myButton_icon_profile_pressed

myButton_icon_settings_default
myButton_icon_settings_hover
myButton_icon_settings_pressed

It's also worth making sure that all child layer IDs are also unique, even if they won't be part of the project and therefore not that important, care must be taken to ensure that there are no errors during the import process. So instead of working with a naming scheme, let's just list them here in a simple way.

For example, the house icon uses this template for merged shapes.

homeSquare1
homeTriangle1

homeSquare2
homeTriangle2

homeSquare3
homeTriangle3

Now that all your icons are set up and the qml IDs are checked, you can re-export the project and return to qds to add these icons to your buttons. So let's hit the export button and overwrite the metadata again.

Now you can return to qds and to the asset importer. This time we'll use a different importer function and only import the new icon assets, unchecking "generate qml" and making sure the merge is still checked for future anyway. Go ahead and import your project again.

Part 2.5. Replacing the icon source

Now you can see that you have all the icon assets. There's no need to generate a new qml, as it's just a matter of changing the correct versions of your icons using the instance's alias properties. So let's select the first instance of the component and use the alias properties we created earlier for this purpose to do this. You can click your first button, the home icon, and in the properties panel, just use the dropdown to select new icon assets, so for each state, select the appropriate assets, and then you can check it out in preview mode.

You now have new working icons for the first button. Let's repeat this process for the rest of the icons until the correct icons appear in each instance, and then test them again in preview mode to make sure all states work.

Below is the qml code for both components:

MyButton_Symbol.ui.qml

import QtQuick 2.8

Item {
    id: myButton_Symbol
    width: 211
    height: 211
    property alias myButton_icon_placeholder_defaultSource: myButton_icon_placeholder_default.source
    property alias myButton_icon_placeholder_pressedSource: myButton_icon_placeholder_pressed.source
    property alias myButton_icon_placeholder_hoverSource: myButton_icon_placeholder_hover.source
    state: "default"
    property alias myButton_Symbol_labelText: myButton_Symbol_label.text

    Image {
        id: myButton_SymbolAsset
        x: 0
        y: 0
        source: "assets/myButton_Symbol.png"
    }

    Image {
        id: myButton_Symbol_default
        x: 0
        y: 0
        source: "assets/myButton_Symbol_default.png"
    }

    Image {
        id: myButton_Symbol_hover
        x: 0
        y: 0
        source: "assets/myButton_Symbol_hover.png"
    }

    Image {
        id: myButton_Symbol_pressed
        x: 0
        y: 0
        source: "assets/myButton_Symbol_pressed.png"
    }

    Text {
        id: myButton_Symbol_label
        x: 6
        y: 150
        width: 200
        height: 23
        color: "#ff818181"
        text: "default text"
        font.styleName: "Light"
        horizontalAlignment: Text.AlignHCenter
        font.family: "Helvetica Neue"
        font.pixelSize: 20
        verticalAlignment: Text.AlignVCenter
    }

    Image {
        id: myButton_icon_placeholder_pressed
        x: 70
        y: 55
        source: "assets/myButton_icon_placeholder_pressed.png"
    }

    Image {
        id: myButton_icon_placeholder_hover
        x: 70
        y: 55
        source: "assets/myButton_icon_placeholder_hover.png"
    }

    Image {
        id: myButton_icon_placeholder_default
        x: 70
        y: 55
        source: "assets/myButton_icon_placeholder_default.png"
    }

    MouseArea {
        id: myButton_Symbol_MouseArea
        x: 0
        y: 0
        width: 211
        height: 211
        hoverEnabled: true
    }
    states: [
        State {
            name: "default"
            when: !myButton_Symbol_MouseArea.containsMouse
                  && !myButton_Symbol_MouseArea.pressed
            PropertyChanges {
                target: myButton_Symbol_hover
                visible: false
            }

            PropertyChanges {
                target: myButton_Symbol_pressed
                visible: false
            }

            PropertyChanges {
                target: myButton_icon_placeholder_pressed
                visible: false
            }

            PropertyChanges {
                target: myButton_icon_placeholder_hover
                visible: false
            }
        },
        State {
            name: "hover"
            when: myButton_Symbol_MouseArea.containsMouse
                  && !myButton_Symbol_MouseArea.pressed
            PropertyChanges {
                target: myButton_Symbol_pressed
                visible: false
            }

            PropertyChanges {
                target: myButton_Symbol_default
                visible: false
            }

            PropertyChanges {
                target: myButton_icon_placeholder_pressed
                visible: false
            }

            PropertyChanges {
                target: myButton_icon_placeholder_default
                visible: false
            }
        },
        State {
            name: "pressed"
            when: myButton_Symbol_MouseArea.pressed
            PropertyChanges {
                target: myButton_Symbol_default
                visible: false
            }

            PropertyChanges {
                target: myButton_Symbol_hover
                visible: false
            }

            PropertyChanges {
                target: myButton_icon_placeholder_default
                visible: false
            }

            PropertyChanges {
                target: myButton_icon_placeholder_hover
                visible: false
            }
        }
    ]
}


myMenu_Symbol.ui.qml



import QtQuick 2.8

Item {
    id: myMenu_Symbol
    width: 250
    height: 850

    Image {
        id: myMenu_SymbolAsset
        x: 0
        y: 0
        source: "assets/myMenu_Symbol.png"
    }

    MyButton_Symbol {
        id: myButton_myMenu_settings
        x: 20
        y: 639
        width: 211
        height: 211
        myButton_icon_placeholder_defaultSource: "assets/myButton_icon_settings_default.png"
        myButton_icon_placeholder_hoverSource: "assets/myButton_icon_settings_hover.png"
        myButton_icon_placeholder_pressedSource: "assets/myButton_icon_settings_pressed.png"
        myButton_Symbol_labelText: "Settings"
    }

    MyButton_Symbol {
        id: myButton_myMenu_profile
        x: 20
        y: 428
        width: 211
        height: 211
        myButton_icon_placeholder_defaultSource: "assets/myButton_icon_profile_default.png"
        myButton_icon_placeholder_hoverSource: "assets/myButton_icon_profile_hover.png"
        myButton_icon_placeholder_pressedSource: "assets/myButton_icon_profile_pressed.png"
        myButton_Symbol_labelText: "Profile"
    }

    MyButton_Symbol {
        id: myButton_myMenu_dashboard
        x: 20
        y: 217
        width: 211
        height: 211
        myButton_icon_placeholder_defaultSource: "assets/myButton_icon_dashboard_default.png"
        myButton_icon_placeholder_hoverSource: "assets/myButton_icon_dashboard_hover.png"
        myButton_icon_placeholder_pressedSource: "assets/myButton_icon_dashboard_pressed.png"
        myButton_Symbol_labelText: "Dashboard"
    }

    MyButton_Symbol {
        id: myButton_MyMenu_home
        x: 20
        y: 6
        width: 211
        height: 211
        myButton_icon_placeholder_defaultSource: "assets/myButton_icon_home_default.png"
        myButton_icon_placeholder_hoverSource: "assets/myButton_icon_home_hover.png"
        myButton_icon_placeholder_pressedSource: "assets/myButton_icon_home_pressed.png"
        myButton_Symbol_labelText: "Home"
    }
}