Skip Navigation
The Framework logo on an orange background

Framework Design: using Sketch to meet client briefs, from ideation to handoff

“By having all the information in one place, our development team can export the bits they need, as and when they need them”

We’ve designed Sketch to be a platform for your entire collaborative design process. That means from your first ideas and rough wireframes, right through to developer handoff, we’ve got you covered.

But how does that work in practice? To find out, we sat down with Luke Bamford, creative director, and Kara Vicca, UX/UI designer from award-winning Framework Design. They gave us the inside track on how they use Sketch to work collaboratively across the entire agency, and how it helps them deliver on client briefs.

Q. After you’ve had your initial conversations with a client, how soon do you bring Sketch into the design process?

Luke Bamford: Every project that comes through our doors starts with a Discovery session, which typically is booked in after the initial call. Discovery sessions are designed to introduce our clients to a range of different ideas, concepts, and themes and understand what they want to achieve from their project. We first use Sketch to create a document that brings these ideas together, which we then present throughout these Discovery sessions.

A black and white photograph of Framework’s creative director working on a computer next to two other people.

Creative director Luke finalizing the design review before the handover to the developers.

Q. How many people are typically involved in the design process on a project, and what are their roles?

LB: We typically tackle a design problem with a pod of people. Our managing director, Stephan, deals with the initial points of contact and outlines the work processes to the client. We then gather a pool of talent with the appropriate skill sets, which usually comprises of an account manager who runs the day-to-day, myself and members of the design team, Paul the technical director, and selected developers.

A photograph showing a Framework team member browsing through components using Sketch’s Components View.

Developer James browsing the asset library for exporting.

Q. How do you use Sketch within the process? Do Workspaces help your team work together?

LB: The design team and I work in Sketch from the conception of the project until the handoff with the developers. Paul and the senior team review the designs and use the Sketch assets library to begin the development process. Accounts and directors review the designs with the clients at every stage of the design process.

Kara Vicca: We use our Sketch Workspace for all of our version control, and to help us work collaboratively when people are not in the office. The fact that it automatically syncs all our changes has also saved our bacon on a couple of occasions! When you’re working solely on your local machine you always run the risk that the file may be accidentally deleted or corrupted. Storing document in our Workspaces mitigates that issue.

Q. Are there any specific Sketch features or tools that help the designers at Framework produce a great finished product?

KV: I find the Components View really useful when creating website designs in Sketch. It allows the team to organize different elements of a web page, such as icons and shapes, into folders, so it’s easy to replicate them consistently across the whole website design. We also use Color Variables to ensure that color palettes are consistent across a project.

A black and white photograph of Frameworks’s UI/UX designer working on a computer, taken from the side.

UX/UI designer Kara Vicca working on Framework’s next award-winning project.

Q. How do you handle developer handoff? What’s the process, and how do designers set up their Sketch documents to make life easier for the dev team?

KV: We used Sketch to create a template handover file, which acts as a complete guide for the developers when it reaches their stage in the process. We use this template for every project and it contains key information such as typography, imagery, color palettes, icons, logos, and buttons — as well as guidance on the look and feel of page structure and content. By having all this information in one place, our development team can open the document and export the bits they need, as and when they need them.

A photograph showing a someone reviewing a Sketch document on a Mac, from an over-the-shoulder perspective.

Reviewing the Warhammer components ready for development.

Q. We recently introduced real-time collaboration to Sketch. Have you adopted it into your design workflow?

LB: On larger projects, where we need multiple designers to work on it at the same time, real-time collaboration has been a lifesaver. Not only has it helped us shift larger volumes of work, it’s helped us work at a quicker pace — meaning we can be competitive when it comes to meeting shorter deadlines.

We love seeing how people and teams are using Sketch to create amazing products. If you have something you want to share with us, let us know on our social media channels using #MadeWithSketch.

You may also like

Try Sketch for free

Whether you’re new to Sketch, or back to see what’s new, we’ll have you set up and ready to do your best work in minutes.

Get started for free
Get started for free