Design Systems Engineer

📍 Job Overview

Job Title: Design Systems Engineer

Company: Legora AB

Location: Stockholm, Stockholm County, Sweden

Job Type: FULL_TIME

Category: Engineering / Design Systems

Date Posted: 2026-05-27

Experience Level: 2-5 Years

Remote Status: On-site

🚀 Role Summary

• Drive consistency, accessibility, and rapid implementation of user interfaces by building and maintaining a robust React component library and token architecture.

• Bridge the gap between design and development through expert utilization of Figma's developer tools and automation to minimize design-to-code drift.

• Enhance product delivery speed and quality by standardizing interaction patterns and UI architecture, directly impacting the efficiency of design and engineering teams.

• Contribute to an AI-native legal tech platform, shaping the future of frontend development with a focus on speed, precision, and developer experience.

📝 Enhancement Note: This role is positioned within the Design Team, focusing on the foundational elements of UI development that support the broader engineering and product management functions. The emphasis on "AI will reshape how frontend gets built" suggests a forward-thinking approach to design systems, integrating AI capabilities for accelerated development.

📈 Primary Responsibilities

• Develop, maintain, and evolve the core React component library, ensuring reusability, scalability, and adherence to design standards.

• Architect and manage the design token system, defining and implementing design variables for color, typography, spacing, and other stylistic elements to ensure brand consistency across all platforms.

• Translate complex Figma designs into high-fidelity, accessible, and performant React components, meticulously replicating visual and interactive elements.

• Implement and optimize workflows leveraging Figma's advanced developer features such as Code Connect, Dev Mode, MCP server, variables, and component properties to streamline the design-to-code process.

• Proactively identify and automate solutions to reduce discrepancies between design specifications in Figma and the production code, thereby minimizing technical debt and improving delivery velocity.

• Define and enforce standardized interaction patterns, UI architectural principles, and best practices across the product to ensure a cohesive and intuitive user experience.

• Collaborate closely with Product Managers, Designers, and Frontend Engineers to understand requirements, gather feedback, and iterate on the design system components and architecture.

• Act as a subject matter expert on design systems, advocating for their adoption and best practices across the engineering and design organizations.

• Contribute to a culture of continuous improvement by analyzing existing workflows, identifying bottlenecks, and proposing innovative solutions to accelerate delivery timelines.

📝 Enhancement Note: The responsibilities highlight a deep technical focus on frontend engineering principles (React, TypeScript, accessibility) combined with a strategic understanding of design systems methodology and Figma's integrated developer tooling. The emphasis on reducing "drift" and "bottlenecks" points to a role focused on efficiency and process optimization within the GTM technology stack.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a strong academic foundation in Computer Science, Software Engineering, or a related technical field is advantageous. Equivalent practical experience will be highly valued.

Experience: A minimum of 2-5 years of professional experience in frontend engineering with a significant focus on building and maintaining design systems or component libraries.

Required Skills:

• Proven expertise in React, including hooks, context API, and component lifecycle management.

• Strong proficiency in TypeScript for building robust and maintainable frontend applications.

• Deep understanding of design system principles, including token architecture, theming, and component best practices.

• Hands-on experience with Figma's developer ecosystem, specifically Code Connect, Dev Mode, MCP (Multi-Component Properties), REST API for plugins, and component properties.

• Experience in developing and managing a design token system, defining and implementing variables for various design attributes.

• Solid grasp of modern frontend tooling, including build tools (e.g., Webpack, Vite), package managers (e.g., npm, yarn), and version control systems (e.g., Git).

• A keen eye for design precision, aesthetic details, and a strong commitment to creating exceptional product experiences.

Preferred Skills:

• Experience with accessibility standards (WCAG) and implementing accessible components.

• Familiarity with CI/CD pipelines and automated testing frameworks for component libraries.

• Knowledge of other UI frameworks or libraries that may complement React.

• Experience working in a fast-paced, high-growth startup environment, particularly within the Legal Tech or AI SaaS sector.

• Understanding of cross-functional collaboration dynamics between design, engineering, and product teams.

• Familiarity with backend technologies or API integrations that support frontend development workflows.

📝 Enhancement Note: The AI-derived experience level of "2-5 years" is directly aligned with the responsibilities of building and maintaining foundational systems, suggesting a mid-level engineer who can operate with autonomy but also benefit from mentorship within a growing team. The emphasis on Figma's developer surface indicates a specific need for candidates who can leverage cutting-edge tools for efficiency.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase examples of developed React component libraries, highlighting their structure, reusability, and scalability.

• Present case studies demonstrating the implementation of design tokens and their impact on UI consistency and theming capabilities.

• Include projects that illustrate the translation of complex Figma designs into functional, pixel-perfect components in a live application.

• Provide evidence of contributions to design system documentation, explaining architectural decisions and usage guidelines.

Process Documentation:

• Document a workflow for how you would establish or evolve a design token architecture, from initial concept to implementation and governance.

• Illustrate a process for creating a new reusable component within a design system, detailing steps from design handoff to production-ready code and testing.

• Outline a strategy for reducing design-to-code drift, including specific tools, automation techniques, and collaboration protocols.

• Describe your approach to ensuring accessibility standards are met and maintained within a component library.

📝 Enhancement Note: Given the role's focus on bridging design and code, a portfolio is crucial. It should not only showcase technical proficiency but also demonstrate a deep understanding of design systems philosophy, process optimization, and the ability to translate visual concepts into scalable code. The emphasis on Figma's developer tools suggests candidates should highlight projects where these specific features were leveraged.

💵 Compensation & Benefits

Salary Range: Based on industry benchmarks for Design Systems Engineers with 2-5 years of experience in Stockholm, Sweden, the estimated annual salary range is SEK 550,000 - 800,000. This estimate considers the company's significant ARR ($100M+), its focus on high-performance culture, and the competitive tech market in Stockholm.

Benefits:

• Competitive salary and potential for equity participation in a rapidly scaling SaaS company.

• Comprehensive health insurance and wellness programs, supporting physical and mental well-being.

• Generous paid time off (PTO) and public holidays, encouraging work-life balance.

• Professional development budget for conferences, training, and certifications to foster continuous learning in frontend engineering and design systems.

• Opportunities for career advancement within a growing design and engineering team, with potential leadership roles.

• Relocation assistance for candidates moving to Stockholm.

• Access to cutting-edge technology and tools, including AI-powered development platforms.

• Regular team-building events and social activities to foster a strong sense of community.

Working Hours: Standard full-time working hours are expected, typically around 40 hours per week. While the role is on-site, Legora AB fosters a culture of ownership and outcomes, suggesting a degree of flexibility within the established working hours, provided tasks and deliverables are met efficiently.

📝 Enhancement Note: The salary range is estimated based on average compensation for similar roles in Stockholm, considering the company's growth stage and funding. Benefits are inferred from typical offerings at high-growth tech companies, particularly those emphasizing employee development and well-being.

🎯 Team & Company Context

🏢 Company Culture

Industry: Legal Technology (Legal Tech), AI-Powered SaaS. Legora is at the forefront of leveraging AI to transform legal work, providing an innovative platform for legal professionals.

Company Size: Scaled to $100M+ in ARR, with teams across Europe, North America, and APAC, indicating a mid-to-large-sized, rapidly growing organization. This scale suggests established processes but also a dynamic, evolving environment.

Founded: While the founding date isn't explicitly stated, the company's significant ARR and global presence imply a mature startup or scale-up phase, likely founded within the last 5-10 years.

Team Structure:

• The Design Team is integrated within a larger product and engineering organization, working collaboratively to build and scale the AI-native workspace.

• This role reports into an existing Design Systems Engineer or a Design Lead, indicating a structured but potentially flat hierarchy within the design function.

Methodology:

• Data-Driven Decision Making: Emphasis on analyzing performance metrics and customer feedback to inform design and engineering choices.

• Agile Development: Likely employing agile methodologies to facilitate rapid iteration, continuous integration, and swift delivery of features and improvements.

• User-Centric Design: A strong focus on understanding and meeting the needs of legal professionals, with a commitment to "building with them."

Company Website: https://legora.com/careers

📝 Enhancement Note: Legora's positioning as an "AI-native workspace" for legal professionals, coupled with its substantial ARR and global reach, signifies a company at a crucial growth inflection point. The culture described ("lean in," "fight for excellence," "grow together") suggests a demanding yet rewarding environment for operations professionals focused on impact and high standards.

📈 Career & Growth Analysis

Operations Career Level: This role is classified as a mid-level Design Systems Engineer, typically requiring 2-5 years of specialized experience. It's a hands-on engineering position focused on building and optimizing foundational UI elements.

Reporting Structure: The Design Systems Engineer will likely report to a senior member of the Design team, such as a Lead Design Systems Engineer or Head of Design. This structure allows for mentorship and guidance while providing significant autonomy in executing design system initiatives.

Operations Impact: This role directly impacts the company's operational efficiency by accelerating the design-to-code workflow. A robust design system reduces development time, improves UI consistency, enhances product quality, and ultimately enables faster delivery of features to customers, driving revenue growth and customer satisfaction within Legora's AI-native legal tech platform.

Growth Opportunities:

• Technical Specialization: Deepen expertise in design systems, frontend architecture, accessibility, and AI-driven development tools.

• Leadership Development: Potential to grow into a Senior Design Systems Engineer or Tech Lead role, mentoring junior engineers and taking ownership of larger system initiatives.

• Cross-Functional Exposure: Gain experience working with various product teams, understanding different areas of the legal tech platform and contributing to broader product strategy.

• Industry Expertise: Become a recognized expert in the rapidly evolving field of design systems for AI-powered SaaS products.

📝 Enhancement Note: The growth path for a Design Systems Engineer at a company like Legora typically involves progressing from building components to architecting the system, and potentially leading a team focused on UI development infrastructure. The emphasis on "AI will reshape how frontend gets built" suggests opportunities to explore and implement novel approaches in this domain.

🌐 Work Environment

Office Type: This is an on-site role, requiring the Design Systems Engineer to work from Legora's office in Stockholm. The company emphasizes a collaborative environment, suggesting the office is designed to foster teamwork and innovation.

Office Location(s): Stockholm, Sweden. This vibrant city offers a strong tech ecosystem and a high quality of life, making it an attractive location for professionals.

Workspace Context:

• Collaborative Hub: The office environment likely encourages direct interaction with designers, product managers, and fellow engineers, facilitating rapid feedback loops and problem-solving.

• Tooling & Technology: Access to modern development tools, high-performance hardware, and potentially specialized software for design system management and collaboration.

• Team Interaction: Opportunities for spontaneous discussions, paired programming, design reviews, and formal team meetings, all crucial for a role that bridges design and code.

Work Schedule: The role is full-time (approximately 40 hours per week) and requires on-site presence. However, Legora's culture of "ownership over titles, outcomes over intentions" suggests that while presence is key, there might be some flexibility in daily schedules to accommodate efficient work practices, especially for tasks requiring deep focus.

📝 Enhancement Note: The on-site requirement in Stockholm, combined with a culture that values outcomes, implies a balance between collaborative in-office work and the autonomy to manage one's time effectively to achieve project goals. This environment is conducive to roles that require deep technical focus and frequent cross-functional communication.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A brief call with a recruiter to assess basic qualifications, cultural fit, and interest in Legora and the role.

• Technical Assessment (Portfolio Review): A deep dive into your portfolio, focusing on specific projects related to design systems, React component development, and Figma integration. Expect discussions on your processes, challenges, and solutions.

• Technical Interview(s): Hands-on coding challenges or system design discussions related to React, TypeScript, and design system architecture. This may involve live coding or a take-home assignment.

• Cross-functional Interviews: Discussions with designers, product managers, and engineers to evaluate collaboration skills, communication, and understanding of product development workflows.

• Hiring Manager Interview: A final conversation to assess overall fit, career aspirations, and alignment with Legora's mission and values.

Portfolio Review Tips:

• Highlight Design System Impact: Clearly articulate how your contributions to design systems have improved efficiency, consistency, and development speed. Quantify impact with metrics where possible (e.g., "reduced UI bug reports by X%," "accelerated feature delivery by Y days").

• Showcase Figma-to-Code Integration: Provide specific examples of how you've used Figma's developer tools (Code Connect, Dev Mode, MCP) to streamline handoffs and reduce drift.

• Detail Component Architecture: Explain the design principles behind your React components – reusability, accessibility, performance, and maintainability.

• Demonstrate Token Strategy: Illustrate your approach to defining and implementing design tokens, explaining how they enable theming and consistency.

• Structure for Clarity: Organize your portfolio logically, perhaps by project type or skill area, with clear descriptions for each item.

Challenge Preparation:

• React & TypeScript Fundamentals: Be prepared for questions on core concepts, advanced patterns, and performance optimization.

• Design System Principles: Understand best practices for component libraries, token systems, and managing design debt.

• Figma Developer Tools: Familiarize yourself with the capabilities of Code Connect, Dev Mode, variables, and how to leverage them programmatically.

• Problem-Solving Scenarios: Practice thinking through how you would approach common design system challenges, such as standardizing complex interactions or migrating legacy components.

📝 Enhancement Note: The emphasis on Figma's developer surface ("Code Connect, Dev Mode, MCP") suggests that candidates should prepare to demonstrate practical experience with these specific tools. A portfolio that clearly illustrates these integrations will be highly advantageous.

🛠 Tools & Technology Stack

Primary Tools:

• React: The core JavaScript library for building user interfaces. Proficiency in modern React (hooks, functional components) is essential.

• TypeScript: For static typing, enhancing code quality, maintainability, and developer experience in large-scale applications.

• Figma: The primary design tool. Deep understanding of its developer-facing features like Code Connect, Dev Mode, MCP server, variables, and component properties is critical.

• Version Control: Git (e.g., GitHub, GitLab) for collaborative development and code management.

Analytics & Reporting:

• Figma Analytics/Metrics: Understanding how to extract or infer usage and consistency metrics from design tools.

• Frontend Performance Monitoring Tools: (e.g., Lighthouse, Web Vitals) to ensure components are performant.

• Internal Dashboards: Potentially custom dashboards built to track design system adoption and impact.

CRM & Automation:

• Code Connect/Dev Mode: Essential for automating the connection between design and code.

• Custom Scripts/Tools: Development of internal tools or scripts to automate tasks like component generation, style updates, or linting.

• CI/CD Pipelines: Integration with CI/CD for automated testing and deployment of component libraries.

📝 Enhancement Note: The explicit mention of "Code Connect, Dev Mode, our MCP server, variables, and component properties" in the raw job description highlights a specific and advanced set of requirements around Figma's integration capabilities. Candidates should be prepared to discuss their experience and strategy using these tools.

👥 Team Culture & Values

Operations Values:

• Lean In: Taking initiative and ownership, focusing on delivering tangible outcomes rather than just completing tasks. This applies to proactively improving the design system and development processes.

• Fight for Excellence: Upholding high standards in code quality, design precision, accessibility, and performance. This includes providing and receiving direct, ego-free feedback to drive improvements.

• Grow Together: A commitment to continuous learning, skill development, and mutual support within the team and with customers. This fosters a collaborative environment where everyone contributes to collective success.

• Mission Before Ego: Prioritizing the company's mission of transforming legal work through technology above individual recognition.

• Everyone Contributes, No One Coasts: A high-performance expectation where all team members are actively engaged and contributing meaningfully.

Collaboration Style:

• Cross-functional Integration: Close working relationships with designers, product managers, and engineers are fundamental to the role, ensuring seamless handoffs and shared understanding.

• Feedback-Driven Iteration: An open culture for sharing feedback on designs, code, and processes to drive continuous improvement.

• Knowledge Sharing: Encouraging the sharing of best practices, learnings, and insights related to design systems and frontend development within the team and across the organization.

📝 Enhancement Note: Legora's stated values of "lean in," "fight for excellence," and "grow together" are hallmarks of a high-growth, performance-oriented startup culture. A Design Systems Engineer will need to embody these values by taking ownership, striving for impeccable quality, and actively contributing to team and company growth.

⚡ Challenges & Growth Opportunities

Challenges:

• Bridging Design and Code: Continuously minimizing the gap between designs in Figma and the production code, especially as complexity grows, requires robust automation and process.

• Scalability of Design System: Ensuring the design system remains scalable and maintainable as Legora's product suite and customer base expand rapidly.

• Adoption and Governance: Encouraging widespread adoption of the design system across different teams and enforcing governance to prevent fragmentation.

• Rapid Technological Evolution: Staying ahead of advancements in AI, frontend frameworks, and design tooling to ensure the design system remains modern and efficient.

Learning & Development Opportunities:

• Advanced Design System Patterns: Opportunities to explore and implement cutting-edge design system architectures and methodologies.

• AI Integration in Frontend: Learn how AI is transforming frontend development and how to leverage AI tools within design system workflows.

• Leadership and Mentorship: Potential to mentor junior engineers, lead design system initiatives, and contribute to strategic product decisions.

• Industry Conferences and Certifications: Access to resources for attending leading tech and design conferences, and pursuing relevant certifications in React, TypeScript, or design systems.

📝 Enhancement Note: The primary challenge for this role will be balancing the need for rapid development demanded by a fast-growing company with the meticulous work required to build and maintain a high-quality, scalable design system. Growth opportunities will be significant for those who can demonstrate impact and leadership in this critical area.

💡 Interview Preparation

Strategy Questions:

• "Describe your process for translating a complex Figma design into a reusable React component, focusing on how you ensure accuracy, accessibility, and performance." (Focus on Figma developer tools, component architecture, and testing.)

• "How would you approach establishing a design token architecture for a rapidly scaling SaaS product? What are the key considerations and potential pitfalls?" (Emphasize strategy, governance, and scalability.)

Company & Culture Questions:

• "Based on our mission and values, how do you see your role as a Design Systems Engineer contributing to Legora's success?" (Connect your work to company goals and values like "lean in" and "fight for excellence.")

• "Describe a time you had to provide or receive difficult feedback regarding a design or code implementation. How did you handle it, and what was the outcome?" (Assess your ability to "fight for excellence" constructively.)

Portfolio Presentation Strategy:

• Quantify Your Impact: For each project, clearly state the problem you solved, your solution, and the measurable impact (e.g., "Reduced development time for new features by 20%," "Improved UI consistency score by 15%").

• Highlight Figma-to-Code Workflow: Dedicate a section or specific examples to demonstrating how you leverage Figma's developer features (Code Connect, Dev Mode, MCP) to bridge design and code efficiently.

• Explain Architectural Decisions: Be ready to articulate the reasoning behind your component architecture, token system design, and any automation strategies employed.

• Showcase Process Improvement: Present case studies that specifically address how you've optimized workflows, reduced bottlenecks, or improved the overall efficiency of the design-to-development pipeline.

📝 Enhancement Note: Prepare to discuss specific examples of using Figma's advanced developer features. Candidates who can articulate how they've used these tools to solve real-world problems and improve efficiency will stand out.

📌 Application Steps

To apply for this Design Systems Engineer position:

• Submit your application through the provided link on Ashby.

• Customize Your Resume: Tailor your resume to highlight specific experience with React, TypeScript, design systems, and your proficiency with Figma's developer tools (Code Connect, Dev Mode, MCP). Use keywords from the job description.

• Curate Your Portfolio: Select 2-3 key projects that best showcase your design systems work, focusing on how you’ve translated designs into code, managed component libraries, and leveraged automation. Be ready to walk through these in detail.

• Prepare for Technical Discussions: Brush up on React fundamentals, TypeScript, design system principles, and how to approach common challenges in UI development and system design.

• Research Legora: Understand Legora's mission, its AI-native approach to legal tech, and its company values. Prepare to articulate how your skills and experience align with their high-performance culture.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.

---