Skill Guide
The systematic process of refining raw design assets (icons, illustrations, photos) through color correction, masking, and compositing in Photoshop, and organizing, prototyping, and preparing them for handoff within Figma's component-based design system.
Scenario
You are given a set of 15 rough, inconsistently styled SVG icons from a designer. They need to be prepared for a mobile app UI.
Scenario
A marketing team provides 20 high-resolution JPEG photographs (5-10MB each) for a website hero banner and gallery. The site's performance budget requires images under 200KB.
Scenario
A growing company's design and development teams are misaligned. Developers complain about inconsistent asset specs (sizes, formats, color profiles) across iOS, Android, and Web, leading to 15% of sprint time wasted on asset-related fixes.
Photoshop is used for raster image manipulation, photo retouching, and complex compositing before asset finalization. Figma is the central hub for vector asset creation, UI component architecture, prototyping, and developer handoff. The CLI and GUI compression tools are critical for the final performance optimization step in the pipeline.
Atomic Design provides the mental model for breaking UI into atoms, molecules, and organisms, which maps directly to Figma component structure. Design Tokens are the executable specifications (JSON, XML) that sync design decisions to code. SSOT and non-destructive editing are the core philosophies that prevent asset drift and enable iterative refinement without redoing work.
Answer Strategy
The interviewer is testing your technical workflow, attention to detail, and understanding of performance constraints. Use the 'Clean-Up → Vectorize → Optimize → Systemize' framework. Sample Answer: 'First, in Photoshop, I ensure the layer structure is clean and flatten if necessary, using the pen tool to create a precise path for export as a work path. I then export that path as an SVG. In Figma, I import the SVG, clean up any unnecessary points or groups, and standardize the stroke or fill to match our design system's color token. I convert it to a component, add any necessary variants (e.g., for hover states), and finally, I use the export settings to generate a minified SVG and optimized PNGs at required scales, confirming the file size is within our performance budget.'
Answer Strategy
Testing diagnostic skills and systematic problem-solving. The competency is 'Quality Assurance & Technical Communication'. Sample Answer: 'I would first verify the root cause: was the asset exported at the correct scale (e.g., 2x for Retina) and in the right format (SVG for vectors is preferred over raster)? I'd check my Figma export settings. If it's a raster asset, I'd re-export at the higher resolution. If it's an SVG, I'd inspect the code for any embedded raster effects or scaling issues. I'd then update the asset in our shared library, notify the developer of the fix, and propose adding a 'Dev QA' check to our handoff process to prevent recurrence.'
1 career found
Try a different search term.