The basis of Atomic Design is that all matter is composed of atoms, atoms form molecules, which together form organisms. This theory helped us get a better understanding on why UI kits start off with colors and typography. Put simply, this is a way to divide elements in a UI Kit or a design system in a gradual, logical way, inspired by chemistry. Consistency is ensured, as long as you keep up with the rules you set yourself - like using the color you named “Primary” and the primary color in the design.īrad Frost created an analogy for UI/UX design that’s very useful in understanding how UI kits work, called Atomic Design. Which makes you think - if you set these things up from the start, you’ll never have that issue down the line. Commonly, all UI kits we’ve seen start off with colors and typography, which seemed the most sensible way to do it.īut it begged the question, why do we have to do it this way? So we looked back to some of our previous projects: one common downfall of UI/UX design is lack of consistency, and it’s not because we don’t want to do it.Īt some point, when we’ve gone deep into designing an app, it becomes difficult to keep up with colors (what they mean, which shades are meant for what), typography (what body text is supposed to look like, what each heading looks like, and so on), or shadows. Now what? We started to wonder where to even begin. So we’ve started already - we made the Figma document. There it was: a new, empty document in Figma we named “UI Kit”. How we built a UI Kit in Figma, Part 5: putting it all together.How we built a UI Kit in Figma, Part 4: accordions, range sliders, and advanced Figma settings.How we built a UI Kit in Figma, Part 3: modals, cards, tables, and more complex items.How we built a UI Kit in Figma, Part 2: buttons, alerts, tooltips, forms and more.How we built a UI Kit in Figma, Part 1: colors, typography, shadows and layouts.How we built a UI Kit in Figma from scratch: the intro.The UI kit hasn’t been released yet, but contact us if you want to get a quick look.įind below a list of all the other articles in these series, which we’ll add links to as they’re published: Welcome to the first part of our series about how we built our own UI kit in Figma, from scratch.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |