Thomas Ruehr

Lead product designer at Sparted Joined over 2 years ago

  • 0 stories
  • Posted to How do you document design system?, Nov 27, 2018

    In my experience, it really depends on what technology you are working with. Ask your dev how they want the documentation structured. I currently work on a design system for React native and I structured everything based on the file structure in production. Foundation components (colors, typography, etc.) Unit component (simple and heavily reusable components, toggle, images, fields, button) and Structural components (Structural blocs build from foundation and unit component that are used directly to build pages)

    Check out what the airbnb team is doing, very interesting. For documentation we use Notion (we used confluence but it was way to heavy) we also use abstract for everything (inspect, design presentation, naming conventions) I'm thinking of giving zeroheight a shot it looks great.

    For inspiration just download design systems on sketch like material design or the base UI kit from apple on sketch it can give you clues on how to name your things.

    Also just check out other design systems:

    Hope this helps :)

    TLDR: you should ask your dev and PM. They are the one that will rely on it to work :)

    1 point
  • Posted to How do you manage Design Documentation of sketch files and handover to development?, Nov 20, 2018

    Hi, First time posting because this post struck a chord with me :)

    Regarding the integration to Jira/Confluence. It just will not work how you want it to, We tried for a couple month it was just a hassle. You will not be able to have web previews that are version controlled directly in confluence using Sketch.

    I'm sorry but what you want to does not really exist for sketch. The beauty of figma is it's web embed. Really gorgeous for documentation on Notion.

    But there are tool available that works for us.

    The way our system is divided:

    • Notion (confluence works) for user stories, macro design specs, user persona, etc. But also a "one point" of entry for my PM. We have detailed pages for every area of our product with links to flows, page layouts, and component specs.

    • Abstract for design versioning, components and page handoff (decent inspect feature) and design presentation / three amigos meetings etc. Links are version controlled so no expiration dates :)

    • Whimsical for flows, pretty much all macro level flows are managed in whimsical. Easy to handoff to dev and easy to maintain. (same as abstract static links)

    I'm looking to go to Zeroheight to have a more manageable Design system (easier to maintain complicated interaction) I highly advise you to take a shot at it.

    The big remaining issues for us are super complicated components and animations. Zeroheight makes it easier, but I don't understand how people do it, there is so many variable and static component/page layout does not remotely give enough info to a dev.. The only real way I'm seeing right now is stuff like framer where basically you just give them the code.

    Hope this helps.

    3 points
Load more comments