solution • Atomic Design and Patern Systems - martindubenet/wed-dev-design GitHub Wiki
« Atomic Design » is about coming up with a consistent taxonomy, finding a grouping principle for an intrinsic elements based on the different extrinsic types of dependencies. This term was first documented as a book by Brad Frost.
| Nomenclature | Concept | Usage (based on Bootstrap v4 components) |
|---|---|---|
| Big Bang | Basic set-up frameworks required for the projet | Librairies for front-end technologies (NodeJS, Webpack VS Gulp, Angular VS React VS VueJS), interfaces (jQuery, Bootstrap) and fonts (Google Fonts, Font Awesome, etc…) and the default font-family and font-size for the <body>. |
| Atoms | If you can’t divide without it becoming useless, then it’s an atom | Color swatches — Typographic styles (<p>, <li> and <label> VS heading tags <h1> to <h6>) — Links anchors <a> — Buttons <a.btn> and <button> — Icons (Google’s Material Icons, Font Awesome, Bootstrap Icons or else) — Form controls (<input> fields without labels), boolean inputs (radio buttons and checkboxes), range sliders — Toggle switches — Tabs, badges, pills and tags — Tooltips — Avatars and product thumbnails VS high resolution <picture> placeholders (with responsive image dimension chart) |
| Molecules | Groups of atoms that work as a single component with a single function |
<select> dropdowns — Dropdown buttons — Dropdown menus — Radio/checkbox buttons inside regular buttons — Date pickers — Search components — Blockquotes — Breadcrumbs — Card components or Media objects with streched links — Input groups (special <label> for <input type> or combined radio/checkbox and text inputs) — Collapsible group items — Alert messages — Informative and boolean modal windows with a close button icon
|
| Organims | Combinations of multiple molecules and have more than one function | Navigation bars — Nav tab controls (active VS clickables tabs) — Media (Music, Video) embeded players — Media grids — Progress indicator — Data tables — Carousels — Form fieldsets |
| Templates | Layout of common site block or pages based on a purpose | Site <header>, <footer> and common <main> contents — Index of articles (list) pages — Detailed article pages — Media player pages — Search results pages — Interactive form pages |
| Pages | A unique page that as it’s own mockup or specifications | Homepage — Contact us — 404 Error — Legal terms of usage and/or privacy statements |
Once a mockup is developed, tested and on live on production servers, coming from a design system or not, the designers should not be allowed to do design request on an existing (web) product without a proper request to do so.
Therefor when editing Atoms, Molecules and Organisms styles it is the designers responsibility to validate with (front-end) developers that the new styles don't break existing Components.
The « Figma for VS Code extension » provides an easy way for developers to access and inspect designs right from VS Code. You can navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation—all without leaving your development environment.
Adobe XD Design System Package
Adobe’s design systems relies on Fonts, Tokens and Components instead of the Atomic nomenclature.
- Video presentation: Announcement: Adobe XD extensions for Visual Studio Code and Design System Packages (DSP)
-
Design System Package (DSP) on GitHub
- Spectrum is a design system build as a Adobe XD DSP demo : https://spectrum.adobe.com/
- Compatible with:
More about Adobe's design systems
- How to use Design Systems with Creative Cloud Libraries when working as a creative team member.
A Visual Vocabulary to Relate Systems, Products & Brands
