Hi, everyone!
I'm Christine, and today we're going to talk in depth
about how to hand off your designs to engineers once they're finalized.
I'm going to walk you through an example project.
These are the screens that we'll see today,
and I'll also share tools that you can use to make this process a lot more efficient.
These are the individual screens that are finalized, and I've grouped them into sections based on features,
but it's still difficult to see how all the screens relate to one another.
As a designer, it's important for me to provide a bird's eye view for my product
managers and engineers, and a way to do that is through user journeys and flows.
So this is more of what I would show my engineers during a design handoff meeting.
I would show them a user flow of how each of these screens are connected to each other
and also call out any important requirements, behaviors,
and interactions that they need to be mindful of when they're building out their products.
Mapping out and documenting all the possible paths, behaviors, and edge
cases--such as error states and loading states--what that's going to do is, it's
going to increase team alignment and it's also going to lead to higher quality products.
In order to create this map of how each of these screens interact
with each other, you're going to have to create individual arrows.
And if you've done this on Figma, you know that this can actually be very time consuming
because every time you add a different screen, let's say
you want to create a "login" screen
instead of a "create account" screen, then you're going to have to shift
all these screens around and also customize
the arrows to connect with all these other screens.
And resizing these arrows can be a pain sometimes.
And so if you want an easier way to create and manage
these arrows and maintain the flow, Zeplin is a great tool to use.
Zeplin is basically a hand-off tool where you can publish your final designs,
and engineers will come in and start building your locked-in designs.
And they also happen to be the sponsor of today's video.
What I've heard from engineers who've used both Zeplin and other tools
is that they preferred Zeplin because the inspection tool is a lot easier to use than the other ones.
On top of that, creating arrows and maintaining your flows is a lot easier on Zeplin.
I'm going to show you exactly how I do mine.
First, you're going to have to download the Zeplin plug in on Figma,
and then you're going to select the frames that you want to export on to Zeplin.
You're going to right click and go to plug ins, click Zeplin,
and it's going to show you the number of frames that you've selected
and you export that to your project.
This is a Zeplin desktop app, and I've already exported all the screens
that are grouped together into their sections.
I also have some flows that I've created already, but we're going to go to an example feature
here, the "Wish list" feature where I haven't created a flow.
It's super easy to add all these screens together into a flow.
All I'm going to do is click this button here
add screens to flow, and the screens have been added to the flow.
At the very top, you're going to see a "Flows" tab.
We're going to click on that.
And once you click on it, you're going to see the screens that we just exported.
I already have some other flows in here, so we're going to walk over that in a bit.
But first, let's connect these screens together.
So arrow creation is really simple on Zeplin.
As you hover over some of these elements, you're going to be able
to just drag and drop these dots and connect them.
You can also change the color.
So this comes in handy when you want to differentiate different interactions and behaviors.
If you have a success flow versus an error flow, you can differentiate them
by using a green color for the success and an orange color for the error flow.
Zeplin also has a functionality where you can have
a variant of the screen and you can group them together.
So here there is a search result version.
So I actually want to use that because this is a version of the same screen
where I have the search result already filled in.
So I'm going to use this screen.
They're going to search for a baklava.
I'm just gonna move this screen.
And as you move these screens, the arrows also move so you don't have to manage these arrows
and customize them every time you update a screen, which is really handy and it will save you a lot of time.
You can also add a label by tapping on the arrow and clicking on the T.
I'm gonna write "Taps on recommended search."
Spread this out a little bit to give more space.
I'm just going to connect these really quickly.
One of the things that I love about creating flows on
Zeplin is the ability to create subflows within a board.
So I'm going to show you what that means.
I'm going to click on all the screens that I want to create a group for.
I'm going to call it the "Wish list" feature.
When you have a bunch of screens on a board, it's hard to navigate through your file
because you don't know how everything is organized, and once you create a group.
This is going to be the "Onboarding" group.
Then you start to see how all these features live together.
This is going to be the "Market" group
and this is the "Create" flow.
This is the "Checkout" flow
and this is the
"Delivery" flow.
It also helps you navigate through the files.
I'm going to click on "Wishlist" and I'm navigated directly to that group.
You can also move these groups around and the screens will also follow.
This is really going to help your team see the bigger picture, and it's an effective way
to show different scenarios of the same flow in a non-static way.
You can also add permanent notes to each of the screens.
So in my Figma file, I had a note here
about this screen that a user can go back to the previous step
by either tapping on the secondary button or the progress bar.
So I want to make that note on Zeplin.
I'm going to go to that screen. Double click on it.
Once you're on the screen, you're going to hold command and click on the element
that you want to make a note about.
I'm going to copy and paste my note.
You can also select the type of annotation this is.
Is this a behavior requirement, animation API or tracking?
I'm going to make this a behavior note because it's not really...well
it is a requirement but requirement notes are slightly different.
I'm going to click on behavior and post.
Now when an engineer is building this, they're going to see that
there is a little note that they need to be mindful of when building this out.
Here's another example of how I'm using notes.
I have a requirement about what to populate for recent searches.
They should display three most frequent searches done in the last week,
not include searches that return no results and be stored locally on device.
You might be wondering, well, how do I know which details to include or exclude in my hand off file?
The best way that I've found is to have
a lot of check-ins with your engineers where you're getting early feedback because engineers,
when they see your designs, will ask clarifying questions or will point out things that are missing in your file.
Then you can figure out which details are important for them to know and include them in your file.
If you want to learn my design process and how I design screens and approach
problems, sign up for my monthly livestreams using the link down below.
I'll see you next time. Bye!