Sketch to Figma, a Journey through Time and Design Applications
The Preamble
Does anyone remember designing for the web in Photoshop? Those were the good old days of endless layer comps using a design tool that was never meant to be used for web design. I learned a lot using Photoshop during the first seven years of my career as a digital designer. Namely, I learned that while the tools we use do not make us better designers, they can certainly impact efficiency.
A Brief History
For the first seven years of my life as a designer, I designed websites in Photoshop. In 2015 our team made the switch to Sketch and never looked back. We are always looking for ways to improve our workflow and Sketch proved to be night and day to where we were.
In 2017, I got really excited about InVision Studio and had fun exploring the beta versions until, well, Studio just seemed to slowly disappear. No updates. No news on releases. Nothing. It’s a shame really, and I’m not sure what happened to that product but I did have a lot of fun with how they handled animations.
Fast forward to Figma. Figma had been on our radar for the last couple of years and in 2020 I couldn’t scroll through design Twitter without someone singing its praises. I knew we needed to explore this relatively new design tool, and this year our team finally had some time to dive in.
Figma First Impressions
Right away the user interface felt very familiar to Sketch with layers panel on the left and action items on the right. There were some differences in the language used for various items but it didn’t take long to learn. Sketch uses terms like borders, shadows and blurs, for example, while Figma uses terms like stroke and effects to accomplish the same design elements.
Another big language change was symbols versus components. In Figma, components are the reusable items used in a pattern library or design system. As I began exploring the tool more and more overall Figma’s language and layout of the tools were much more intuitive and made my design workflow faster for concepting design directions.
The design team at SiteCrafting had become very familiar with all the things Sketch could do and so we posed the simple question while learning Figma “Can we do this thing in Figma we could easily do in Sketch?” The overwhelming answer was “YES… and Figma does it better!”
An additional thing I noticed about Figma was its speed. I thought Sketch was so snappy but Figma is lightning fast.
A Shift to Remote Collaboration
We were eight months into the Covid-19 pandemic and working from home for the foreseeable future. Gone were the days of turning a chair around in the office to quickly chat with coworkers about design direction or UX ideas. Figma instantly solved this problem with real-time collaboration in the design files. It was so cool to watch my coworker Marth working in the same design file with me, see his cursor moving around, designing away and conversing in context of a design layout.
At the start of pandemic our team shifted to a tool called Mural to conduct online workshops but I had never seen this done in an actual design tool. Figma was a game changer for collaboration. To have project managers, front and back end developers, content strategists and UX teammates talking through solutions together within a design tool was very exciting to me.
A Workflow Revolution and a Smile
My workflow for the past six years has been Sketch to InVision Studio using Craft manager. After the design files were uploaded to InVision Studio I would create hotspots and connect the dots to all the various screens trying to mimic a clickable website the best I could. This was a bit time consuming especially when I was iterating on designs. I know there are tools and plugins for Sketch to prototype within the file but they always felt clunky and fell short of my needs. Figma’s built in prototyping tab right within the same file as designs was seamless and speedy. It took no time to learn and once again sped up my workflow and put a smile on my face.
Animation Showcases Functionality
An important part of any website feel is the subtle interactive elements. Is there a lot of movement? Is there little movement? What’s the hover effect on these buttons or the cards? What happens when I click this menu button on mobile?
Animation is where InVision Studio had promise and had me so excited but again it has all but disappeared from the design tool conversation (I do miss timeline animations 🙁 ). With Figma it became clear right away we could accomplish the animation vibe with Smart Animate, again right within the tool, no external plugins necessary. With this feature built into Figma prototype tab our design team has been able to take our client presentations to the next level by showing these subtle animations and interaction. Mimicking a coded out website more and more.
With the new component level animations (still in beta) this will once again speed up the design process and provide a more accurate representation of a function website in high-fidelity design presentation.
Design is Better with Friends
Sketch has a plethora of plugins and third-party resources and contributors but they are found in multiple places online like sketchappresources.com. Fimga’s active community is built right into the app. With the click of a button you can install your ada checker, icon libraries and lorem ipsum generators. There are also mockups, design systems and multiple UI elements just one click away. The Figma community is also open to sharing insights and resources to help contribute to and push the design tool forward.
Figma and the Future
I’m just scratching the surface on how powerful Figma is. With easily shared pattern libraries across projects and teams, speed of growth with Figma’s development team pushing out releases that make perfect sense for what designers needs are and just the overall lightning speed of designing within a cloud based app is nothing short of exceptional. We have never looked back or second guessed our decision to explore Figma. Sketch gave us a good six year run and I know they are improving things continuously but Figma has our heart and is the way of the future.
A Final Word
Whatever your web design tool of choice is, so long as you are doing your best work the program doesn’t matter. If it works for you and your team, do it. The design tool you choose isn’t going to make you a better designer but it can help you be more productive.
