FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
Read Thread
I'm constantly asked... "How do I organize my files?" So here are my 7 goals for file organization in @figmadesign πŸ‘‡
01 // Everything that engineers see should be relevant and directly related to what they’re building. That means: β€’ No explorations β€’ No contradictory states Any time there's UI on a page that is NOT supposed to be built... it leads to confusion. My strategy for #1 πŸ‘‡
01 (cont'd) // "Production" vs. "Shaping" projects β€’ I explore only in shaping files β€’ Then move only what is ready for engineering into production files β€’ Production files are published as libraries and imported back into the matching shaping file to detach + explore πŸ”„
02 // All of the core flows should be clearly outlined β€’ The primary way I organize files is by moving horizontally across "flows" β€’ I have a "title" component I use to name each flow so that I can easily refer to it (I also like linking to this title frame)
03 // It should be easy to see all of the potential variations that a given screen can have β€’ Whenever a screen has a different state or layout variation, I’ll stack that new frame below the default frame β€’ If a screen isn't a part of the core flow it's considered a variation
03 (cont'd) // β€’ If this variation is only happening at the local component level... I’ll often document that within my variants instead of creating a whole new frame just to show something like a hover state. β€’ Dedicating a whole new frame just clutters the page imo...
04 // Clearly show how screens respond at each breakpoint β€’ I’ll display the core layouts for each breakpoint stacked vertically below the parent flow β€’ I’ll show every possible state for web, and then document only what is unique to each specific breakpoint below that
04 (cont'd) // If nothing changes across breakpoints, I'll combine them into a single row. This often happens when a chunk of UI hits its max-width. I'll just make a note about how a layout applies to both `xl` and `2xl` b/c the content can no longer grow.
05 // Clearly document all components and the states they can take β€’ If I’m using a component imported from my design system, I’ll make a note about it and link back to the relevant file. β€’ I try not to rely on the Inspect panel to highlight components that I'm using.
05 (cont'd) // β€’ Any local components that I’m using live in a separate page (I like to use the β€œπŸ”—β€ emoji as a page name) β€’ I think have a component wrapper frame that I use to highlight the component name, as well as any state info or other helpful documentation
06 // It should be easy to identify where we're at in the build process for a given file β€’ The first page in each file uses a "Table of Contents" β€’ I break my files into: 1. Production (what's already built) 2. Local Components 3. Shipping (what's in progress)
06 (cont'd) // β€’ In my interviews with developers, I've found that this TOC component is way easier to use for navigation than the Figma file sidebar UI itself... β€’ I then use emojis to map my page names to these different stages of the development lifecycle
07 // It should be easy to figure out what UI relates to specific development tickets/issues β€’ The starting point for devs is often an "issue" in a project management tool β€’ So for feature requests/improvements, I organize my page vertically into "tickets" to map to @linear
07 (cont'd) // β€’ Within each note component, I'll link to the @linear issue (as well as anything else relevant) β€’ I then explain what's changing from what is currently in production β€’ I then copy this frame link and paste into @linear where it automatically previews my text
Hope you enjoyed this little teaser of the @figmaacademy "Workflow" module πŸ˜‡ Enrollment opens to the public in January! Make sure you're on the list πŸ‘‡

My Notes:

Select to add to your #gallery:
Ridd πŸ›

Pro Curator

$99 /yearPay what you can