Artboard Naming

Does anyone have a good system to naming Artboards in Sketch/Studio?

At the moment this is how i do it:



[ Device ] - [ Page ] - [ Interaction / component version ] - [ Page Version ]


M - Homepage - Login Window - 1a



Im not wholly convinced this is the best way but its what ive used for now. Having read around ive not found a consistent way for doing this. 

Any suggestions?



Please sign in to leave a comment.

  • Avatar
    Preston McCauley

    Good Afternoon,

    When I'm working through initial designs my artboards are disaster soon. As I start to get a bit more refined in the direction I do some clean up. I usually create a separate file for each type of design. This means 1 file for mobile and 1 for desktop. This also depends on how many people are working on the design. 

    From there I usually go with View_Workflow_or_Role_version_xx.



  • Avatar
    Rob Whiting

    Hi Owen,

    Not sure I'd say there is any better system then the one that works for you and/or your Design team 🙂 If you understand your naming convention, I'd say it works well.

    This article - https://infinum.co/the-capsized-eight/designer-woes-how-to-name-files-and-where-to-put-them - offers some useful tips on structure (e.g. project name having a higher priority then device/platform) which might be useful in restructuring your current naming convention. I've also had success with teams using Semantic Versioning (https://semver.org/) to keep track of design changes so this also might be worth review.

    Hope this helps.

  • Avatar
    Owen Hughes

    Thanks for the input guys :) much appreciated!

  • Avatar
    Caitlin Cambron

    Hey Owen! 

    Like Rob and Preston said, it depends on project size, team size, etc. But generally here's how I do it:

    • It's a mess at first. I get my initial ideas down and whatever the names are, they are. I have a lot of "Artboard 1" and "Copy of copy of Artboard 1" at first.
    • I then organize by persona, general functionality, and specific workflow.
    • For example: Persona_Funtionality_SpecificWorkflow would be Denise_Messages_DeleteMessage

    Hope this helped!