Tips to use source files across Sketch, Adobe XD and Figma platforms

Currently, there are many UI/UX design software options available to create website/application designs and prototypes, some of which are quite popular, namely Sketch, Adobe XD and Figma. Every designer certainly has their flagship software which feels more comfortable to them and is used most often in making their user interface (UI) / User Experience (UX) designs and prototypes. For example, I am very accustomed to using Adobe XD which I have been utilizing to design and compete in Topcoder design challenges since 2018.

With a wide variety of design tools available, there is opportunity to learn several, but of course, to practice more with one particular design tool is the choice of each designer. Because every designer has their own favorite, the Topcoder design challenges give flexibility in choosing source files that can be used in submissions.

Sketch, Adobe XD and Figma

Sketch software was first released on September 7, 2010. The public beta release of Adobe XD for macOS as “Adobe Experience Design CC” to anyone with an Adobe account occurred on March 14, 2016. The first public release of Figma was on September 27, 2016.

These three design tools have differentiated platform / operating system support.

Sketch is only available in macOS (Apple) operating system. Adobe XD is macOS (Apple), and Windows OS supported. Figma was initially an online browser-based desktop application. Though the desktop app for macOS and Windows is available, it still needs an internet connection.

Tips on how to reuse design files in the same design platforms.

Topcoder design challenges sometimes provide source files that may come from previous challenge winners or a client’s source file. This usually occurs for follow up challenges, challenge series, first to finish (F2F), or for clients who already have a branding design that must be implemented in challenges. The type of source file can be various; images, videos, pdf documents, or even Sketch, Adobe XD, or Figma files. For example, Topcoder has its GUI Kit available in Sketch format only. How to use the Topcoder GUI Kit is described by DaraK in this article. All Topcoder internally-related challenges should use this GUI Kit to keep consistency across the platform.

When the source file is available in Sketch, fortunately, Adobe XD and Figma can immediately open it as they have been developed to open Sketch files as a default capability. However, if the source file is in Adobe XD or Figma, the other tools cannot open those files directly. We need to perform a little trick so that the file can be reused.

How do we get around this so we can take advantage of source files without having to create everything from scratch? The tip is to change the Adobe XD and Figma files into SVG files. SVG, or scalable vector graphics, is an extensible markup language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation.

Case 1: The source file is in Sketch and we wish to open it with Adobe XD or Figma

As an example for this exercise, we are using the Topcoder Gig Details page, which is designed in Sketch.

Topcoder Gig Details page

Converting Sketch Files into Adobe XD

A Sketch file can be directly opened in Adobe XD from Menu with File, Open Sketch File.

Watch the video below to view the process of converting the Sketch file into Adobe XD.

When we compare the Sketch file with the png file we find that some components need  fixing in order to match the Sketch file so it can be reused. For each conversion the small issues that might appear could differ from case to case. In this case, after importing, the user might have to make small fixes to icon sizes and text alignments. But the text, which is still editable, and the gradients, will stay the same along with  overall sizes.

Converting Sketch Files into Figma

To open the Sketch file in Figma, just drag and drop the Sketch file into canvas, then it will be imported to Figma.

Watch the video on how to open a Sketch file using Figma and fix the items that don’t match.

Case 2: The source file is in Adobe XD and we wish to open it with Sketch or Figma

As Sketch or Figma cannot open Adobe XD files directly, first we should convert the XD file into SVG, then import it to Sketch or Figma. The way to save an Adobe XD file in SVG is to open the XD file, select the Artboard, Click File > Export > All Artboard, then select export as SVG.

Import SVG files into Sketch

To import the SVG file into Sketch with version 55 and above you just drag and drop the file directly onto canvas. Open Sketch, create a new canvas, drag and drop the SVG file into the canvas area, then save the file as Sketch.

Import SVG file into Figma

To import the SVG file into Figma, create a new file (draft) and drag the SVG file onto the canvas.

Watch this video on how to convert Adobe XD files to SVG and import to Sketch.

In the case of  converting Adobe XD to Sketch and Figma, after importing the user might have to make small fixes to the images. But the text, which is still editable, and the gradients will stay the same, along with the overall sizes.

Case 3: The source file is in Figma and we wish to open it with Adobe XD or Sketch

Figma files should be copied as SVG then pasted into Sketch or Adobe XD.
Open the fig file using Figma desktop or browser version, select the layer, go to Edit > Copy As > Copy as SVG.

Open Adobe XD, create new file, then paste.

Save as an Adobe XD file or SVG file. However, Sketch cannot paste the SVG file from Figma directly, so we need to open the SVG file (the latest we saved in Adobe XD), in Sketch.

Watch the video on how to convert a Figma file to Adobe XD and Sketch.

In the case of  converting Figma to Adobe XD, it looks like everything went smoothly with this import.

The smart way to use the same source file across several platforms

The smart way to use source files with different platforms is by converting or copying files into SVG, as described above. The flow to reuse design files across platforms such as Sketch, Adobe XD, and Figma is visually depicted in the below image.

With the above tips on how to use source files across UI/UX design platforms, we can work on source files with our favorite software instead of recreating them from scratch and therefore compete in more challenges.