Following on from our recent posts A lesson in design processes for 2020 and Design: But I still have a versioning problem, our design expert, Chung Sham is answering a few of your design questions.

Don’t see your question on the list below? Contact us and one of the team will send you a reply and update this post.

Let’s get into our Q&A with Chung Sham.

Q: You mentioned previously exposing design elements in Sketch. How manual is you needing to expose all of that stuff? The button does not have the font and the specific hex codes and all that sort of stuff. Is that something that you would manually do in Sketch?

Chung: No, there is no process or anything additional that we have to do as part of the design. Sketch, because it is a JSON-encoded file, is where it is getting all this information from. We just hit publish and InVision decouples everything. So, it is a smooth process. You can sort of see here with the text label, we have got the font family, the font size, all that sort of stuff, no additional work on our end.

Q: What you shared is an out of the box Sketch set up. Could you make your own  core style sheet page and then have your H1s and feed into your design?

Chung: The short answer is yes, you can set up a Sketch file and put all your H1s, H6s or your icons in a Sketch file and then have that in Abstract and push that into InVision.

The longer answer is that there are other tools available that will help with creating a design system, because then, once you have certain design decisions about why an H1 is the way it is or what fonts were chosen, you can put comments around it and expose that in more accessible way for a website or something like that rather than for Abstract, but yes, is the short answer.

Q: Thinking about responsive designs. If you are designing a component, you end up with different versions, one is for desktop tablet and another for mobile. Is that for just one design file? Does it actually have any tools to go? Okay, his container needs to drop it into the next slide. And can you do something like Flexi design or really? 

Chung: There are plugins that will allow you to set up Sketch files and build some of those smarts as you change, what we call in Sketch up boards, which is basically the working size of your design. You could start with a desktop, build in some of those smarts using a plugin, for example Anima. And then that will adjust the designs based on the breakpoints that you want. Now, that takes a little bit more work, obviously, because you do have to bake in those designs. So you are not just designing on that up board itself.

Another option is you could have multiple Sketch files at different breakpoints. And just like what you saw with Abstract in the second post, you can have those in different branches. Someone might be working on mobile, someone might be working on desktop. There are a few different ways you could manage that, and every team in every organization is different, but there are ways to do that. 

Q: If we end up having multiple Sketch files for different breakpoints because technically, some of those can be not achievable. For example, some designers just go crazy and then just move stuff around in mobile, not making it responsive. This increases the complexity of development. Do you come across any of these challenges and how did you sort of overcome them?

Chung: Yes. So that comes down to, I suppose, the design practice and the designer themselves. What you saw before is the way to manage those design decisions. I think the example would be that you would have three different uploads, freedom files because that just visualizes how certain elements or components should behave down to different breakpoints. And you can share those with the client as well. Whereas if you do bake it in and inside Sketch, you do have to change the artboard within Sketch to be able to see how that behaves. So a lot of times, it is a lot easier for clients to visualize how these three different breakpoints look like and then have comments be placed against it in something like InVision.

Q: Our designers might have ideas around placement. Do you see that more as a collaborative experience between technical and the designer team to go, “Yes, we have worked together to produce this design but there could be technical difficulties and we might need to sort of, it goes kind of both ways.”

Chung: There are a few different deliverables that we designers like. If it is quite a complex component, you might want to start off with a discussion with the developer first, create a wireframe, have a discussion around how that actually behaves before creating a high fidelity version that you would see in Sketch. This is what I’d call design practice for the individual designers, rather than the tools to help solve that. 

Q: Let’s say you have a senior designer on the project. Then you bring in more junior designers who are still onboarding and still learning. Do these tools have any provision for you as the lead creative person to place restrictions on things or warnings, let us say? I guess you’d call it an approval workflow but for alerts.

Chung: There is no out-of-the-box function that might facilitate that in Sketch, it will be a lot of basically, communication. But Abstract would be a place where – such as the request review –  so if they complete a task, send a request review to whoever the senior lead is and then they can actually see and edit that file if they need to or send it back to the junior designer before merging it back into a brand new milestone.

And we are starting to see plugins for Sketch where if a designer enters a different font, it will say, in real-time, “Hey, this is not part of the design.” But that is still in its infancy, but it is moving towards something like that.