UI Artist

EA Sports · Shanghai

Mid Art Posted 2026-08-26 Full time

Apply on EA Sports’s site →

UI Artist - 215285 - Electronic Arts

/* ===========================================================================

ELEMENTS

--------------------------------------------------------------------------

Buttons

: Actions

: Add

: Delete

: Edit

: Remove

: Iconographics

: Close

: Vendors

: Registration/application

: Customizables

External

: Thumbnails

Fields

COMPONENTS

--------------------------------------------------------------------------

Navigation

: Menu (Dynamic)

MODULES

--------------------------------------------------------------------------

Banner

: Home

PAGETYPES

--------------------------------------------------------------------------

=========================================================================== */

ELEMENTS/Buttons: Actions

/* to de deleted after we migrate to typographic icons (this is here and not in core.css due to a FF bug) */

.action:before,

.addDatasetRow:before,

.removeDatasetRow:before,

.removeFile:before,

[id*="dropboxRemove_"]:before,

.fileInputCancelButton:before {

mask-image: var(--action__icon--background--image);

-webkit-mask-image: var(--action__icon--background--image);

}

ELEMENTS/Buttons: Actions: Add

.addDatasetRow,

.action--add {

--action__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--add.webp);

}

ELEMENTS/Buttons: Actions: Delete

.action--delete {

--action__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--remove.webp);

}

ELEMENTS/Buttons: Actions: Edit

.action--edit {

--action__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--edit.svg);

}

ELEMENTS/Buttons: Actions: Remove

.removeDatasetRow,

.removeFile,

[id*="dropboxRemove_"],

.fileInputCancelButton,

.action--remove {

--action__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--remove.webp);

}

ELEMENTS/Buttons: Iconographics: Close

.ui-button.ui-dialog-titlebar-close,

.TIN_display_CloserButton_NotificationAndDialog,

.autoschedule_editor_availability_header_Container_HeaderButton {

--button__icon--background--image: url(https://jobs.ea.com/portal/4/images/close.svg);

}

ELEMENTS/Buttons: Vendors: Registration/application: Customizables

.methodButton--later {

--buttons__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--later.svg);

}

.methodButton--file {

--buttons__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--file.svg);

}

.methodButton--paste {

--buttons__icon--background--image: url(https://jobs.ea.com/portal/4/images/icon--paste.svg);

}

/* to de deleted after we migrate to typographic icons (this is here and not in core.css due to a FF bug) */

.methodButton--later:before,

.methodButton--file:before,

.methodButton--paste:before {

mask-image: var(--buttons__icon--background--image);

-webkit-mask-image: var(--buttons__icon--background--image);

}

ELEMENTS/Icons: Shrare buttons

:root {

--icon--share--whatsapp: url(https://jobs.ea.com/portal/4/images/icon--share--whatsapp.svg);

--icon--share--linkedin: url(https://jobs.ea.com/portal/4/images/icon--share--linkedin.svg);

}

ELEMENTS/External: Thumbnails

:root {

--thumbnail--border--radius: 100%;

--thumbnail--border--width: 0;

--thumbnail--border--color: transparent;

--thumbnail--width: calc(var(--sizing--basis) * 8); /* 3.2rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 8); /* 3.2rem +doc+ */

}

ELEMENTS/External: Thumbnails (Within LAYOUTS/Structures: Section)

.section__header__image {

--thumbnail--width: calc(var(--sizing--basis) * 14); /* 5.6rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 14); /* 5.6rem +doc+ */

}

ELEMENTS/External: Thumbnails (Within COMPONENTS/Cards)

.table--cards {

--thumbnail--width: calc(var(--sizing--basis) * 10); /* 4rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 10); /* 4rem +doc+ */

}

ELEMENTS/External: Thumbnails (Within COMPONENTS/Navigation: Menu)

.menu__link {

--thumbnail--width: calc(var(--sizing--basis) * 6); /* 2.4rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 6); /* 2.4rem +doc+ */

}

.submenu__link,

.portalLanguages__link {

--thumbnail--width: calc(var(--sizing--basis) * 4); /* 1.6rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 4); /* 1.6rem +doc+ */

}

ELEMENTS/External: Thumbnails (Within WIDGETS/Forms: Types: FileField)

.FileField {

--thumbnail--background--image: url(https://jobs.ea.com/portal/4/images/icon--user.svg);

}

ELEMENTS/External: Thumbnails (Within MODULES/Banner)

.banner {

--thumbnail--border--width: .2rem;

--thumbnail--border--color: var(--color--white);

--thumbnail--width: calc(var(--sizing--basis) * 16); /* 6.2rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 16); /* 6.2rem +doc+ */

}

.banner--scrolling {

--thumbnail--width: calc(var(--sizing--basis) * 10); /* 4rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 10); /* 4rem +doc+ */

}

/* Media query to target mobile and tablet */

@media all and (max-width:1024px) {

.banner {

--thumbnail--width: calc(var(--sizing--basis) * 10); /* 4rem +doc+ */

--thumbnail--height: calc(var(--sizing--basis) * 10); /* 4rem +doc+ */

}

ELEMENTS/Fields

:root {

--fields--icon--caret--down: url(https://jobs.ea.com/portal/4/images/icon--caret--down.svg);

--fields--icon--caret--down--disabled: url(https://jobs.ea.com/portal/4/images/icon--caret--down--disabled.svg);

--fields--icon--caret--up: url(https://jobs.ea.com/portal/4/images/icon--caret--up.svg);

--fields--icon--clear: url(https://jobs.ea.com/portal/4/images/icon--clear.svg);

}

COMPONENTS/Navigation: Menu (Dynamic)

@media all and (max-width:1024px) {

:root {

--header--height: 5.5rem;

}

@media all and (min-width:1024px) {

.body--menu--threshold .menu--visible .menu__panel {

flex-wrap: nowrap;

justify-content: flex-end;

align-items: flex-start;

border-top: solid .1rem var(--dividers--border--color);

padding-top: var(--header--padding--top);

margin-top: var(--header--padding--top);

}

.body--menu--threshold .menu__list {

flex-wrap: wrap;

justify-content: flex-start;

}

.body--menu--threshold .header__content {

flex-direction: column;

align-items: flex-start;

}

.body--menu--threshold .header__menu {

width: 100%;

}

.body--menu--threshold .menu--visible .menu__list {

flex-grow: 1;

}

PAGETYPES/Login

:root {

--login__body--background--image: url(https://jobs.ea.com/portal/4/images/login--bg--desktop.webp);

}

/* Media query to target only tablet */

@media all and (min-width:751px) and (max-width:1024px) {

:root {

--login__body--background--image: url(https://jobs.ea.com/portal/4/images/login--bg--desktop.webp);

}

/* Media query to target only mobile */

@media all and (max-width:750px) {

:root {

--login__body--background--image: url(https://jobs.ea.com/portal/4/images/login--bg--desktop.webp);

}

EventManager.getInstance().addEventHandler(EventManager.EVENT_LOAD_NAME, function () {

}, EventManager.PRIORITY_HIGH);

Electronic Arts

Open Roles

About EA

EA Careers

EA News

English - US

Chinese English - US Finnish Français Italian Korean Malay Polish Romanian Spanish Swedish

UI Artist

Home

...

Open Roles

Role Detail

General Information

Locations : Shanghai, Shanghai, China

Role ID

215285

Worker Type

Regular Employee

Studio/Department

EA Studios - SPORTS

Work Model

Hybrid

Description & Requirements

Electronic Arts creates next-level entertainment experiences that inspire players and fans around the world. Here, everyone is part of the story. Part of a community that connects across the globe. A place where creativity thrives, new perspectives are invited, and ideas matter. A team where everyone makes play happen.

About FC Mobile For more product information, please click the FC Mobile official website link to learn more: https://www.ea.com/zh-hk/games/ea-sports-fc/fc-mobile Job Description This is a game UI design role within the Art discipline, with a strong focus on visual design. The role explores the game’s brand and visual style and turns them into high-quality UI designs. The ideal candidate has strong art and design skills, excellent visual judgment, and solid experience with graphic and UI design tools. They should also understand mobile game UI frameworks and interaction design to ensure their designs are visually appealing, easy to use, and practical to implement.

Responsibilities Explore visual concepts for the brand, the game’s overall visual style, and UI presentation.

Create highly polished UI mockups in Figma that match the game’s overall art direction and brand key visual.

Create and refine production-ready visual assets for final delivery and in-game implementation, including UI graphics, patterns, icons, textures, and decorative elements.

Stay current with visual design and game UI trends, and explore ways to bring fresh and relevant visual styles into our games.

Create and maintain a well-structured, easy-to-use UI Design Kit for the art team.

Build interactive prototypes in Figma to communicate UI flows, states, and interaction behavior clearly.

Collaborate with cross-functional and regional teams, estimate workloads, and balance visual quality, scope, and delivery timelines.

Demonstrate strong self-motivation, teamwork, and a commitment to excellent design quality.

Requirements Three or more years of experience in game UI, visual design, or a related game art field.

Strong art and graphic design skills in typography, color, layout, composition, and icon design.

Ability to explore the game’s brand and visual style and turn them into cohesive, high-quality UI designs.

Proficiency in Figma for UI design and prototyping, as well as vector and raster tools for asset creation.

Solid knowledge of mobile game UI frameworks and interaction design, ensuring designs are clear, easy to use, and feasible to implement.

Understanding of mobile UI production, including components, resolution, scaling, asset formats, performance, memory, and platform constraints.

Stay current with visual design and game UI trends and explore new visual styles.

Passion for football and football video games, with a strong eye for football-related visuals; relevant personal projects are a plus.

Experience with game engines and UI editors is preferred.

Strong communication, collaboration, ownership, and commitment to design quality.

About Electronic Arts We’re proud to have an extensive portfolio of games and experiences, locations around the world, and opportunities across EA. We value adaptability, resilience, creativity, and curiosity. From leadership that brings out your potential, to creating space for learning and experimenting, we empower you to do great work and pursue opportunities for growth.

We adopt a holistic approach to our benefits programs, emphasizing physical, emotional, financial, career, and community wellness to support a balanced life. Our packages are tailored to meet local needs and may include healthcare coverage, mental well-being support, retirement savings, paid time off, family leaves, complimentary games, and more. We nurture environments where our teams can always bring their best to what they do.

Electronic Arts is an equal opportunity employer. All employment decisions are made without regard to race, color, national origin, ancestry, sex, gender, gender identity or expression, sexual orientation, age, genetic information, religion, disability, medical condition, pregnancy, marital status, family status, veteran status, or any other characteristic protected by law. We will also consider employment qualified applicants with criminal records in accordance with applicable law. EA also makes workplace accommodations for qualified individuals with disabilities as required by applicable law.

Post To

External careers site, Internal careers site

LinkedInID

74884070

Back to Role List

Apply

Share this role:

Facebook

2026

Electronic Arts Inc.

2026

Candidate Privacy Notice

Notice at Collection (California)

/**

* This variable will define every property we need to pass to Templates core library as we can't define twig variables on JS files.

var twigConfig = {

"pageParameters": {

"personSort": null,

"personSortDirection": null,

"jobSort": null,

"jobSortDirection": null,

"jobRecordsPerPage": "",

"personRecordsPerPage": ""

"jobLabel": "job",

"STEP_INDEX": "" || null,

"wizardModalViewEnabled": "" || false,

"wizardHasErrors": "" || false,

"sortedBy": "Sorted by ",

"loading": "Loading ",

"plugins": {

"popper": {

"js": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/tippy/popper.min.js"

"tooltip": {

"js": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/tippy/tippy-bundle.umd.js",

"css": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/tippy/tippy.css"

"popup": {

"js": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/glightbox/glightbox.min.js",

"css": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/glightbox/glightbox.min.css"

"slider": {

"js": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/swiper/swiper-bundle.min.js",

"css": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/swiper/swiper-bundle.min.css"

"google": {

"jsMarkerCluster": "https://templates-static-assets.avacdn.net/jsLibrary/plugins/googlemaps/markerclusterer.js",

"apiKey": ""

}

"menu": {"typeByDefault":"visible","itemsThreshold":8,"headerHeightDefault":5.5,"typeBelowBreakpoint":{"enabled":true,"type":"toggleable","breakpoint":1024},"toggleSide":"right","panelFrom":"right","panelEffect":"over"},

"search": {"typeByDefault":"visible","typeBelowBreakpoint":{"enabled":true,"type":"toggleable","breakpoint":1024,"preventTabsConflicts":true}},

"results": {"resultsDisplayTypeByDefault":"listed","resultsDisplayTypeBelowBreakpoint":{"enabled":true,"type":"grided","breakpoint":750},"resultsItemTypeByDefault":"result","resultsItemTypeBelowBreakpoint":{"enabled":true,"type":"card","breakpoint":750}},

"stickyAside": 0,

"stickyHeader": 1,

"stickyBanner": 0,

"page": {

"PORTAL_BASE_REAL_URL": "https://jobs.ea.com/portal/4",

"wizardPageBackTo": "",

"relatedJobs": {

"relatedJobsEnabled": 1,

"url": "https://jobs.ea.com/en_US/careers/WidgetRelatedJobs?3_139_3=8300&jobId=215285",

"selector": "#relatedJobs"

"convertDatesToUserTZ": {

"CSSClass": "timelocal",

"convertDatesToUserTZEnabled": 1,

"loggedUserTZ": Intl.DateTimeFormat().resolvedOptions().timeZone,

"weekday": "long",

"day": "numeric",

"month": "long",

"hour": "numeric",

"minute": "numeric",

"hour12": "1",

"userLang": "en_US",

"breadcrumbsEnabled": 1,

"googleMapsEnabled": 0,

"googleMarkerClusterEnabled": 0,

"googleParameters": {

"dataUrl": "//jobs.ea.com/en_US/careers/Home/215285",

"centerLatitude": 0,

"centerLongitude": 0,

"startZoom": 3,

"infoWindowCSSClassDiv": "info-window",

"infoWindowCSSClassHeader": "info-window__header",

"infoWindowCSSClassLink": "link info-window__link"

"browsingHistory": {

"browsingHistoryEnabled": 1,

"url": "https://jobs.ea.com/en_US/careers/BrowsingHistoryList?3_139_3=%5B8300%5D",

"selector": "#browsingHistory"

"widgetRelatedJobs": {

"relatedJobsEnabled": 1,

"url": "https://jobs.ea.com/en_US/careers/WidgetRelatedJobs?3_139_3=8300&jobId=215285",

"selector": "#widgetRelatedJobs"

"widgetOpenPositions":{

"url": "",

"selector": "#widgetOpenPositions"

"widgetRecommendations":{

"widgetRecommendationsEnabled": 1,

"url": "",

"selector": "#widgetRecommendations"

"languageSwitcherFlagsPath": "https://templates-static-assets.avacdn.net/assets/flags",

"enableLanguageSwitcherFlags": 0,

"enableSectionCollapsibleAccordionDisplay": 0

};

var lightbox;

var slider;

var Templates;

pjQuery(function() { var domManager = new DomManager(); domManager.run(); });

var service = EventManager.getInstance();

Posted by EA Sports and synced from their own careers page. DevQuest doesn’t take a fee, doesn’t sit between you and the studio, and doesn’t sell your data — you apply directly with them.

More like this: Art jobs · All EA Sports openings · Browse every category