Jamie Esterman
Design Systems help provide a consistent and cohesive user experience, ensuring a seamless interaction across different products, brands and platforms.
They also promote efficiency and scalability by providing reusable components and guidelines, saving time and effort for both designers and engineers.
Recent Design System examples:
I have been designing and building front-end technology for over 20 years - nothing I have used to date will increase the speed between design and engineering more than Design Systems. More specifically, using design-tokens to link the variables of components in a Design System Library in Sketch or Figma to the components in a React.JS front-end and CSS framework like TailWind.
Recently I have been using Figma Variables to create theme configuration to allow easy switching between multiple brands that share the same React.JS components - however it is limited to colours, border radius and padding. Supplying the engineers with a JSON export of the theme configuration that references TailWind tokens has been a huge efficiency gain.
Figma Plugins I have been using:
- Tokens Studio for Figma
- variables2css
- variables2json
- Propstar
I have been directly responsible for the setup and design of the following Design Systems in Figma:
- 2023 - Home Loan consumer website with rates, product cards and calculators - tokens match Tailwind.css
- 2023 - Home Loan application process with white-label multi-brand capability - tokens match chadcn and Tailwind.css
- 2020 - XAI SaaS Loan Assessment software - configured to work with StoryBook & Ant.d front-end framework
SaaS Product Design System example
In my time as Lead Product Design at Tic:Toc Home Loans I extended a Design System Ant.d and ran a team including front-end engineers that build and extend the components and document them in StoryBook.
Storybook: Frontend workshop for UI development
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.
storybook.js.org
Ant Design - The world's second most popular React UI framework
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
ant.design
