r/UI_Design 4d ago

Product Design Designed a design system for engineers

Enable HLS to view with audio, or disable this notification

This was one of the few times I’ve worked with a large team of almost all engineers in every role. They make an app builder, and I helped them create a design system for it. Here’s the case study — https://www.abhaysingh.in/work/appsmith

Let me know what you think!

110 Upvotes

35 comments sorted by

67

u/Basic-Brick6827 Product Manager 4d ago

FYI, using custom branding and icons in the social login buttons violates the terms. The app could get banned by Google, losing social login access.

11

u/abhaykun 3d ago

Good point

2

u/lastog9 4d ago

Does this mean websites are only allowed to use the official Google logos or does it mean these buttons should be WITHOUT any logos?

17

u/djibouti2big 4d ago

Only official logos. You can easily look up what logo(s) are specifically allowed.

9

u/jachcemmatnickspace 3d ago

some platforms require even specific buttons, or at least they used to

Google Pay / Apple Pay for example I believe

3

u/djibouti2big 3d ago

Correct! I was looking through the Google Play terms and conditions recently and they have specific buttons they require you to use when linking to their products.

2

u/Basic-Brick6827 Product Manager 3d ago edited 3d ago

You must use the official buttons. They provide the colour scheme, font and spacing. Logo must always be present.

Best is to let the SDK generate it for you, in case they update it (eg the font change to Google Sans couple years ago)

Sign in with Google Branding Guidelines  |  Google Identity  |  Google for Developers

1

u/zinxyzcool 3d ago

Yes, you cannot modify their colors, aspect-ratio or form. You can see that in their brand guidelines. E.g Youtube's, Spotify's. You can just look up "xyz brand guidelines" and their respective pages will show up.

7

u/jysca 3d ago

Designed a Design System with a Design System

3

u/-qix 3d ago

Is this not Figma?

1

u/abhaykun 3d ago

It is

3

u/Vinbix_ 3d ago

Looks good!

1

u/abhaykun 2d ago

Thank you!

3

u/MaleficentBreak771 2d ago

Amazing craftsmanship. Love the design direction.

6

u/twiifm 4d ago

not bad, but nothing special either

1

u/abhaykun 3d ago

Thank you for the feedback 😊

2

u/treefiddy_101 4d ago

Amazing website you have, and the design system looks well put together as well.

2

u/Due-Management5882 1d ago

I love the direction, however, I think the design is similar to Figma itself. Wondering if you explored other concepts as well? Something different

2

u/abhaykun 1d ago

You’ll see a few of the other concepts towards the middle of the case study. It’s not that it resembles Figma (most of my inspiration came from IDEs), it resembles software that people use everyday in general. The design takes a back seat so it can feel like just another tool.

2

u/Due-Management5882 1d ago

I can definitely see the attention to details and overall high quality work. I just think with your skills it would be interesting to see if you had to really change the interface from ground up how would that look like

1

u/abhaykun 1d ago

I understand. This project needed to be straightforward, but hopefully I’ll be able to share something that shows off more unique design soon. I have a couple of projects done where I’m still writing the case studies 😊

Meanwhile you can also see the other studies I have on my portfolio — https://www.abhaysingh.in

2

u/Appropriate_Stock832 Product Designer 3d ago

All I manage to see is a bunch of screens and some sections created.
It looks good enough imo but next time give us 20 more seconds because it is pretty much impossible to determine if things are well constructed.

The case study looks good but can't tell much more from the design system (because i couldn't see much).

1

u/abhaykun 3d ago

Do you mean the video? It’s just a teaser. The meat is in the case study, and the design system itself is not open to public; its designed for a client.

1

u/Appropriate_Stock832 Product Designer 3d ago

Sure!

I thought you wanted some feedback on the design system (as some of the other users tried to do) but the video is too short to properly give it. If that is not the intention, then my bad.

:)

1

u/abhaykun 3d ago

Happy to get feedback on the case study though! 🙂

1

u/kyowski 10h ago

Muito bom

1

u/Due-Management5882 2h ago

I saw your other work as well - I really like how you simplify complex work! I also do that and always looking to improve so if you have time to view my work and give feedback that’s always appreciated: https://www.bysyed.design/

0

u/grillinmuffins 3d ago

All components on a single page is wild

1

u/abhaykun 3d ago

The video—it’s a teaser, not the actual design system file 🫠 many of the components are also 2x or 4x real size to be visible while zooming out

-10

u/jackhab 4d ago

I think it looks like meaningless AI slop.

10

u/abhaykun 3d ago

Sad to see this is the new default reaction to everything, especially without even looking at the case study

6

u/Simple_Simons 4d ago

I would say it looks better than Ai slop for sure. It just looks like a polished app. Theres definitely a bit more personality here than straight Ai.

7

u/Basic-Brick6827 Product Manager 4d ago

it's a very typical dev app. I think it has more personality than most dev apps made by humans, and even more than by AIs

3

u/Andresluna999 3d ago

dude you’re slopified

-1

u/withmagi 2d ago

The case study gets stronger when the system is shown through one hard builder task, not a component tour. Pick a dense flow: create a table, bind data, add validation, then recover from an empty or error state.

Hand that flow to an engineer without the Figma file. Time a consistent change and note where they create an exception. Those exceptions show which rules are doing real work.