Skip to main content

Intro

Atomik is a Kotlin Multiplatform library that acts as an implementation of a design system in your shared code. It allows you to share design information in common code, and apply it to your UI with ease.

See dokka documentation here

caution

Atomik is in an experimental early stage, and should be used for testing purposes only.

What is Atomic Design​

First off, Atomik is based around Atomic Design. If you are unfamiliar with that concept please learn more here

In short, atomic design is methodology for creating design systems, in which you create components that can be made up of sub-components, similarly to atoms and molecules.

For example: a Search Bar Organism can contain a Button molecule and a Text Field atom together.

The first layer of components are known as atoms, and are generally a single UI element such as a Text View. Each atom contains color, typography and iconography data when applicable.

Installation

The Atomik dependency is located in Maven Central, and should be added to your commonMain source set in your Kotlin Multiplatform module.

implementation("io.github.kevinschildhorn:atomik:X.Y.Z")

Getting Started​

note

As this library is evolving some logic may change.

Atomik has a lot of components and can be hard to jump into. Documentation on each aspect can be found under Core Concepts.

Components:

  • Atoms - The building blocks of Atomik. Modular UI data that can be applied to UI elements
  • Molecules and beyond - A hierarchy of atom groups, each containing multiple of their respective subgroup
  • Design Systems - A collection of Atoms, Colors, Typographies and Iconographies.

In addition to components, Atomik has specific shared UI details:

  • AtomikColor - A common representation of Color, either with Hex or RGBA values
  • AtomikTypography - A common representation of Typography, such as font, size, and weight.
  • AtomikIconography - TBD

Example​

While it's recommended to read more of the core concepts first, here is a preview of what an Atomik design system looks like.

Atom​

val color = AtomikColor(r = 100, g = 100, b = 100, a = null)

val sampleAtom = FigmaShapeAtom(
    constraintX = AtomikConstraintX.ALIGN_LEFT,
    constraintY = AtomikConstraintY.ALIGN_TOP,
    color = color,
)

Design System​

val color = AtomikColor(r = 100, g = 100, b = 100, a = null)
val typography = AtomikTypography(size = 14)

val colorSet = DefaultColorSet(
    primary = color,
    ...
)

val typographySet = DefaultTypographySet(
    body = typography,
    ...
)

val designSystem = DefaultDesignSystem(
    colorSet = colorSet,
    typographySet = typographySet,
    components = mapOf("sample" to sampleAtom),
    fontFamily = null,
)

Platform Code​

danger

These calls will be updated in the future to be more generalized

view.applyColorAtom(yourAtom)