Skip to content
Check resume
Product & Design

UI Designer resume example

UI design is judged on craft you can point to: type scales, spacing systems, component states and screens that hold up at every breakpoint. Your resume should name the design system you built or maintained, how many components and tokens it covered, the platforms it shipped on, and how cleanly engineers could build from your files. Contrast and focus states belong there too.

Updated

Mariela Duarte

UI Designer | Design Systems for Fintech Web & Mobile | 90 components, light and dark themes

  • Austin, TX
  • mariela.duarte@example.com
  • +1 (512) 555-0139
  • linkedin.com/in/your-name

Summary

UI designer with six years on fintech and payments products, focused on design systems and visual detail. Maintains a Figma library of 90 components with variables for light and dark themes, tokens that map to code, and a contrast-tested color ramp. Reviews every release build with engineers. Bilingual in English and Spanish and designs with longer translated strings in mind.

Work Experience

UI Designer

Feb 2022 – Present

Barton Springs Payments · Austin, TX

  • Maintain a 90-component Figma system with light and dark themes, used by 4 product squads and 28 engineers.
  • Replaced 130 hard-coded colors with 34 semantic tokens, and the dark theme shipped in 2 sprints instead of a quarter.
  • Cut design QA tickets per release from 26 to 12 by adding state tables and annotated specs to every handoff.

Visual Designer

Jun 2019 – Jan 2022

Pedernales Credit Union Digital · Round Rock, TX

  • Redesigned the mobile banking dashboard and transfer screens for 85,000 members, with Spanish-language layouts.
  • Fixed 38 contrast failures found in an accessibility audit by rebuilding the brand color ramp.
  • Drew a 180-icon set on a shared grid, replacing 3 libraries that had drifted apart.

Junior Designer

Jan 2018 – May 2019

Lamar Street Creative · Austin, TX

  • Designed landing pages and app store screenshots for 12 startup clients in the agency's first year.
  • Built the agency's first shared Figma library, cutting setup time on new client files by half.

Education

Bachelor of Fine Arts, Communication Design

2013 – 2017

Texas State University

Skills

Core competencies

  • Figma Components & Variables
  • Design Tokens & Theming
  • WCAG 2.2 AA Visual Checks

Visual Design

  • Type Scales
  • Color Ramps
  • Icon Systems
  • 8-Point Grid

Build Partnership

  • Figma Dev Mode Specs
  • Storybook Review
  • Motion Specs in Protopie
  • Release Design QA

Certifications

  • Certified Professional in Accessibility Core Competencies (CPACC) · International Association of Accessibility Professionals (IAAP), 2023

Languages

  • English · Native
  • Spanish · Native

The full sample as text. Rendered in the Atrium template, which has a photo slot: it suits markets that expect one, not US applicant tracking systems.

Fictional person: the name and contact details are invented. Any resemblance to a real person is coincidental.

UI Designer resume summary examples

Pick the one closest to your level and replace the specifics with your own.

  • Entry level

    Junior UI designer with a visual communication degree and a year of contract work on marketing apps. Builds Figma components with variants and auto layout, sets type on a modular scale and checks every color pair for WCAG AA contrast. Designed 40 screens for a fitness booking app now in both app stores. Comfortable reading CSS in the browser.

  • Mid level

    UI designer with five years on fintech web and mobile products. Maintains a design system of 90 components and a full token set in Figma variables, with light and dark themes. Works daily with React and SwiftUI engineers and reviews builds before release. Cut design QA tickets per release by half after reworking handoff specs.

  • Senior

    Senior UI designer and design system lead with ten years across consumer and enterprise software. Built a multi-brand system used by 6 product teams, with tokens synced to code and documented usage rules. Sets visual direction for new products, coaches 4 designers on craft and accessibility, and partners with engineering leads on component roadmaps. IAAP CPACC certified.

Common mistakes on a UI designer resume

  • Describing tools instead of visual decisions

    Fix: "Proficient in Figma" is true of every applicant. Show what you decided in Figma: a type scale with 7 steps, an 8-point spacing grid, a color ramp with contrast-tested pairs, or a card component with 12 variants. The reader wants evidence of a system behind your screens, not a list of software.

  • Leaving out states and edge cases

    Fix: Screens in a portfolio are usually the happy path. A UI designer who shipped real products thought about hover, focus, disabled, loading, error and empty states, plus long names and translated text. Mention the states you design by default and one bug you prevented by drawing an edge case before development.

  • No word about handoff and build quality

    Fix: Engineers are part of your audience. Describe how you hand off: tokens named to match code, annotated specs, Dev Mode links, short videos for motion. Then show the result, such as fewer design QA tickets or a front end that matched the files. A line on reviewing builds against your designs shows you care how it ships.

  • A resume that ignores its own design

    Fix: Your resume is a sample of your layout and typography, but it still has to parse. Use one clear column for the text, a restrained type scale, consistent spacing and real text, not text in images. Put visual flair in the portfolio. A clean, well-set page shows more skill than a decorated one.

What should a UI designer resume include?

A UI designer resume should open with a two or three line summary of your focus, then show each role as results rather than duties. Name the skills the posting asks for, such as Typography Scale, Color Systems and Iconography. Start bullets with verbs like Designed, Systematized and Componentized, and give each one a number where you honestly have one. If you hold a credential such as NN/g UX Certification (Nielsen Norman Group), list it in its own section.

Visual craft

  • Typography Scale
  • Color Systems
  • Iconography
  • Grid & Spacing Systems
  • Visual Hierarchy
  • Illustration Direction

Design systems

  • Component Library
  • Variants & Properties
  • Design Tokens
  • Figma Variables
  • Theming (Light/Dark)
  • Usage Guidelines
  • Storybook

Interaction and motion

  • Interaction States
  • Micro-Interactions
  • Motion Specs
  • Prototyping
  • Protopie
  • Framer

Platforms

  • Responsive Web
  • iOS Human Interface Guidelines
  • Material Design 3
  • Breakpoints
  • Native Mobile UI

Accessibility and handoff

  • WCAG 2.2 AA
  • Contrast Ratios
  • Focus Indicators
  • Figma Dev Mode
  • Design QA
  • Annotated Specs

Action verbs

  • Designed
  • Systematized
  • Componentized
  • Refined
  • Animated
  • Standardized

Certifications

  • NN/g UX Certification (Nielsen Norman Group)
  • IAAP Certified Professional in Accessibility Core Competencies (CPACC)
  • Google UX Design Professional Certificate

Match these against the job posting you are applying to: the free resume checker shows which keywords your resume is missing.

UI Designer resume bullet examples

The numbers are illustrative. Keep the structure (verb, action, measurable result) and use figures you can back up.

  • Designed a component library of 85 Figma components with variants, used across web and mobile by 30 engineers.
  • Moved 140 hard-coded colors into 36 semantic tokens with Figma variables, making a dark theme possible in one sprint.
  • Standardized spacing on an 8-point grid, removing 60 one-off margin values found in a front-end audit.
  • Fixed 42 contrast failures across a banking app by rebuilding the color ramp to meet WCAG 2.2 AA.
  • Refined checkout screens with clearer hierarchy and button states, and the team measured a 9% lift in completed orders.
  • Animated loading and success states with short motion specs, cutting "did it work?" support tickets on payments by 20%.
  • Componentized a 12-page settings area into 9 reusable patterns, shortening new settings screens from 3 days to 1.
  • Reviewed every front-end build against design files before release, reducing visual bugs reaching production by 35%.
  • Created an icon set of 220 glyphs on a shared grid and stroke weight, replacing 3 mismatched libraries.
  • Ran monthly design system office hours for 5 product teams, closing 70 component requests in a year.

How to stand out as a UI designer applicant

Tailor every application to the posting: the resume, the cover letter and the answers you prepare for the interview.

  • Tailor the work you show to the product type

    A UI posting for a consumer app wants polish and motion, while an enterprise posting wants dense tables, forms and a strong system. Mirror the platform and product type in your headline, put the matching project first in your experience, and pick the two or three portfolio pieces that fit before you apply. Tailor your UI designer resume

  • Let the cover letter explain one design decision

    Pick a screen or component you are proud of and describe the decision behind it in a few sentences: the constraint, the options you tried and why you chose the final one. Mention how it was built and measured. Close by naming something specific you noticed about their product's interface. Draft a UI designer cover letter

  • Prepare a portfolio walk-through with the system behind it

    Interviews usually include a portfolio review. For each project, be ready to show the final screens, then zoom into the components, tokens and states behind them. Expect questions about how you handle design debt, how you work with engineers and how you check accessibility. Some teams add a short design exercise. Practice UI designer interview questions

  • Compare your work with a product designer's resume

    If a posting reads more like a product designer role, with research, flows and metrics, look at how those resumes frame the same work. Borrow the outcome language where it fits your real projects, and keep your visual system strengths up front so the page still reads as a UI specialist. See a product designer resume example

Salary (official data)

Official pay statistics for the occupation that matches this role, copied exactly as each statistics office publishes them.

  • United States

    Median gross annual pay: $104,000 a year · Median gross hourly pay: $50.00 an hour

    Middle half of earners: $73,290 to $158,820 · 10th to 90th percentile: $53,750 to $201,550

    Official occupation: Web and Digital Interface Designers (SOC 15-1255)

    Gross wages of employees in all industries, before deductions; excludes the self-employed.

    Source: U.S. Bureau of Labor Statistics, Occupational Employment and Wage Statistics, May 2025. Public domain.

  • United Kingdom

    Median gross annual pay: £50,963 a year

    Official occupation: Web design professionals (SOC 2020 2141)

    Gross annual pay of full-time employee jobs (employees on adult rates in the same job for more than a year).

    The publisher marks this estimate as less precise.

    Provisional figures: the publisher revises them a year later.

    Source: Office for National Statistics, Annual Survey of Hours and Earnings, tax year to 5 April 2026, licensed under the Open Government Licence v3.0.

  • Canada

    Median gross hourly pay: CA$50.48 an hour · Median gross weekly pay: CA$1,923 a week

    Official occupation group: Professional occupations in applied sciences (except engineering) (NOC 2021 212)

    Usual gross wages of full-time employees (30 hours or more a week) at their main job, including tips, commissions and bonuses.

    Source: Statistics Canada, Table 14-10-0417-01 Employee wages by occupation, annual, 2025. Reproduced and distributed on an "as is" basis with the permission of Statistics Canada (Statistics Canada Open Licence). This does not constitute an endorsement by Statistics Canada of this product.

  • Ireland

    Mean gross annual pay of the whole major group: €70,522 a year

    Major occupation group: Professionals (ISCO-08 2)

    Mean gross annual earnings, including bonuses, for the whole major occupation group in enterprises with 10 or more employees. Eurostat publishes no median by occupation.

    Source: Eurostat, Structure of Earnings Survey (earn_ses22_28), 2022, CC BY 4.0. Ruubu matched the role to an ISCO-08 major group; Eurostat is not responsible for this use of its data.

Figures cover everyone in the official occupation, at every experience level. They are not a job offer, a forecast or a Ruubu estimate. Ruubu matches each role to the closest official occupation. An official occupation can include related jobs.

How we choose and show official salary data

UI Designer resume questions

How is a UI designer resume different from a UX designer resume?

A UX resume leads with research, flows and problem framing. A UI resume leads with the visible layer: layout, typography, color, iconography, component libraries and states. You still mention user problems, but your proof is the quality and consistency of the interface and how well it was built. If a posting says UI/UX, show both, with UI first if the work samples are visual.

What should I write about a design system I did not start?

A design system is a team effort, so describe your part. Did you add components, rebuild variants with Figma variables, write usage guidelines, move colors into tokens or set up a dark theme? Give the count and the effect: fewer one-off styles, faster screens, fewer handoff questions. "Contributed 24 components to an existing system" is honest and useful.

Do I need to code as a UI designer?

It depends on the team. Some postings ask for HTML and CSS, others only want you to understand what is easy or hard to build. If you can read CSS, inspect a browser, or prototype in a tool such as Framer, say so in your skills line and give one example. Do not claim front-end development unless you have shipped production code.

How do I show accessibility in UI work?

Name the checks you run. Contrast ratios against WCAG 2.2 AA, visible focus indicators, touch target sizes, text that scales, and color never used as the only signal. Add a result if you have one, such as passing an accessibility audit or fixing 40 contrast failures across a product. The IAAP CPACC credential shows deeper study but is not required.

Keep reading

How we write and review resume examples: editorial policy.

Check your UI designer resume before you apply

Paste or upload your resume to get a score out of 100 from 14 checks, with a list of what to fix first.

Check my resume free
Try it free

Tailor your resume to the job you want