Highlighted

Using Adobe XD to maintain a large, versioned UI kit that changes over time

New Here ,
Jun 05, 2020

Copy link to clipboard

Copied

I have a question about how to use Adobe XD to maintain a large, versioned UI kit that changes over time, within a "walled garden" environment.

 

Here's some background about our specific environment that will help you understand the context for my question:

  • My team develops and maintains a large library of UI patterns, software components, and icon components.
  • My team is also responsible for defining all aspects of the appearance for these software components: colors, fonts, spacing, etc.
  • These patterns and components are then used by around 250 financial applications that are maintained by several product teams across our company.
  • This library of patterns/components/icons and their documentation is versioned. My team publishes new releases of these components about every 8 weeks.
  • These UI patterns and components are a kind of "walled garden". All of our product teams use these same patterns and components for their applications as-is, so that we have a level of consistency across all of these applications.
  • All of the visuals (managed by my team) are baked into each software component. So the product teams that use the software components are not changing any colors, spacing, etc, within these components. They just use them as-is in their applications.

 

We're looking at using Adobe XD for designers to create high-fidelity prototypes that emulate the appearance of these software components. (I'm relatively new to managing this team and am adding support for designers that has never been implemented in the past.) We're new to Adobe XD and we really like what we're seeing so far.

 

I see that we can create a UI kit with component assets in XD that mirror our software components, that designers can then use in Adobe XD to create prototypes specific to their product. But I'm concerned with how this UI kit will be able to evolve over time to reflect changes to the software components that it mirrors: namely, additions of new components and changes to existing component visuals. I can't seem to find a strategy that will work for this.

 

Approach 1

  • My first thought was to just maintain and share one version of the UI kit with all designers across all product teams. They would link in the UI kit in the Assets panel.
  • This is the simplest approach because any changes to the master UI kit would be immediately available to all designers who've linked it in.
  • But the problem with this approach is the fact that any designer on any product team can edit the master for any component in the UI kit, which would then "break" the kit for everyone using it. With scores of people sharing the UI kit, someone somewhere will eventually do this (Murphy's Law).
  • So unless there's some way to lock down who in our organization can edit the master UI kit, this approach won't work.

 

Approach 2

  • My next thought was for my team to maintain a master version of our UI kit in Adobe Cloud, then save a separate copy of that file in Adobe Cloud as a global version of the UI kit that is shared with and used by the product team designers.
  • So each time the software components grow or change, I would first update the master UI kit to reflect the changes, then use "Save As" to overwrite the global version that's shared with product designers.
  • Unfortunately it looks like XD saves the copy as an entirely new separate file with the same filename. The previous version of the global copy stays the same, so any product team linking to the global UI kit would not get the updates.

 

Approach 3

  • This is the same as approach 2 (my team manages one master version of the UI kit), but instead of sharing one global version of the kit with product teams, we would save out a separate version of the global UI kit for each different release of the software components.
  • Product teams would be notified that a new version of the UI kit is available. We would either (a) invite them to use the new global version or (b) just send them a local file that they could then upload to Adobe Cloud. (The latter would protect product teams from master component changes accidentally made by any other team.)
  • If the product team wants to upgrade to this latest version of the UI kit (whether that's shared globally or they upload their own copy of it), I can't then find a way to change the source for linked assets in a document without breaking the links to those assets.
  • If you remove a linked file from your assets, it looks like XD automatically converts those assets to groups. And I can't find a way to restore those links, even if a new version of the UI kit is added to the doc's assets. It looks like the links are to specific components in a specific file. So I can't see how this approach would work either.

 

So… are any of my assumptions above wrong? If not, do you have any suggestions for how we can accomplish what we need, given the following constraints?

  • Changes to the master version of our UI kit could only be made by my team.
  • This UI kit would be shared with and linked into designs for many different product teams across our organization. (We could either share 1 global copy or send each product team their own copy to upload and use.)
  • This UI kit will need to be updated by my team every couple of months to keep up with changes in the software components that the kit mirrors.
  • Product teams would need to be able to link in the updated version of the UI kit, without breaking all the linked assets in their designs.

 

Thank you very much in advance. All feedback is welcome!

Hi Jim -

 

I'm a Product Manager on the Adobe XD team primarily focused on Design Systems and would definitely love to help you out.

 

Thanks a lot for reaching out for explaining how you want to create, share and evolve UI Kit. As you mentioned there are multiple ways each with known limitations that we're working on addressing. 

 

Do you mind me scheduling a call with you to dig deeper into your flow so that I could recommend the best path forward? 

 

Thanks,

Sherif

TOPICS
How to, Open and save docs, Share or publish

Views

212

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using Adobe XD to maintain a large, versioned UI kit that changes over time

New Here ,
Jun 05, 2020

Copy link to clipboard

Copied

I have a question about how to use Adobe XD to maintain a large, versioned UI kit that changes over time, within a "walled garden" environment.

 

Here's some background about our specific environment that will help you understand the context for my question:

  • My team develops and maintains a large library of UI patterns, software components, and icon components.
  • My team is also responsible for defining all aspects of the appearance for these software components: colors, fonts, spacing, etc.
  • These patterns and components are then used by around 250 financial applications that are maintained by several product teams across our company.
  • This library of patterns/components/icons and their documentation is versioned. My team publishes new releases of these components about every 8 weeks.
  • These UI patterns and components are a kind of "walled garden". All of our product teams use these same patterns and components for their applications as-is, so that we have a level of consistency across all of these applications.
  • All of the visuals (managed by my team) are baked into each software component. So the product teams that use the software components are not changing any colors, spacing, etc, within these components. They just use them as-is in their applications.

 

We're looking at using Adobe XD for designers to create high-fidelity prototypes that emulate the appearance of these software components. (I'm relatively new to managing this team and am adding support for designers that has never been implemented in the past.) We're new to Adobe XD and we really like what we're seeing so far.

 

I see that we can create a UI kit with component assets in XD that mirror our software components, that designers can then use in Adobe XD to create prototypes specific to their product. But I'm concerned with how this UI kit will be able to evolve over time to reflect changes to the software components that it mirrors: namely, additions of new components and changes to existing component visuals. I can't seem to find a strategy that will work for this.

 

Approach 1

  • My first thought was to just maintain and share one version of the UI kit with all designers across all product teams. They would link in the UI kit in the Assets panel.
  • This is the simplest approach because any changes to the master UI kit would be immediately available to all designers who've linked it in.
  • But the problem with this approach is the fact that any designer on any product team can edit the master for any component in the UI kit, which would then "break" the kit for everyone using it. With scores of people sharing the UI kit, someone somewhere will eventually do this (Murphy's Law).
  • So unless there's some way to lock down who in our organization can edit the master UI kit, this approach won't work.

 

Approach 2

  • My next thought was for my team to maintain a master version of our UI kit in Adobe Cloud, then save a separate copy of that file in Adobe Cloud as a global version of the UI kit that is shared with and used by the product team designers.
  • So each time the software components grow or change, I would first update the master UI kit to reflect the changes, then use "Save As" to overwrite the global version that's shared with product designers.
  • Unfortunately it looks like XD saves the copy as an entirely new separate file with the same filename. The previous version of the global copy stays the same, so any product team linking to the global UI kit would not get the updates.

 

Approach 3

  • This is the same as approach 2 (my team manages one master version of the UI kit), but instead of sharing one global version of the kit with product teams, we would save out a separate version of the global UI kit for each different release of the software components.
  • Product teams would be notified that a new version of the UI kit is available. We would either (a) invite them to use the new global version or (b) just send them a local file that they could then upload to Adobe Cloud. (The latter would protect product teams from master component changes accidentally made by any other team.)
  • If the product team wants to upgrade to this latest version of the UI kit (whether that's shared globally or they upload their own copy of it), I can't then find a way to change the source for linked assets in a document without breaking the links to those assets.
  • If you remove a linked file from your assets, it looks like XD automatically converts those assets to groups. And I can't find a way to restore those links, even if a new version of the UI kit is added to the doc's assets. It looks like the links are to specific components in a specific file. So I can't see how this approach would work either.

 

So… are any of my assumptions above wrong? If not, do you have any suggestions for how we can accomplish what we need, given the following constraints?

  • Changes to the master version of our UI kit could only be made by my team.
  • This UI kit would be shared with and linked into designs for many different product teams across our organization. (We could either share 1 global copy or send each product team their own copy to upload and use.)
  • This UI kit will need to be updated by my team every couple of months to keep up with changes in the software components that the kit mirrors.
  • Product teams would need to be able to link in the updated version of the UI kit, without breaking all the linked assets in their designs.

 

Thank you very much in advance. All feedback is welcome!

Hi Jim -

 

I'm a Product Manager on the Adobe XD team primarily focused on Design Systems and would definitely love to help you out.

 

Thanks a lot for reaching out for explaining how you want to create, share and evolve UI Kit. As you mentioned there are multiple ways each with known limitations that we're working on addressing. 

 

Do you mind me scheduling a call with you to dig deeper into your flow so that I could recommend the best path forward? 

 

Thanks,

Sherif

TOPICS
How to, Open and save docs, Share or publish

Views

213

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 05, 2020 0
Adobe Employee ,
Jun 08, 2020

Copy link to clipboard

Copied

Hi Jim -

 

I'm a Product Manager on the Adobe XD team primarily focused on Design Systems and would definitely love to help you out.

 

Thanks a lot for reaching out for explaining how you want to create, share and evolve UI Kit. As you mentioned there are multiple ways each with known limitations that we're working on addressing. 

 

Do you mind me scheduling a call with you to dig deeper into your flow so that I could recommend the best path forward? 

 

Thanks,

Sherif

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 08, 2020 1
New Here ,
Jun 08, 2020

Copy link to clipboard

Copied

Hi Sherif, yes that would be great. We would really appreciate that. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 08, 2020 0
New Here ,
Jun 09, 2020

Copy link to clipboard

Copied

Also Sherif, this is my first post here, so please let me know if I need to initiate that contact or if you'll be contacting me at the email address in my account. Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2020 0