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:
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.
