UI Designer : Design to Code

We’re looking for a detail-obsessed designer who turns UI designs into production-ready Figma files that developers love to work with—and that are cleanly structured for Locofy (Auto Layout, components, naming, responsive behavior). This role is about design system hygiene, structure, consistency, and handoff quality more than concepting.

YOU CAN OFFER US & WE CAN OFFER YOU

Responsibilities

• 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)
  • token-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

Required Skills

• 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.