Figma File Org - 15 mins

I’ll start by saying there’s not one right way to do this. There’s many different approaches and each designer or team will have their own structure and preferences.

1. Basic principles:

   Main pages - ##a - Title - Version #

   1. Use 01, 02, 03 structure for the main identifier
   2. Add an alpha character for subpages
   3. Then TITLE
   4. Then Version # to identify major iterations

   Screen frames - ##a - Title - (Subtitle) - (Version # or Version date)

   1. Use 01, 02, 03 structure for the main screens - this helps you identify the screen progression in the user flow
   2. Add an alpha character for subscreens
   3. Then main screen TITLE
   4. Then subscreen TITLE
   5. Then Version # or Date to identify major iterations
   6. You can use this numbering convention for an entire user journey or just for a specific user flow. It can sometimes be easier to start by separating screens into specific user flows for the iterations and then combine at the end into an overall flow.
   7. I’ve also heard that underscores should be avoided as they can block search queries. Use spaces instead.

2. Discussion - how do we want to do it?

Figma Layer Org - 15 mins

1. Basic principles:

   1. Be descriptive of what the layer is while being concise - my general guide is will I be able to quickly figure out what this layer represents if I return to this in a month?
   2. Easily identifiable layers are crucial when using nested auto-layout as it will help you identify where issues in the auto-layout are occurring.
   3. It’s up to you if you want to use title case, all lower case, etc.
   4. The next step is to align the layer labels to code (Google Material Design uses this format for its layer naming) but it’s much more involved and we’d need to have a close relationship with devs to align on this.

2. Discussion - how do we want to do it?

Vertical Spacing Guide - 30 mins

1. Alexis and Vero started this async via Slack
   1. How can we reach consensus?
   2. Maybe we don’t have to for Wed?
   3. Maybe it will be a Friday goal?
2. The main consideration is that we are using a 4px spacing guide. However, we should be using 8px for the major spacing for simplicity. And reserve 4px for minor spacing adjustments and smaller details like spacing within forms and textboxes for example.

Schedule for rest of week:

Monday - DS walkthrough and component auto layout (mid-fi async) Tuesday - Figma file and layer org naming and screen audit (missing screen ID and design async) Wednesday - design crit (iterations async) Friday - design crit (iterations async and finalize prototype)