Member-only story
Principle for Pros: The Most Efficient Sketch to Principle Workflow 💯
You’ve probably used Principle before and you probably hated it because you couldn’t figure out how to create a modular, organized workflow. You probably didn’t understand why ghost layers were flying around in places you never built.
This article will change how you prototype with Principle.
Organization is Key 🔑
The key to an enjoyable Principle experience is organization. And that starts in your Sketch file. If you’re not organized before you sync your Sketch file, you’re in for a nightmare of an experience.
How you should do it
I’ve written at length about the importance of organization and modularity within design files, but this is just more proof that it’s time you made the switch. It’s a much more proactive and efficient process.
I use a style of organization that’s very similar to what developers use. I learned Block Element Modifier (BEM) syntax during my early days as a developer and it’s made a world of difference with my work.
BEM syntax can be broken down very simply like this:
block-name__element-name — modifier-name
Or in English, something like this:
person
person__hand
person__hand — right
person__hand — left
If you look at my artboards and groups/layers you’ll see they follow a pattern, something like this:
artboard-name
artboard-name — modifier
And if you look at my groups/layers you’ll see patterns like this:
module-name
module-name__element-name
module-name__element-name — modifier-name
I do this for a few reasons
- It’s easy to find everything and follow the flow of the app.
- My designs are structured modularly, which allows me to cascade changes…
