The Design Software Wars, 2020 Edition: Figma vs. Sketch vs. Adobe XD December 23, 2020 | Deep Dives, The Simpatico Blog

Short version: Photoshop + Notepad++ > Photoshop + TextMate > Sketch + Framer > Sketch + Origami > Figma + Origami

Long version: I began using design tools from a very early age. I remember using Kid Pix 2, a bitmap drawing program for children, in elementary school and was blown away but what was possible on the computer. Things got more serious and focused from art to design when I was in high school and discovered Adobe Photoshop 4 when I wanted to spruce up a web site I was making. I continued to use Photoshop for all my design needs for the next ~13 years until Sketch arrived on the scene. Alongside Photoshop, I used various text editors such as Notepad++ for Windows and TextMate for MacOS to code the websites I was developing. With the rise of mobile application development and starting to work for companies where I wasn’t the person doing all the designing and coding I started using Framer and later Origami Studio for prototyping. I recently switched from Sketch to Figma.

I changed text editors early on when I moved from Windows to MacOS. My transition from Photoshop to Sketch was to gain speed and efficiency. Unlike Photoshop, Sketch was a tool specifically built for designers enabling it to run much faster and anticipate my needs with built-in features like being vector based, exporting to multiple sizes, and being able to quickly make variations all in one file. I moved from text editors to prototyping tools when I started working for companies where engineers built the experience and my role focused solely on design. Prototyping tools like Framer helped me demonstrate my ideas in the highest fidelity possible giving people the best sense of what was possible while keeping the build time minimal for me. I moved from Framer to Origami Studio because the majority of folks use it on my team and this lets me leverage their work to create more holistic flows and build on top of things that exist rather than recreating them in another tool. And finally, I moved from Sketch to Figma for better collaboration amongst my design, content strategy, and research peers.

I started in design using Photoshop & HTML/CSS in college. I was in a technology, arts & media class and we created our very first portfolios with the tools!

After that, I didn’t do any design for a couple of years and then was introduced to Sketch in my UX bootcamp. It was the first time I felt freedom with a tool to kind of do whatever I wanted. It felt liberating and got me hooked on product design. I used Marvel & InVision for prototyping during that time as well.

In-house I was using Figma on a small team which was great – I was able to evangelize design within the company really easily by giving links and teaching people how to express ideas visually. I tried out StudioX but it wasn’t really as strong of a tool as Figma.

Since I’ve worked at a consultancy, I’ve used Sketch and Figma – really whatever the client wants us to use but I much prefer Figma for screen designs because of the loading speed and ability to work on designs at the same time. For prototyping today I use Figma to express quick ideas early on in foundational design. When it comes to more detailed motion design and interactions – I use Principle because you just have more control over easing and all the prototyping goodies.

In terms of proper WYSIWYG tools – I’ve used Squarespace, Semplice (WordPress theme), and Webflow to pop up sites without knowing how to code. I could go into a whole different selection criteria for this type of designing.

It was really about the team I was on and the need. I had the power working in-house to use what tool I wanted because our team was only 2-3 people. We originally started with Sketch but I had just heard really great things about Figma and knew that the team was really rad there and wanted to try it.

Working at frog it was more difficult to bring Figma into the culture. When I joined, we had been using Sketch for years and there needed to be a good reason to switch over. Luckily, the Creative Directors and team was open to trying new tools so we used it on a few programs and it’s been globally accepted as a best practice. It’s what we recommend we use with clients now – even if their teams are using Sketch we recommend they switch.

I started designing websites in 1998, as student web designer at the University of Michigan. While Dreamweaver was the hot tool to have, I liked writing my own HTML/JS… so I used Macromedia Fireworks for mocks and assets. Remember Macromedia? 🙂

Back then, for interactive UX, I used Flash. Flash was my introduction into timeline editing, and I’m so glad I learned to use it at the time.

I continued to use Fireworks well into my years at Google, up until Sketch appeared to be the new hot design tool. Sketch was a game-changer. I’ve never been a “visual designer”, so Photoshop was always a rare tool of choice for my work. Illustrator was too heavy and overwhelming UX-wise. Sketch was a happy medium – it was made for interaction designers. I never imagined using anything else.

I started using Principle in 2016 for high-fidelity prototyping. Principle is my modern take on Flash – it’s fantastic for creating animations or anything that focuses on motion design.

But then Figma started to become popular… I wrote off Figma for a couple years until 2019… There were too many awesome capabilities that matched or exceeded Sketch (hello Auto Layout!).

Aside from these common tools, prototyping has been a constant. Sometimes users/stakeholders need to feel what the UX will be like, and writing my own code is so satisfying.

The circumstances that prompted me to switch? Collaboration with other designers. Designers are trendy, and they embrace tools that make their lives easier.

It’s a long history, that’s been split between tools for wireframing, visual design & prototyping:

• 1999 – Photoshop, Dreamweaver & Flash
• 2002 – Illustrator, Fireworks, Notebook
• 2006 – Photoshop & Axure, Notebook
• 2010 – JustInMind & Photoshop, Digital Notebook
• 2013 – Omnigraffle, Sketch, Axure, Digital Notebook
• 2016 – Axure, Sketch, Zeplin
• 2018 – Sketch, Invision, Zeplin
• 2020 – Figma

With the advent of Agile, there was a need to move from complete design specification documents to leaner, iterative delivery, which made speed and being able to skip tools more important – paper to prototypes quickly to replace hifi wireframes and spec documentation. In addition, in the early days, the tools never felt built-for-purpose until Fireworks and then Sketch came along, so they pushed me in a direction that would better emulate the rendering in the browser or device.

Photoshop was the first web layout tool as nothing else could push pixels as efficiently with the required precision. I’d never trusted WYSIWYG web design software to produce the neat and efficient markup I require so dev tools have always been text editors, the first one being BBEdit and later migrating to Sublime Text. I think every designer today should also endeavor to understand the front end development mechanics of the project they’re working on. That means things like understanding how your three-level mobile menu in production works (and what its limitations and bugs may be) or how using intricate css or canvas splash animations can bog down even slightly older browsers.

One way I’ve been prompted to switch tools has been a coworker or peer recommending or endorsing the new tool. I think many designers don’t install a new option unless it’s been validated by a peer and increases efficiency. Another way has been by the change in ecosystem. I migrated a branding agency from QuarkXPress to InDesign by giving group demos demonstrating how much faster and more pleasant it was to use and furnished office posters with InDesign’s equivalent Quark keyboard shortcuts. Less than two months later all new projects were created within InDesign. It didn’t make sense to me to keep using Quark’s stubborn, dated and expensive software that didn’t efficiently integrate with the other Adobe products like InDesign did.

The first software I used was Namo Webeditor, a Korean WYSIWYG web design tool that came out in the late 90’s. Unlike MS FrontPage, it was visually intuitive. The huge downside of this tool was that it could only build layouts using <table>…</table>! All of my first sites were basically large tables with iframes! Looking back, my design process hasn’t changed much I guess. I used to create 100% static mock of all elements in Photoshop first, and sliced it to fit the table I’d later create. As I worked with more complex layouts (oh the bygone days of no resizing), the table tag got increasingly messier. Then I switched over to Dreamweaver.

I switched over to Dreamweaver at one point where I felt comfortable enough working in English. I think I first got it with Flash as a bundle. Again, I was thirteen so I probably got it from someone’s bootleg CD. Korea back then used to be a piracy jungle. Flash and Dreamweaver was an exciting combo that got me more into dev. (Until then I mainly used WYSIWYG with very little knowledge of code). Actually, I STILL have Dreamweaver CC somewhere in my current Macbook.

This is a bittersweet question, bitter because it’s hard to say out loud and sweet because things are just so much more innovative nowadays. The first few websites I’ve ever designed / attempted to code were done in Flash and Dreamweaver when I was maybe 16 and bored one summer over break?

While I was in SVA I was interested in Web Design, but was focusing more on Brand Identity and Print overall. That being said, I did take a couple Web and Digital courses and started to learn how to take my designs directly from Photoshop and translate into HTML and CSS using a mix of things including Dreamweaver, talking to my professors and asking questions, but most importantly using Chrome Inspect and just playing around (which I still do daily).

I was designing websites strictly in Photoshop for years and was pretty stubborn about switching over to any other program until I found out about Sketch’s symbol and type style functionality. The idea of changing a font size and it updating everywhere just blew my mind. Also working with more and more developers, it just seemed like the most productive move for everyone.

Ever since I opened up that little gem icon, it’s been like a ‘design dream’ ever since. I actually still get goosebumps any time a modal pops up for a Sketch update.

I primarily use Figma and occasionally Sketch. I use Figma because it enables seamless collaboration between my team. Since Figma is in the cloud and everyone works on the same document it’s more inclusive of the design process. This speeds everything up, eliminates the need to trade files back and forth, and worry about making sure you are working off the latest updates someone made. Now my content strategist and I can easily evolve the design together. An additional perk of Figma is that it handles large documents much better than Sketch. This makes moving around the canvas of your document much better and saves a lot of space on your hard drive.

Figma’s speed is great. File size becomes a big problem in Sketch. I’ve spent so many hours frustrated with the spinning wheel of death I thought I was going crazy. Besides just speed Figma is a better tool. Their File Organization is solid and allows you to store everything in one place instead of deep file folders stuck on your computer. Collaborating with people in the same file makes designing way easier, transparent, and fluid. Their DLS capabilities are also stronger with Component Libraries.

I have heard good things about XD, but since I didn’t go to design school I’m not super familiar with the Adobe Suite. Like I can make it work if needed but it doesn’t feel as natural to me as other screen design tools.

I use Sketch for web/product design unless I’m collaborating with a team that prefers another app. Even then, I might try to convince you to make the switch…

I don’t think my preference for Sketch is a matter of fidelity; for the most part, I think I could produce the same design using Figma or XD instead of Sketch. I do think Sketch is set up in a way that allows me to work faster and more consistently. In other words, it allows me to quickly try different ideas while concepting, and ensure accuracy and consistency when creating high-fidelity designs. That’s what I love about Sketch. It can be lightweight and nimble when needed, but otherwise it’s a powerful design tool that plays very well with developers, is customizable beyond recognition, and has an active and growing community of users.

Figma ftw. Figma is wherever you need it to be. I’m no longer bound to using macos – Figma is what I wanted Sketch to be. The “killer feature” for me is Auto Layout. Mastery of this is a huge time-saver. I rarely need to nudge items into place, pixel by pixel.

I’m a recent convert to Figma! As there is a shift towards design systems and integrated tools, I’m looking for ways to slim down my application footprint, while still meeting the needs of the teams around me. While I like Sketch a lot, the sheer amount of plugin you would need to manage and organize your components & styles seemed cumbersome. Also, its vector drawing tools needed a lot of help. While it isn’t perfect, Figma does (for now) allow me to consolidate to one tool for UI design, basic prototyping and dev handoff, with more flexible component management and asset/file sharing.

Sketch and InVision are my current web and product design suite. Among different designers I’ve found Figma is good for large groups and enterprises that need shared source-of-truth assets and libraries particularly when several products and layouts are in play.

I use Adobe XD. Unrelated side note but I have to share this – the most bizarre job I took a while back was from this design agency, their “digital designers” created the designs in Adobe InDesign (!!!) and they needed someone to make that into PSD. Apparently the designers were trained in print, and they insisted on using InDesign like creating pages on a magazine. I knew the dev for that project who pulled his hair out every time agency asked why the spacing wasn’t pixel perfect… Anyway I prefer XD to sketch (I only tried Figma recently) for the following reasons:

• XD feels lighter. It loads faster and reacts faster. The finished design file sizes are small. When working with Photoshop and Illustrator, moving assets from one application to another feels very seamless.
• “Repeat Grid” feature for me is a dealbreaker. I can’t praise it enough and it makes resizing shockingly easy. https://www.youtube.com/watch?v=42VCB42TKp4 It’s basically a repeating group of elements that you can easily expand and make real-time changes. I can very quickly get a feel of the page because it lets me try out different sizes and proportions. It’s a great low-res to high-res workflow.
• Built-in prototyping: makes it quick and easy to create client-ready interactive prototype. I love the XD app that shows mobile design on your device real time. This helps me design while actually thumbing the page through on my phone, to make sure the elements are in the position that’s comfortable to interact while holding a phone.

Learning from my stubbornness years back, I’ve given Figma and Adobe XD a chance but still use Sketch as my main design tool. I’ll speak more to Sketch vs Figma since I haven’t used XD enough to have a strong argument. In general though, I feel XD hasn’t caught up to all the advantages of Figma and Sketch.

I could go on and bore everyone, but these are some of the larger Sketch arguments I have:

• I use a core list of plugins in Sketch that make my life much easier and speed up my workflow. Some of these I know are available in Figma, but Sketch has the most selection of any of the competitor tools by far.
• Figma is cloud based so the user has to be connected to the internet, which is a huge pain point for me. It’s not common, but every so often I find myself with spotty internet or it going down completely. (To be fair, a large part of that has to be with the 2000 cables running all over my building in Brooklyn) but with remote working and residential internet being so common these days, I think it’s an important thing to note.
• I personally feel the real-time collaboration functionality in Figma is a disadvantage. No one likes someone staring over their shoulder while they’re designing and to me this is no different. At Simpatico we use Plant for version control and working collaboratively on projects which has been a wonderful experience.

Figma and Origami Studio work pretty well together. Origami has a Figma plugin (also works for Sketch) that makes it simple to copy and paste your designs into Origami to start building your prototype.

Since moving into Figma things have become much more fluid, especially early on in design days. It is easy to share designs with clients & team members. Prototyping is so much easier than the Sketch to InVision integration with having to upload individual screens with hotspots – it all just connects. They have a way to go in terms of seamless prototyping though – but are getting there!

The main frustration is still getting motion into designs. So the Figma to Principle integration is still messy with layering. There are component workarounds that allow you to eventually link everything up without elements flying all over the page, but it takes setup time to your files.

A big part of the move to Figma was to get away from the Sketch + Invision + Zeplin combo, so it allows me from having to worry about how the apps play with one another.

The combo works great so far and mockups need only be static.

Since they’re all in the Adobe family, moving from Photoshop/Illustrator to XD feels light and precise. I can use the same Creative Cloud library where I can store all assets across applications. A fun tip, you can open .AI files directly in XD for higher fidelity. It’s pretty cool especially if you want your vector illustrations directly in XD.

XD offers a native prototyping feature that is very nimble. Actually my biggest pain point about using sketch was involving Invision for prototyping! Since I could seamlessly jump from design to prototype, I could think about interactions while I designed elements. I had a few client projects where after I got the look & feel approved I went directly to prototype for review, skipping static mockups entirely.

We use InVision and Zeplin which both work great with Sketch. We also use Principle and After Effects often which could definitely be integrated better. That would be my main complaint.

Everyone uses Figma with the occasional use of Sketch when working with older design files. Prototyping is a mix between Origami Studio and Framer. This is typically determined by what the designer is comfortable with. People who like to code generally lean toward Framer while more visually minded folks use Origami.

On the design team we leverage Dropbox, Google Docs, and now Figma itself to share files and collaborate. Our team has an agreed upon folder and file structure to make things easier to find for everyone. When it comes to working with the larger organization outside of design then we use things like Facebook Workplace and an internal tool called Pixelcloud to share work, get feedback, and provide specs.

I’m not – but it really depends on the client! What their team is already using is the main decision factor. If they are designing a new product outside of what they have, they are more likely to switch over to Figma since we recommend it.

Fortunately I get to use whatever tools I’m most comfortable with. Some of my colleagues still use other tools like Sketch, Illustrator.

I collaborate with developers and designers who use Figma and Sketch. Sketch opens on XD surprisingly well, although I found it sometimes distorts complex vector files during conversion. However if my team prefers Sketch over XD, I’d simply switch over and work on Sketch.

I have a big list of favorite plugins I use! The ones I use most are:

• Able
• Artboard Studio Mockups
• Design Lint
• Iconify
• Instance Finde
• Isometric
• Lorem Ipsum
• Map Maker
• Material Design Icons
• Random Name Generator
• Rename It
• Responsify
• Sticky Notes
• Unsplash
• Viewports

I probably love too many plugins to talk about, but I do want to give a shoutout to Plant. It’s a great app for collaborating on Sketch — essentially version control for designers. I hear Figma-style collaboration is in the works for Sketch as well, but I’m not the the biggest fan of working on the same file at the same time. I feel strange when I see another cursor on my screen. My Sketch file is my safe space, and I find that Plant gives me better control over sharing it.

Ok, ok, I’ll mention a few others. I saw RenameIt somewhere in the answers, and it gets a huge +1 from me. I use it in conjunction with Batch Create Symbols to create organized symbol systems in no time. Check out Lippy for a fun, interactive little lorem ipsum generator. Lastly, someone please release an update for Tin Drum so I can use it on Sketch 70. It was my favorite plugin and it is sorely missed.

Yes, we have quite a few.

Collaboration: Every designer across the company uses Pixelcloud. Pixelcloud is an internal web site that hosts Figma and Sketch files along with images and videos. It gives any stakeholder the ability to sign up for updates, leave comments, get specs, and download your own version to work off of. Pixelcloud also makes it easy to find and stay up to date on design work outside of your own team.

Add-ons: We have a whole team dedicated to design tools. They develop Origami Studio, Pixelcloud, and they also extend the functionality of external design tools like Figma and Sketch. Some of those extensions are things like quick access to pattern libraries (colors, type styles) and common components (tab bar, headers, lists) that are specific to the apps we work on. Other extensions are more utilitarian like seeing something in a different language and changing between light and dark mode.

Not really. Apple, Microsoft, and Google all have libraries and resources available for Sketch, Figma, etc.

Figma has great collaboration tools, built in, but in terms of additional functionality I have a few that help me to diagram better, create accessible color choices, prototype a bit more robustly, and find and replace.

Here’s a fun little site that generates dummy text for XD repeat grid. You can populate many fields at once by dragging-and-dropping a txt file with dummy text. Here you can grab a bunch of names, email addresses, usernames, addresses etc for that purpose. If your client uses Airtable, you can actually populate your design with real content using this plugin! Clients love seeing their own data when iterating.