JFrog is a B2B DevOps company that provides end-to-end software supply chain solutions. Its platform enables organizations to manage, secure, and distribute software releases efficiently, with a focus on automation, scalability, and continuous delivery.
Context
Kido partnered with JFrog to build a scalable, unified Design System. Although JFrog had in-house designers, their focus on daily product work left little capacity for building long-term design infrastructure. As a result, design efforts were fragmented and lacked a cohesive user experience across the platform.
Problem
The platform had expanded through multiple product integrations, each with legacy designs, leading to inconsistent UI/UX and outdated components.
My Role
As part of the working hands on on the design system , I have contribute design initiatives such as building the road map, conducted user and system research, lead Figma and design system workshops and Managing the project.
Kido
Design - Eti Laifer Sharvit and Ido Zaifman.
Developer - Dmitri Dmitriev
Jfrog
Design - Yonatan Bonny, Ortal Bialik and Amit Hazan
Developers - Oran Misgav Lefkovits
The Mission
Build a scalable and consistent DS with clear workflows, reusable templates, and modern Figma features including a unified token strategy.
From a design perspective
Align the design guild.
Define structured workflows.
Enable reusability - help multiply teams use the DS.
From a product perspective
Support product growth through a solid design infrastructure.
From a Dev perspective
Scalable front-end tokens built to match Figma’s updated capabilities.
Kick-off session with the JFrog team
Understanding goals, team capacity, and current challenges
Mapping and Discovery
Existing components, Product tree and Foundation mapping
Creating a scalable design roadmap
Milestones for system unification, Figma token migration
Introducing JASON design tokens approach to dev team
Foundation Building & guidelines
Defining the visual and structural building blocks of the system
Strategic shift from styles to variables
Building DS base components
Reusable components that designed to work seamlessly with others
Workshops & Training for the Design Team
Building DS business components
Combinations of elements with distinct functionality
Documentation (DS handoff)
Tailored component documentation to the needs of developers and design teams.
Template
Merging two teams' templates into a single unified version.
For continued growth and maintenance.
Weekly meeting
for feedback
Mapping plugin 💡
Optimization tool tailored for
the company.
Weekly meeting
for feedback
Weekly meeting
for feedback
Weekly meeting
for feedback
Weekly meeting
for feedback
Weekly meeting
for feedback
Weekly meeting
for feedback
Challenge
Consolidated the primary business component: table used by two product teams into a single, shared component, preserving each team’s visual language while standardizing capabilities.
Created a cross team inventory and mapped foundations first: color tokens, typography scales, spacing, and interaction states such as hover and pressed.
Aligned on structure by defining title/header cells and the most common cell types (text, icon, status) before addressing edge cases.
Audited table features from both implementations, then agreed what to keep, remove, or adapt to serve all use cases.
Ran weekly working sessions to review decisions, reduce drift, and validate both design and engineering feasibility.
Challenge
Token schema shift –
From components tokens to system tokens
Solution
As the design system grew, managing component-specific tokens became complex and inconsistent, which made scalability and collaboration difficult. This encouraged us to adopt a system-wide token strategy to simplify structure and workflow.
Challenge
Figma introduced variables while we were building the system on styles. It created a gap between our foundation and figma’s latest capabilities.
Solution
We slowly shifted from styles to variables to match Figma’s new features.This included updating tokens, and redefining foundations. In addition, we provided to the design & dev teams with training to ensure a smooth migration.
Challenge
Introducing JSON design tokens approach
to dev team.
Solution
We clearly demonstrated the long-term value of using JSON based design tokens such as consistency, scalability, and easier maintenance across platforms.
To support adoption, we introduced the Tokens Studio plugin in Figma and walked the team through real use cases.
LeapKit - Design systems
We built a fully functional design system in Figma, aligned with development, enabling JFrog teams to scale efficiently with consistent visuals and less repetitive work across products.
Training & Consulting
Throughout the process, we trained the design team through technical workshops and design system sessions, empowering both designers and developers.
Work methodologies
We defined work methodologies, Figma file and page templates, contribution processes including documentation, QA process and release for components.
In-house Design system owner
Kido Agency supports companies by recruiting and onboarding in-house design system owners and leaders who take full ownership of the system. Kido assisted Jfrog by recruiting Yonatan Bonny, whose expertise and experience perfectly aligned with Jfrog’s needs and environment. We created a detailed roadmap to ensure a smooth handover of the project to Yonatan Bonny, providing ongoing support and guidance throughout the transition.
Really impact
Jfrog’s design team benefited from improved collaboration through a dedicated Slack channel for system questions, guild meetings, and cross-team communication. These efforts strengthened the collaborative environment, allowing design teams to work more efficiently and share knowledge freely.
