Design System

Project Name

Design System Igni

Role

Interface Designer

Team

1 Designer + 1 Developer

Tools

Figma, Webflow

A design system provides the foundation for a consistent and scalable digital platform. This system was created to save time and support the production of websites and other digital content for the marketing agency Igni.

For this project, I adopted the Atomic Design approach, organizing the interface into reusable elements, components, and patterns. Accessibility was a key consideration throughout the process. I also created clear and detailed specifications to support the development team and ensure that each component was implemented consistently.

One of many application is the website for the Agency.

See it in action

Atoms

Atoms are the least complex elements of the buckets, the base of our system. They refer to icons, buttons, avatars, fonts, spacing, etc. The Figma Design System is using tokens and variables to contain multiple values for fonts, sizes, colors and spacing. Responsive font sizes were also defined for desktop, mobile and tablet.

For the headings I used DM Sans font.

Molecules

Molecules are simple components. Like some of the atoms, I try to make every possible scenario and states. The Design System became a resource for the developers to check out how they need to implement the components based on the action of the users.

Organisms

Organisms are the most complex components. They include components like sliders, caroussels, card sections, testimonials, hero sections, etc.

Services provided

Website Design Brand Guidelines Visual Identity Prototyping Front Development Marketing Design

The steps behind the project were the creation of a prototype in Figma and the implementaion of the design in a Framework that allowed to improve performance with a single page application approach.

Go to Projects