Logan Livingston
Logan LivingstonSenior Design Systems Engineer, Little Rock

I build design systems designers trust and engineers want to use.

Twelve years in front-end, the last six building and scaling FICO's IRIS design system. I work where Figma meets the codebase: tokens, theming, accessibility, and now AI tooling that writes on-system UI.

Email me View LinkedIn

From front-end developer to design systems engineer

  1. 2014

    Front-end at Dillard's

    Shared Angular component libraries and CSS-variable theming, before "design system" was in my title.

  2. 2020

    Built IRIS

    Joined FICO as Lead UI Engineer and built the design system from scratch on the Angular CDK.

  3. 2022

    Scaled it

    As Senior UI Engineer, grew IRIS to 50 dependent domains across legacy and modern platforms.

  4. 2023

    Proved it

    Led the rewrite of Falcon Fraud, a $250M product, using nothing but IRIS components.

  5. Now

    AI for design systems

    Agent skills that turn requirements and Figma mocks into on-system code.

IRIS, FICO's design system

I started IRIS in 2020 with one or two teams using it. Today 50 domains across FICO's legacy and modern platforms depend on it, and marketing and product share one token language. I've built more than 90 components for it, in both the core design system library and the platform.

The IRIS documentation site home page: a sidebar for Home, Get Started, Patterns, Typography, Iconography and Components, and the headline Build better, accessible UIs faster with IRIS and Angular.
The IRIS docs site: patterns, typography, iconography and a component library with live examples developers can edit without touching production code.
90+

Components built

Across the core IRIS library and the platform layer built on top of it, covering everything from basic controls to full application patterns.

1–2 → 50

Teams to dependent domains

Adoption grew through weekly office hours, live StackBlitz examples, release notes in the shared Teams channel, and hands-on help with Angular upgrades.

$250M

Falcon Fraud, rebuilt on IRIS

In 2023 we led the rewrite of Falcon Fraud and built it entirely from IRIS components. Dogfooding the system on a flagship product proved it could carry a full modern application.

Screenshot: Falcon Fraud, light themeA key screen built entirely from IRIS components. 1600 × 1000 px.
Falcon Fraud, rebuilt in 2023 using only IRIS components.
Screenshot: same screen, dark themeThe identical screen after a token-only theme switch. 1600 × 1000 px.
The same screen in dark mode. No component code changed, only tokens.

Theming

Light and dark themes ship today, with light-alt and dark-alt built into the token library and ready to turn on. The switcher at the top of this page shows the idea.

Accessibility

We partnered with an accessibility consultancy on a WCAG AA audit and remediated every component. Building on the Angular CDK gave us full control over behavior and focus.

Beyond Angular

Semantic tokens and SCSS utilities for spacing, surfaces, typography, and icons let non-Angular teams match the IRIS look and feel.

Docs and quality

A documentation site with ephemeral StackBlitz examples, a Playwright test harness, semantic versioning, and release logs keep 50 domains confident in every update.

Tokens from Figma to production

We defined one token naming strategy across marketing and product, then automated the handoff. A theme change that used to need developer time now ships by running one GitHub Action.

  1. FigmaTokens defined by design
  2. Figma APITokens pulled automatically
  3. GitHub ActionBuild runs on demand
  4. CSS custom propertiesPublished in the library
  5. IRIS componentsEvery app updates
Figma variables panel for the Product Components file, showing a tokens collection of 315 variables grouped into space, radius, stroke, surface and button, with the surface base tokens open.
Where every theme starts: tokens defined in Figma, before the pipeline turns them into CSS.
The FICO Platform help site, a documentation site built with Hugo, showing a hero, a grid of platform topics and a how-it-works diagram.
IRIS without the components: the FICO Platform help site is built in Hugo and gets its look from IRIS tokens and styles alone.

AI that writes on-system UI

When AI writes UI, it should write your UI.

Over the last few years I've focused on making IRIS something AI tools can use correctly, not just something people can.

Requirements to working features
An agent skill that turns a product requirements document into a working Angular feature, with validated plans, IRIS generators, mock data, and scripted quality gates.
Token-based prototyping
A skill that builds framework-free HTML prototypes from IRIS tokens, so ideas look like the real product from the first draft.
Wireframes agents can read
A shared wireframe system with a fixed grid, a signature for each IRIS component, and full-page templates that other skills build on.
Figma MCP prototyping
Prototypes generated straight from design mocks, shortening the path from design to working UI.
Code review on every PR
An AI review agent runs when a pull request opens, keeping quality consistent across contributors.
Teaching the team
I mentor our junior engineers on best practices, code review, and working effectively with AI.
Screenshot or video: an agent skill in actionFor example, a PRD becoming a scaffolded feature, or a Figma mock becoming a prototype. 1600 × 800 px.
An AI agent building with IRIS components instead of improvising its own UI.

More work beyond design systems

Before and alongside IRIS, I've designed, built and shipped products end to end.

In-store map and digital displays. I was the product owner from purchase to launch: buying the screens, working with vendors, building the UI and deploying the app.
Dillard's mobile app. I designed the UI in Adobe XD and built it with the team, including this multi-card layout.

Experience

2022 – Present

Senior UI Engineer, Design Systems

FICO · Remote

Scaled IRIS to 50 domains, led the Falcon Fraud rewrite, built the token pipeline and theming, ran the WCAG AA audit, brought AI into our workflow, and lead the team's junior engineers.

2020 – 2022

Lead UI Engineer, Design Systems

FICO · Remote

Built IRIS from scratch, defined the token naming strategy, set up the Nx monorepo and a Module Federation micro-frontend reference, and drove early adoption.

2014 – 2020

Front-end Developer / UX Designer

Dillard's · Little Rock

Designed and built internal and customer-facing apps, migrated the e-commerce CMS to Angular, built shared component libraries, and taught JavaScript and Angular classes.

2013

BBA in Management Information Systems, Cum Laude

University of Central Arkansas

Speaking

Event card for the ViteConf 2024 workshop Shake Up Your Design System, a virtual mixology class and panel discussion on October 3, 2024, with speakers Joshua Godi of Netflix and Logan Livingston of FICO.
ViteConf 2024

Shake Up Your Design System

Co-hosted a virtual mixology class and panel discussion for design system leaders with Joshua Godi of Netflix.

Logan presenting a Module Federation talk at Google, next to a slide reading Module Federation, FICO platform insights.
Google Enterprise Summit 2020

Micro-frontends and Module Federation

Presented FICO's micro-frontend approach to the Angular core team and enterprise Angular developers.

What I work with

Design systems

Figma and the Figma API, design tokens, theming, component documentation, WCAG AA

Engineering

Angular and the Angular CDK, TypeScript, JavaScript, CSS and SCSS, Nx, Playwright, Cypress, GitHub Actions

AI

Agent skills, Figma MCP, AI code review, AI-assisted development

Let's talk about design systems.

Tokens, theming, accessibility, or getting AI to build with your components. I'm always happy to compare notes.

logan.livingston92@gmail.com LinkedIn