Adding some notes here...

Collaborative design/Figma: Figma allows "multiplayer" edits. You can work with the editors in your team on the same file at the same time.

Licensing/Figma: In paid Figma plans, you are charged based on the number of "editor" seats assigned to users of all your projects in a given payment cycle. Meaning, everyone else can still have view/comment access to all files without impacting billing.

Version history/Figma: This is an amazing feature. You can see the auto saved version history of any file, open any of the versions to view and edit it (e.g. you can copy an element that you deleted 3 days ago), and select if you want to revert to that point in time or simply go back to your version with one click. It is limited to 30 days in the free plan, yes. At the same time, I doubt that (with only 2 editor seats) the Free plan suits any organization.

Among the most valuable built-in Figma features I would highlight prototyping, code snippets, constraints and auto layout. Although the last two cannot be combined properly (there's no way for the content of an auto layout frame to resize with its parent frame, which makes sense, but this is sometimes not how we design).

As an ex-Sketch user, I have to say that the transition between the tools is absolutely smooth. The only thing I miss from Sketch are the huge amount of useful plugins that make your life easier. Figma's plugins are not so numerous and advanced. It offers some interesting integrations, though.

I'd think in certain processes a simpler handover to development could be also a benefit. What Zeplin tried to cover.

Design is a slow process. Designing solutions for problems takes effort and thought. Tools are not going to magically solve the painful and sometimes rewarding act of creation.

Sketch Cloud provides built-in collaboration features, that we currently don’t use. These are only going to get better over time. It’s a native app built for Mac, which is its biggest advantage (performance) but also its biggest weakness (diversity of platforms).

I think before we start to talk about missing collaboration features, we need to check if the current process (weekly design review in person/async) and infrastructure (Sketch collaboration features) are not sufficient.

Good that we have @Volker_E and that he’s willing to find out what the problem is that we’re trying to solve here. Realizing that this sounds highly ironic, but it’s not!

Thanks @Sarai-WMDE and @schoenbaechler for the inputs here.
It'd be interesting to hear about the “felt” performance on larger Figma files from @Sarai-WMDE @Charlie_WMDE …?

Also of interest is the SVG and icon treatment, specifically the SVG export. And the library and something similar to the strong symbol override capability, that only got better since 2016.

Figma's Storybook integration needs to be in our focus as well, this could be very powerful for upcoming WVUI work.

In T255522#6266315, @Volker_E wrote:

Thanks @Sarai-WMDE and @schoenbaechler for the inputs here.
It'd be interesting to hear about the “felt” performance on larger Figma files from @Sarai-WMDE @Charlie_WMDE …?

Also of interest is the SVG and icon treatment, specifically the SVG export. And the library and something similar to the strong symbol override capability, that only got better since 2016.

I'm not sure how much I can add here since I'm not using the desktop app but the browser version because I'm running linux. The browser version is not as powerful and thus large files can quickly become slow for me, although never unworkable so far. My main annoyance is that scrolling in any sized file is super slow when not using the desktop app as well as not being able to use native fonts. These two things would be the main reason for me to switch to a different OS in the future maybe. I never used sketch before so I have no comparison except that sketch obviously wouldn't run at all on my linux machine 😄 hope this helps

Also never did any SVG exports.

I'm sorry if this is naive, but can we support BOTH Sketch and Figma? It's pretty easy to export Sketch files into Figma so we could continue maintaining only one and export into the other.

For example, many large tech companies have supported Sketch and Figma/Adobe for assets (like Apple)

I am a fan of Figma as it can replace the following:

• Invision (or whatever other prototype tool you use
• Dropbox/Google Drive/Abstract (version control)
• Zeplin (redlining, sharing with engineers)
• Sketch

Few other random thoughts:

• I have found keeping a design system up to date easier with Figma, the component and library features on Figma make a bit more sense to me than symbols and/or 3rd party plugins on Sketch.
• Figma is device / os agnostic.
• Somewhat unrelated but I'll always be partial to tools that make it easy to write about what I'm designing while showing progress/history easily. This is why I like using Google Slides / Docs or even something like Basecamp. Neither Sketch or Figma are super strong writing tools so either way I'd probably still continue exporting and explaining what's going on somewhere else to share with my team.

But even with those opinions, I would be totally fine with basically any option we choose and agree with @schoenbaechler that the tool isn't the critical part of our process or success.

Jotting down my understanding of the situation:

• Users of public shared components files are - WMF Designers, WMDE Designers, Unknown number of external public
• WMF Designers primarily currently use Sketch, whilst WMDE are pretty exclusively Figma folks
• Quality SVG exportability is important as final files to provide to FED, and presumed important for external folks (who may use free tools like Inkscape)
• Storybook integration is expected with future integration with the WVUI work.

Based on this understanding, my two cents are that it makes sense to:

1. Continue using Sketch
   • While in theory Sketch alone is not designed for collaboration across dispersed teams in mind, in practice the WMF team has been using it fine this way, through using it alongside plugins like Freehand, exporting to Zeplin, etc.
   • It seems disruptive to the current WMF team's work process to drop it right now.
   • We may explore adding a version control plug-in to Sketch, like Abstract, which has handoff to developers (similar to Zeplin) that we may wish to trial as a replacement to Zeplin. Note that there is an add-on to connect Abstract to Storybook https://github.com/amccloud/storybook-addons-abstract already. So it seems there is a way to bridge Sketch to Storybook already, albeit more involved than Figma.

2. Create publicly available component files in Figma as well seems relatively low effort, high gain. Reasons being:
   • The other major users for these components are WMDE who use Figma already, as well as likely many others in the public audience.
   • Based on a cursory review of posts about the subject, it seems like importing a Sketch file into Figma with high degree of parity.
   • Figma has same if not better SVG export capabilities to sketch (this is based largely from comments on this task)
   • There is already an add-on for converting Figma to Storybook
   • It paves the way for if WMF Design wants to slowly transition to Figma

On the SVG export, our automatic bridge Sketch to SVG components, which basically is a scripted automatic export from Sketch slices and artboards and then optimizes them with svgmin to use as images in Design Style Guide is broken for months now.
This is possible manually, but makes with current or future time budget lil sense, an automated way were a great benefit.

Figma seems to have put effort into their SVG export capabilities.
Here's a well maintained CLI export tool for Figma.

In T255522#6268024, @cmadeo wrote:

I'm sorry if this is naive, but can we support BOTH Sketch and Figma? It's pretty easy to export Sketch files into Figma so we could continue maintaining only one and export into the other.

For example, many large tech companies have supported Sketch and Figma/Adobe for assets (like Apple)

The main problem is our resource limitations. We have already issues keeping up carrying icons in Illustrator format and providing them as SVG exports and in OOUI and coming WVUI.
Anything that's not automated will increase the cost and workload and lower probability of one of the two being updated, hence reducing it's chance to be accepted and used by designers.
There's this plugin “Convertify” we might consider to export Figma to Sketch or Adobe XD

@Sarai-WMDE Have you or your colleagues tapped into Storybook integration of Figma via addon?

Hello, @Volker_E! Not yet. As cool as it is, so far we didn't have a specific use case for this addon.

@Sarai-WMDE's Figma file from her demonstration in today's Design Systems meeting.
Additional positive points from today:

• Links are possible to add in contrast to Sketch (link out to Storybook/component lib anyone?)
• Auto layout
• Prototyping features with component interactivity (states)

Sarai and myself have also tried out Convertify plugin to export Sketch from Figma this afternoon.
The results looks ok, but clearly miss all the power features of a real Sketch file like Symbols and overrides, which improve the speed in designing with a components lib file like our current one.

Wikimedia Foundation Design team members have received Figma licenses mid-last week.

Short note from today's testing. SVG export (output source code) is much better aka slimmer than Sketch's.
Minor issues are

• it only exports into a Zip file by default.
  • its content is taking / as Zip folder structure. So WMUI/Desktop/Button becomes a SVG named after the bound variant "Platform=Desktop, Type=Primary, Intent=Progressive, State=Default, Icon=No.svg" in folder WVUI/Desktop/. Very interesting choice.

A way out could be https://www.figma.com/community/plugin/814345141907543603/SVG-Export

Plugin ways out don't seem to provide what we currently need, text automatically gets transformed into paths. On DSG we need real text in our exports for the time being given our OS specific font choices.

We can probably work with simple plugin export without relying on SVGO options provided by the plugins and then use terminal commands as right now to optimize SVG code accordingly.

@RHo provided three Figma libraries of WikimediaUI themed components, icons & colors, which are the base for the further evaluation:
WikimediaUI Desktop components: https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/WikimediaUI-%E2%80%93-Components-library-desktop
WikimediaUI Mobile components: https://www.figma.com/file/KasZYZuYuLbwDDIms4926q/WikimediaUI-%E2%80%93-Components-library-(mobile)
Wikimedia Icons and Colors: https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/WikimediaUI-%E2%80%93-Icons-and-Colors

In T255522#6839310, @Volker_E wrote:

@RHo provided three Figma libraries of WikimediaUI themed components, icons & colors, which are the base for the further evaluation:
WikimediaUI Desktop components: https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/WikimediaUI-%E2%80%93-Components-library -desktop
WikimediaUI Mobile components: https://www.figma.com/file/KasZYZuYuLbwDDIms4926q/WikimediaUI-%E2%80%93-Components-library-(mobile)
Wikimedia Icons and Colors: https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/WikimediaUI-%E2%80%93-Icons-and-Colors

I have since integrated the mobile components as variants in the single file with the desktop ones!