UI Designer: Design to Code

• Convert existing Figma screens into developer-ready, production-grade files (pixel-perfect, consistent, structured).
• Ensure all layouts are built with proper Auto Layout (including nested layouts, spacing, padding, constraints) suitable for Locofy conversion.
• Build and maintain reusable components + variants, properties, and consistent usage across screens.
• Apply and enforce design system standards (typography scale, spacing system, colors, radii, shadows, grids).
• Set up responsive behavior using constraints and layout rules (desktop/tablet/mobile patterns where relevant).
• Prepare clean handoff documentation inside Figma:
  - sectioning, page structure, annotations
  - interaction notes and edge-case notes (hover/active/disabled/loading/empty states)
• Standardize:
  - naming conventions (layers, frames, components)
  - ken-like styles (text styles, color styles, effects)
  - icon usage and sizing rules
• Coordinate with UI/UX designers and developers to ensure feasibility and consistency.
• Run handoff QA: check for missing states, inconsistent spacing, wrong constraints, broken components, or non-standard usage.

Locofy / Auto Layout Requirements (Core)

• Use Auto Layout everywhere it makes sense (buttons, cards, lists, nav, form rows, modals, tables).
• Correct use of hug / fill / fixed, min sizes where needed, and predictable resizing behavior.
• Proper frame nesting and structure for clean code generation.
• Components structured to be reusable and scalable (no “one-off” messy frames).
• Avoid layout hacks (random absolute positioning, inconsistent padding, misaligned constraints).
• Ability to support developers with assets / usecases / errors states etc.

Deliverables You Own

• Dev-ready Figma files with clean structure and consistent styling
• Locofy-ready frames where conversion is expected
• Component libraries / mini design systems where applicable
• Handoff notes + interaction/state coverage
• Support for Development team

• Strong production-level Figma skills:
  - Auto Layout mastery
  - Components, variants, properties
  - Styles, variables/tokens (where applicable)
  - Constraints & responsive setup
• Excellent attention to detail and consistency (spacing, alignment, typography).
• Solid understanding of frontend realities (responsive layouts, reusable patterns, component-based thinking).
• Ability to work quickly without sacrificing quality; comfortable handling many screens.

Nice to Have

• Experience using Locofy (or similar tools like Anima) and understanding common conversion pitfalls.
• Familiarity with design systems (Atomic Design, token-based systems).
• Basic knowledge of HTML/CSS layout concepts (flexbox, grid) to mirror best practices in Figma.

Working Style

• You’re systematic: checklists, standards, repeatable structure.
• You communicate clearly with devs and proactively resolve ambiguity.
• You care about “handoff quality” as a craft.

Success Metrics (How We’ll Judge the Role)

• Developers can build faster with fewer questions.
• Locofy conversions require minimal rework.
• Components are reusable, consistent, and scalable.
• Design files are clean, organized, and easy to navigate.

• Work on projects that impact real users across industries
• Contribute to building design systems that scale across multiple products
• Work Setup: On-Location, Dubai Office
• Creative, collaborative, and design-driven team culture
• Competitive salary and growth opportunities