6 comments

  • Mark Vogelaar, almost 2 years ago

    Damn 40 upvotes and no comments :D Nice share. Important that we do this as designers. I do miss some examples with designs (rather than wireframes) though. Like, screenshots of how your Sketch/Figma file looks like. I believe following a strict Spec'ing workflow als cleans up your Figma file as well; increasing handover quality too.

    1 point
    • Mahdi FarraMahdi Farra, almost 2 years ago

      Haha yeah the community here seems to have gone really quiet recently!

      You're right, the article actually misses real examples. I've just updated the post and added 3 examples from a couple of projects I've recently worked on. Thanks a lot for the feedback and for the suggestion

      I also agree with you that following a strict spec'ing workflow cleans up your docs. It's like a second chance for you to review your work, make changes and update it to make things more clear for everyone.

      Thanks again Mark for passing, for the comments, and the great suggestion!

      2 points
    • Mahdi FarraMahdi Farra, almost 2 years ago

      I've also been trying to leave a reply to your comment since yesterday with no luck. I kept getting an error whenever I was trying to post my comment

      0 points
  • Robert GrazioliRobert Grazioli, almost 2 years ago

    I too would love to see more examples of this done in the wild. I'd gather that the combination of inspect tools, prototypes, and variants in tools like Figma started to reduce the need for these. I stopped doing them back in like 2012 haha. They can be extremely time consuming. But I've always worked very closely with developers so handoffs were less async.

    A workflow that's always worked well for me personally was to just contribute to the frontend implementation. You're writing CSS in your spec here, why not write it in the actual codebase?

    I'm not sure that's a good idea or sustainable, but it's always allowed the developers I work with to focus on the logic and functionality while I can just ensure it's implemented correctly and design around edge cases as I confront them.

    Anyways, nice post.

    p.s. https://farts.link/ .... hilarious

    0 points
    • Mahdi FarraMahdi Farra, almost 2 years ago

      I've updated the article and added 3 examples for recent projects I worked on.

      You're right that new tools like Figma reduces the need for some specs. However, a lot of the design details such as relative widths/heights can't be inspected automatically in these tools. You'll still need to spec those manually.

      And I totally agree with you on contributing to the codebase, which is what I do when I have the time. However, most of the time it can be challenging to do that on top of my product design duties.

      Thanks a lot for your comment and feedback, and for sharing your workflow as well. Very insightful.

      Glad you liked farts.link haha. Happy pranking!

      0 points