Primitives are a new type of component for layouts, styling, and the placement of elements. They actas building blocks to compose different parts of the user experience, from the smallest designdecisions (for example, the spacing around an icon) to larger layout decisions (for example, how apage is structured).
Primitives are powered by design tokens and make it easier to apply design decisions. This reducescognitive overhead, improves productivity and prevents accidents or mistakes.
Primitives are used together to compose complex designs not otherwise implemented directly in theDesign System. Currently, three layout primitive components are available:
- in a container (see box)
- horizontally (see inline)
- vertically (see stack)
Additional layouts not well-expressed by these core primitives can also be composed using:
Interactive primitives can be used to build:
To install primitive components, add @atlaskit/primitives as a dependency on your project:
$ yarn add @atlaskit/primitives
Use primitives for composing layouts. Primitives are not currently available in Figma, so the firststep in implementing primitive components is identifying where they might fit in a given design.This involves breaking down a design into its core layout components to as granular level as isuseful.
You might like to think first about breaking down a page into Box
containers, identifying largerpieces of a design that function in a similar manner or fulfill a singular purpose in a layout andgrouping them together under a Box
.
The behavior within and around these boxes can then be broken down into their horizontal Inline
and vertical Stack
components.
The ESLint rule
use-primitives offers suggestions for possible primitives to apply in a layout.
We use this feedback to improve our documentation.
FAQs
Primitives are a new type of component for layouts, styling, and the placement of elements. They act as building blocks to compose different parts of the user experience, from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).
What are design primitives? ›
Primitives are composable components that provide opinionated solutions to common design and layout problems. Primitive components are a new type of component that assist with layout and the visual placement of child elements.
What are components in a design system? ›
What are components in a design system? Design components are the functional factors of a user interface (UI). Components are derived from design elements that come together after the whole design thinking process. Such as color, typography, and spacing.
What are components Atlassian? ›
Components are subsections of a project. They are used to group issues within a project into smaller parts. For example, teams may use components to group issues that describe work on specific data objects, services, plug-ins, or APIs within their project. You can set a default assignee for a component.
What are the 5 components of design? ›
The elements are your tools or raw materials, much like paints are the basics to a painter. The five elements of interior design include space, line, form, color, and texture. The principles of design relate to how you use these elements and are balance, emphasis, rhythm, proportion and scale, and harmony and unity.
What are the 3 major components of the system design phase? ›
In successful systems design, three main components must be considered and managed effectively. These are quality, timeliness and cost-effectiveness.
What are UI primitives? ›
Some kind of UI entity that can be used to build more sophisticated UI constructs. For example a hypertext link can be thought of as a UI primitive, as can some type of 'out of the box' border for a UI element that is provided by some kind of UI framework.
What are the primitives of a model? ›
A Primitive Model is a 3D base shape that can be added to a 3D document. Primitives allow for the dynamic procedural generation of various simple 3D geometries from within a 3D Document. The Primitive Model Types available are: Cube (will be added by default)
What is the concept of primitives? ›
In mathematics, logic, philosophy, and formal systems, a primitive notion is a concept that is not defined in terms of previously-defined concepts. It is often motivated informally, usually by an appeal to intuition and everyday experience.
What is the Atlassian design system? ›
Atlassian design system is a platform used to create simple, intuitive, and beautiful user experience tools. In simple terms, the Atlassian design system is used to create software development and collaboration tools. The likes of Jira and Trello are just some of the examples of tools created with Atlassian.
The 7 Elements of Design
- Line.
- Shape.
- Form.
- Value.
- Color.
- Texture.
- Space.
- Back to Design Basics Home.
How to group design system components? ›
Design System- Grouping and naming components
- Visual identity: brand color, images, typography ….
- Principles: Voice and tone, brand values, objectives…
- Best practices: Accessibility, UX, training documents….
- Components and patterns: the building block of digital products.
What is the difference between labels and components in Atlassian? ›
Labels can be used worldwide, while Components work better for grouping within projects. Consistency and user friendliness are ensured when an admin sets the component. Additionally, it makes sure that the team consistently groups the tasks that make up a project.
What is Atlassian structure? ›
Structure for Jira helps Atlassian's largest customers visualize, track and manage progress across Jira projects and teams. It does this with adaptable, user-defined, issue hierarchies presented in a familiar spreadsheet-like view of Jira issues.
How to define components in Jira? ›
Create a Jira component
- In your project sidebar, select Components.
- Next to Create component, check that the project is using Jira components and not Compass components. ...
- Select Create component.
- Fill out the new component's information. ...
- Select Save.
What is a primitive design? ›
The primitive style is best represented by practical items, hand-made, of an antique age, and with a worn appearance. Primitive wood is unrefined and plain, with the grain on show. Elements of Americana are often detectable.
What are the 4 types of system design? ›
What are the 4 types of system design?
- Monolithic Architecture: Simplifying Complexity. ...
- Client-Server Model: Serving Up Solutions. ...
- Microservices Architecture: Building Blocks of Innovation. ...
- Service-Oriented Architecture (SOA): The Supermarket of Solutions.
What are the 4 parts of design? ›
The basic elements of design are:
- Color: Color helps establish a mood for your composition. ...
- Line: Line refers to the way that two points in space are connected. ...
- Value: In design, value refers to the lightness or darkness of a color. ...
- Space: Making proper use of space can help others view your design as you intended.
What are the three major components of work system design? ›
The major components of work system design are job design, process (methods) analysis and work measurement. Job design determines the specific work activities of each employee or type of employee. Process analysis focuses on the detailed steps of doing a particular job.