Design System Expert focused on WCAG Accessibility standards. Building scalable, inclusive React components in Manchester, UK.
Senior UX Engineer creating accessible, WCAG-compliant digital experiences that drive business success.
I am a Senior UX Engineer based in Manchester, UK, with over 9 years of experience building accessible, scalable design systems. I focus on bridging the gap between design and development through UX engineering, WCAG 2.1 AA/AAA accessibility auditing, and React-based component libraries. I have built Figma plugins like Design System Sync (multi-format token export with GitHub integration) and Atomic Component Generator (AI-powered component creation). I also maintain the open-source Digiin Design System. On top of that, I have written books including 'The UX Laws Bible' and 'Beyond the Checklist,' and I regularly write about CSS architecture, design tokens, and inclusive design.
As a Senior UX Engineer and Design System Expert, I work closely with cross-functional teams to turn designs into production-ready React code while following WCAG accessibility standards.
My skills cover inclusive design, component libraries, design tokens, and user research. I build Figma plugins, Chrome extensions for accessibility testing, and scalable design systems that improve the experience for all users, including people with disabilities.
As a Figma Expert, I create plugins that bridge design and development. Creator of uxuiconexioncreativa Figma community with design system templates used by thousands of UX professionals.
Export Figma design tokens directly to your codebase. Multi-format export (W3C JSON, Style Dictionary, CSS Variables), GitHub & Bitbucket integration, auto-updating PRs.
AI-powered Figma plugin that creates professional, consistent UI components instantly. Simply describe what you need, and let the plugin do the work.
As a Web Accessibility Consultant and A11y Expert, I build Chrome extensions and tools that help developers create WCAG-compliant, inclusive digital experiences for users with disabilities.
Chrome extension that analyzes and converts any code to be WCAG compliant. Automatically suggests ARIA labels, semantic HTML, and accessibility improvements.
Suite of accessibility testing tools including screen reader simulation, focus order visualization, and color contrast checker.
Active contributor to the frontend development community with React components, accessibility tools, and design system utilities.
MCP server for WCAG accessibility analysis and code refactoring - 100% local and free
const server = new McpServer({
name: "wcag-accessibility",
version: "1.0.0"
});
server.analyzePage(html, {
level: "AA",
rules: ["aria", "color"]
});Sync Figma design tokens to code repositories. Multi-format export with GitHub & Bitbucket integration
const syncTokens = async () => {
const tokens = await extractFromFigma();
await exportToFormats(tokens, [
'css-variables',
'style-dictionary',
'w3c-json'
]);
};Modern responsive card slider using pure CSS with scroll-snap and interactive markers
.slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.slide {
scroll-snap-align: center;
}Track and analyze your trades with detailed journaling, statistics, and performance insights
const calculatePnL = (trades) => {
return trades.reduce((acc, trade) => {
const pnl = trade.exitPrice -
trade.entryPrice;
return acc + (pnl * trade.size);
}, 0);
};ISA investment calculator to project tax-free savings growth over time
const projectGrowth = (
initial, monthly, years, rate
) => {
let total = initial;
for (let i = 0; i < years * 12; i++) {
total = total * (1 + rate/12) + monthly;
}
return total;
};Professional UX/UI blog with e-commerce functionality built with React, Tailwind and Strapi
export default function BlogPost({
post
}) {
return (
<Article>
<MDXRemote source={post.content} />
<ShareButtons url={post.slug} />
Article>
);
}Developing UI systems and converting designs into React code. Ensuring pixel-perfect implementation of website components and integrating WCAG standards. Collaborating with cross-functional teams to optimize user experience and accessibility.
Led UX/UI design for SaaS freight transport product. Achieved 20% increase in user satisfaction, 15% decrease in user interaction time, and 10% productivity boost through user-centered design approaches.
Delivered comprehensive UX/UI design solutions including wireframes, user flows, and prototypes. Proficient in Figma, Photoshop, Illustrator, and React.js for rapid prototyping in Agile environments.
Implemented websites, mobile applications, and landing pages with responsive, mobile-first approach. Conducted UX and UI design assessments for technical feasibility.
Accessibility is not a bonus feature - it's basic respect. Let's build doors, not walls.
End-to-end design system creation by a Design System Expert. Includes React component libraries, design tokens, documentation, and governance frameworks with WCAG accessibility built-in.
Comprehensive WCAG 2.1 AA/AAA audits by a certified Accessibility Expert. Includes accessibility testing, screen reader compatibility, and remediation strategies for inclusive digital products.
Senior UX Engineer services translating complex Figma designs into pixel-perfect, accessible React code. Expert at bridging design and development teams.
Custom Figma plugin development and Chrome extensions to streamline your design-to-code workflow, automate design tokens, and enhance team productivity.
Need a UX engineer who builds design systems AND writes production code? Available for Design System consulting, WCAG accessibility audits, and UX Engineering projects. Based in Manchester, UK — working globally. Let's build something accessible and impactful together.