10 comments

  • Gabe WillGabe Will, over 2 years ago

    Alright fam, I need to know how that symbol adapts to a tab being deleted.

    Resizing

    4 points
    • Jon MooreJon Moore, over 2 years ago

      Auto Layout :)

      That's a horizontal stack, pinned to the left and right. Pins will anchor the stack (or group) to the parent, which in this case, is the artboard itself. The bottom is pinned just because it was being used as a bottom nav. That keeps it anchored to the bottom when you resize the artboard vertically.

      Let me know if you have any more questions as to how the system is built!

      6 points
  • M. de Winter, over 2 years ago

    I think UX Power Tools is abusing the term 'Mobile Design System' for a (not so nice IMHO) UI kit.

    For the record: a design system describes a process where you optimise your workflow with one or more tools in creating digital designs. This does not optimise your workflow, it constrains it. Pre-defined UI elements are only useful when they contain the basic UI elements of an OS...

    Some of the greater design systems are based on Atomic Design. Check it out if you're interested.

    1 point
    • Jon MooreJon Moore, over 2 years ago

      Hey Maarten, appreciate your comment. But UXPT is exactly what you described. It's intentionally a vanilla system for the sole purpose of being customized by the designer. Of course there are nicer looking ones out there. We agree with you! But nothing is built the way UXPT is constructed.

      That's why we call it Bootstrap for designers. Devs aren't supposed to use Bootstrap out of the box. It's meant to serve as a base to "optimize [the development] workflow with one or more tools for creating [front end UI]".

      UX Power Tools is built like a Sass library with "variables" like text styles and layer styles, and the components are compositions of these variables. Starting a project with this system optimizes your workflow by 5-10x.

      Chefs don't chop onions and trim beef in front of the camera on cooking shows. That's not worth their time. But that doesn't constrain their cooking to just one dish. They can make thousands of dishes by utilizing the same basic ingredients as a base and preparing them differently. UXPT plays by the same rules.

      Thanks for your comments, and I don't mean to sound so defensive. You just seemed to describe exactly what we've created, and more importantly, why we created it :) This is an atomic design system in the most raw sense, and we've left creating molecules up to the designer. Once you eclipse the atomic level, then the system starts to feel very constrained. And we don't want to be in the business of telling designers how their designs should look. We care more about how they've prepped their file to build more efficient and sustainable designs.

      3 points
      • M. de Winter, over 2 years ago

        Hey Jon Moore, Thank your for your response. I fully understand the intention behind your UXPT. I also understand the metaphoric paragraphs about Bootstrap, Sass, Chefs and onions. I think you are going to sell your product pretty successfully.

        I just think that, after reviewing the .sketch file itself thoroughly, it does not embrace the Atomic Design principles in it's most raw sense as you'd like it to do.

        What I do think that UXPT does well is this: being an optimised styleguide for sketch. It starts with the first 2 pages within the .sketch document: setting the colors and fonts for your project and directly implementing and translating those settings to basic UI elements. Good job!

        I think you guys could improve the UXPT tool by:

        • Implementing HCI guidelines from iOS10 and Material Design instead of the current UI elements (they look 'cute' but are not usable for real mobile projects) This is mandatory for a good mobile design system.

        • Emphasise on how to expand the 'design system' by seducing users (= the designers) to create their own custom UI elements instead of giving them a bunch of (IMHO) useless 'cute' UI elements (like the 'range sliders', 'calendar', etc...). Basically try to facilitate in letting the user go through its own Atomic process instead of already giving organisms, templates and pages. A design project does not start in sketch... it starts op paper.

        • Implement your .sketch file in Craft Library. This makes the process probably even more faster than 5x - 10x. Also saves a lot of RAM.

        Thanks for your response, let's just say that we have different opinions on what a design system should be. I think it's way more complex than offering a .sketch file with some steps from a workflow that is personal and different for every designer.

        Good day to you!

        2 points
        • Jon MooreJon Moore, over 2 years ago

          Craft Library has never been reliable for us, so we've avoided using it. Just a personal preference!

          I have personally used this system on multiple real mobile client projects, and have created dozens of new atomic elements for myself on each project, so this system definitely isn't all-inclusive. It can, however, give you a huge jump start.

          I don't expect users to use all of the components in the file, and that's okay! But if they're going to be constructing (the key word) a lot of these components in a similar way anyway, why not get a head start? Text boxes, however they look, are always text + rectangle. I do that the same way every time, so this just gives me a head start and I can customize it as needed.

          One more chef metaphor before I shut up: UXPT is a designer's mise en place https://en.m.wikipedia.org/wiki/Mise_en_place :)

          Great discussion, Maarten!

          4 points
          • M. de Winter, over 2 years ago

            "Text boxes, however they look, are always text + rectangle."

            This defines the difference between you and me. Thats okay. Your tool gives a 'head start', true. Enjoy your week!

            2 points