7

How do you name your artboards and handle "states" using Sketch & InVision?

7 years ago from , User Experience Designer at Amazon

I know there are a bunch of ways to name your files, I like this file naming convention.

But talking about using Sketch and InVision how do you name your artboards (1-home, home, des-home, etc) and how do you handle states (1-home-empty, 1-home-city-input, 1-home-date-input)?

6 comments

  • Robin RaszkaRobin Raszka, 7 years ago (edited 7 years ago )
    Project.sketch Platform (Page) Screen name-XXX (Artboard + build number)

    So for example like this:

    Twitter.sketch iOS Sign up-001 Sign in-035 New Tweet-001 Web Teaser-003 Home-006 About-002

    And I have a little script that auto increments the build number every time the artboard is modified. The script also automatically exports PNGs of all artboards into a Dropbox folder named with today's date. It's not perfect, but works great for me.

    I also use heavily the new Symbols feature in Sketch and I export particular pieces of UI for prototyping if needed.

    For versioning I use Github (each commit represents bigger iterations) and Time Machine (easy to revert small changes, but very rarely used).

    5 points
  • Serguei Orozco, 7 years ago (edited 7 years ago )

    I think I will start using:

    Number/Letter - name of the view - state

    ie:

    01A - home - placeholders

    01B - home - autocomplete

    01C - home - dates

    01C - home - error

    02B - search - placeholders

    02C - search - tag selected

    ...

    1 point
  • Bryce York, 7 years ago (edited 7 years ago )

    I tend to use a similar naming convention to what I do in CSS.

    Feature - feature

    Feature element - feature--featureElement

    Feature element state - feature--featureElement--featureElementActive

    which I translate to artboard names by taking the last element

    e.g.

    userManagement

    userManagementSearchField

    userManagementSearchFieldActive

    1 point
    • Serguei Orozco, 7 years ago

      so you have "page" named "userManagement" with multiple artboards (using those names), right?

      0 points