39 ms·

Switching from Sketch to Figma

114 points by jcolman 7y ago

nihonium 7y ago
I only have limited experience with Figma (my prev experience is with Sketch,Zeplin and Invision), but as a Developer, I'm finding it very hard to inspect elements and find margins, paddings and distances between elements. Not sure if our design team is doing something wrong.
- tailsdog 7y ago
  In Figma if you select an element and then hold the `option` key when you hover other elements it will show you the distances between them.
  - nihonium 7y ago
    Yes I know, but most of the time it shows it wrong, it adds some artificial space or it just does not detect the element under the mouse cursor.
- ggenoyam 7y ago
  Some of it probably has to do with the file itself not being clearly organized, some of it is probably how Figma selects groups. Where I work, we started to mark the spaces with spacer elements, which look like boxes that have the number of pixels on them. It felt like a waste of time after using Zeplin, but it’s just much easier to see the measurements at a glance and doesn’t require the engineers to measure everything themselves. As a designer, it saves me time because I don’t have to answer as many questions or spend as much time on the design QA feedback loop.
- comis 7y ago
  You can use Figma + Zeplin. Maybe have your designer export a design to Zeplin and see if you have the same issues inspecting elements there as well. It's most likely that your designer just has a messy file. I've never had an issue with the Figma inspector.
barnyfried 7y ago
your dev team cant implement it anyway
samsolomon 7y ago
Does Figma have an equivalent to Sketch Runner? It's kind of like Alfred for sketch. If there is a symbol or icon I need I can start typing it's name and I insert it without having to go through our design system's file tree. It has been a godsend for speed and I don't think it would be possible for me to work without it. https://sketchrunner.com/ https://sketchrunner.com/
- ggenoyam 7y ago
  It doesn’t. Overall its plugins are very limited compared to sketch. I was forced to switch to it and I miss all of my plugins, but I have to say the sharing and commenting features are so much more useful/seamless than the Sketch/Zeplin combo I used to use. So even though it’s a worse design tool, my productivity is better because of the seamless collaboration.
  - samsolomon 7y ago
    That's what I get the sense of. We use Sketch with Invision—that works well enough for us. Although I wish Invision would allow me to @ myself on comments so I get an email reminder me to fix things I've found in review.
  - twog 7y ago
    Outside of Runner, what plugins are you missing?
- comis 7y ago
  I've never used Sketch Runner, but you can search assets in Figma which appears to be 90% of what you're looking for. 1 minute of searching also reveals a plugin called "Figma Walker" which, as the name implies, is an attempt to copy the exact functionality of Sketch Runner.
- roldie 7y ago
  If you type `cmd /` you open up the menu focused on the search field. You can then type the command or plugin that you want. Not quite sketch runner, but part of the way there.
preommr 7y ago
> decided to really stress-test Figma by working on the beach. "Alright guys, I think we should double check Figma on a poor connection" "Oh yea, that's smart. Chrome can easily let you simulate that using devtools." "We could do that, or..." puts on shades and grabs beachball
- freepor 7y ago
  “Can’t hear you Tanner... I’m beachballing.”
- ricefield 7y ago
  Chrome dev what? I can't hear you over the sounds of waves crashing on the beach
achow 7y ago
Comments so far are not mentioning the biggest advantage and motivation for switching to Figma: 1. Freedom from Mac hardware dependency 2. Cross platform compatibility. Heck even cross device - it would open up on iPad as well I assume (haven't tried it though).
- zippergz 7y ago
  Almost every Figma user I know (and I know a lot) uses it on a Mac, so I’m not convinced that that’s a benefit they care about.
  - nailer 7y ago
    A lot of web developers have been put off Apple due to macOS and Mac hardware issues, and simultaneously attracted to Windows due to WSL. Figma gives them an option to switch.
  - toastal 7y ago
    As a developer consuming their designs on Linux, I care. Most platforms don't check that box.
    - bhhaskin 7y ago
      Check out Avocode. It is designed to do just that and is cross platform (electron). It works with PSD, AI, sketch, and figma files.
  - achow 7y ago
    Figma user myself. Use on Mac at home, on Windows at office. At office Windows machine due to corporate security policies.
  - j-kent 7y ago
    I went from a macbook to a surface pro, Sketch was the only thing keeping me on the mac until I switched to Figma. I use it for UI design.
  - 7y ago
chadlavi 7y ago
I'm in the middle of this transition right now and it's pretty good so far. Also, there's a plugin for Figma that lets you automate anything in Figma with typescript which is immensely cool.
- chrisux 7y ago
  What is the plugin?
  - zackbrown 7y ago
    GP may be describing the Figma plugin platform itself, which allows you to "automate anything in Figma with TypeScript" — by authoring plugins.
  - oh_boy 7y ago
    Figma Scripter maybe. https://www.figma.com/c/plugin/757836922707087381/Scripter https://www.figma.com/c/plugin/757836922707087381/Scripter
    - chadlavi 7y ago
      Yep this is the thing I meant! I just used it recently to go through and add the hex code for every color in our library to its description for quick designer reference
phaedryx 7y ago
Interesting. We solved the problem of file management and versioning by having the designers use Github Desktop. Tracking files, changes, versions, commit messages, etc. is a solved problem.
- tenaciousDaniel 7y ago
  I've been hesitant to recommend that because I don't know how git handles image changes. If you don't mind me asking, how do your designers handle rebasing and conflict resolution?
  - eindiran 7y ago
    You should just use the same tricks for images that you would use for binary files. Instead of doing a diff, and merging the bits and pieces of conflicting files, you want to select the version from the two branches that you want. In a merge, select the desired version (eg `git checkout --theirs -- logo.png` for the version from the branch you're merging into the current branch or `git checkout --ours -- logo.png` for the version from the current branch), then add the file and complete a normal merge commit. git merge foo git checkout --theirs -- logo.png git add logo.png git commit -m "Merging foo into master" See here for some more info: https://stackoverflow.com/questions/278081/resolving-a-git-conflict-with-binary-files https://stackoverflow.com/questions/278081/resolving-a-git-c...
- faramarz 7y ago
  Well.. that's what the Abstract is; Visual Git for Sketch files. We're using Abstract + Sketch at the moment and I can't complain. Being able to export the file or opening it track/untracked is a real benefit sometimes. That said, Figma promises to be the combination of Abstract + Sketch + Invision and thats what has me intrigued. Going to a Figma webinar may ease a lot of my worry.
liminal 7y ago
Sketch only works on Mac, so it's a non-starter for real distributed teams where people aren't given company hardware
kaymanb 7y ago
Only somewhat related, but I recently found out that the dev who created Finite State Machine Designer [1] (which I used extensively in my undergrad) is Evan Wallace, the CTO of Figma. [1] http://madebyevan.com/fsm/ http://madebyevan.com/fsm/
areoform 7y ago
Perhaps I am old fashioned, but I am very vary about moving from Sketch to Adobe's new "Creative Cloud" or Figma. As a novice, I'm currently studying the designs and work of Dieter Rams and lesser known contemporary studios such as, http://pharusdesign.com/en/case/rio-cello/ http://pharusdesign.com/en/case/rio-cello/ , watching them wield their craft has taught me more than any college course ever could. We are very lucky that such work has been preserved for the benefit of future generations. Design is a deeply collaborative process, with each designer standing on the shoulder of giants. Great design needs to be studied and preserved so that it is accessible in the long-run. So far that has been easy to do. The designs have been on paper, and can be viewed in physical products. But now, with the advent of design tools made entirely for the web, I am worried that many great works will slip through the cracks of history. In the future, we'll no longer be able to benefit from hindsight. The groundbreaking designs whose impact doesn't become obvious or important until decades into the future might evaporate with time, with little to show for it. After all, will Figma keep all designs, permanently in their archives, even when companies go bust and stop paying their bills? No matter how influential or interesting their design was? Will we be able to do autopsies of work from this era when Figma's servers are down? Data ownership doesn't seem to be an option in Figma's paradigm. You do not have a copy of the tool, you only execute a part of it. You do not possess the data, they store it for you. Should there be an event where Figma is acquired or goes out of business, then (in all likelihood) every user of this platform will lack the ability and the choice to preserve their work for future generations (and for their business). What are the odds of Figma staying as it is, in the control of founders, chugging along as a profitable business a year from now? 5 year from now? A decade? Two decades? This timeline may seem to be long, but the average startup takes 7 years to IPO. Consequently, if you choose Figma as your tool of choice now, then it will be a marriage that lasts a decade or more. I prefer Sketch and other tools because they store files natively. I know who is in control of my data. And, if need be, I can archive these files and the latest version of the program so that they can be spun up in the future, decades from now, for future generations to view. Or, in the business context, there is data portability and ownership, when you control your data, you can control how it is inherited by future iterations of your product teams.
- anaisbetts 7y ago
jonshariat 7y ago
For those curious about the hype behind figma, here are the reasons why teams are moving to it: 1. No versioning needed. For designers versioning has been a huge pain, some git like tools have popped up but with Figma none is needed. Changes made by multiple parties are always in sync since they are made live in the same doc. Plus always on versioning. 2. All in one tool. Currently designers use sketch(create designs), Invision (prototype and get feedback, and Zeplin (hand off to dev). Thats 3 different places to manage, no source of truth. With Figma its all in one package. 3. Cheap. Free for teams of 2 designers, viewers are always free. You done need to pay for the above tools I mentioned. 4. Strong foundation for plugins and community. They way the figma team have built the product allows for rich plugins and community.
- partlysean 7y ago
  Design version control has actually been a big win for our design team and the handoff to engineering. We use Sketch + Abstract to do this. WIP projects live in separate branches that we can share out to get feedback. Once the design is locked in for that milestone, we push to Master and hand that off to engineering where they can inspect the mocks right in Abstract. We don’t mind using multiple tools if they’re all really good at what they do. Our core toolkit includes Sketch, Abstract, and Marvel. Sketch Cloud has supported prototyping and commenting for a while now, but Marvel is a bit more robust. Obviously each team has their own needs, but this has worked for us.
  - jonshariat 7y ago
    I liked Abstract's rigor in keeping things in order but it also added a lot of overhead of commit, write, merge, etc. Also the biggest hurdle I had with Abstract was no layer level diffing/conflicts. I know they were working on it though. Figma allows us to move a lot faster but you do lose some of that workflow rigor that something like abstract forces you into. Like you said different teams with different needs.However, looking ahead in the next 5 years, sketch is going to have a hard time staying relevant imho.

114 points by jcolman 7y ago

I only have limited experience with Figma (my prev experience is with Sketch,Zeplin and Invision), but as a Developer, I'm finding it very hard to inspect elements and find margins, paddings and distances between elements. Not sure if our design team is doing something wrong.

tailsdog 7y ago
In Figma if you select an element and then hold the `option` key when you hover other elements it will show you the distances between them.
- nihonium 7y ago
  Yes I know, but most of the time it shows it wrong, it adds some artificial space or it just does not detect the element under the mouse cursor.
ggenoyam 7y ago
Some of it probably has to do with the file itself not being clearly organized, some of it is probably how Figma selects groups. Where I work, we started to mark the spaces with spacer elements, which look like boxes that have the number of pixels on them. It felt like a waste of time after using Zeplin, but it’s just much easier to see the measurements at a glance and doesn’t require the engineers to measure everything themselves. As a designer, it saves me time because I don’t have to answer as many questions or spend as much time on the design QA feedback loop.
comis 7y ago
You can use Figma + Zeplin. Maybe have your designer export a design to Zeplin and see if you have the same issues inspecting elements there as well. It's most likely that your designer just has a messy file. I've never had an issue with the Figma inspector.

barnyfried 7y ago

your dev team cant implement it anyway

samsolomon 7y ago

Does Figma have an equivalent to Sketch Runner? It's kind of like Alfred for sketch. If there is a symbol or icon I need I can start typing it's name and I insert it without having to go through our design system's file tree. It has been a godsend for speed and I don't think it would be possible for me to work without it. https://sketchrunner.com/ https://sketchrunner.com/

ggenoyam 7y ago
It doesn’t. Overall its plugins are very limited compared to sketch. I was forced to switch to it and I miss all of my plugins, but I have to say the sharing and commenting features are so much more useful/seamless than the Sketch/Zeplin combo I used to use. So even though it’s a worse design tool, my productivity is better because of the seamless collaboration.
- samsolomon 7y ago
  That's what I get the sense of. We use Sketch with Invision—that works well enough for us. Although I wish Invision would allow me to @ myself on comments so I get an email reminder me to fix things I've found in review.
- twog 7y ago
  Outside of Runner, what plugins are you missing?
comis 7y ago
I've never used Sketch Runner, but you can search assets in Figma which appears to be 90% of what you're looking for. 1 minute of searching also reveals a plugin called "Figma Walker" which, as the name implies, is an attempt to copy the exact functionality of Sketch Runner.
roldie 7y ago
If you type `cmd /` you open up the menu focused on the search field. You can then type the command or plugin that you want. Not quite sketch runner, but part of the way there.

preommr 7y ago

> decided to really stress-test Figma by working on the beach. "Alright guys, I think we should double check Figma on a poor connection" "Oh yea, that's smart. Chrome can easily let you simulate that using devtools." "We could do that, or..." puts on shades and grabs beachball

freepor 7y ago
“Can’t hear you Tanner... I’m beachballing.”
ricefield 7y ago
Chrome dev what? I can't hear you over the sounds of waves crashing on the beach

achow 7y ago

Comments so far are not mentioning the biggest advantage and motivation for switching to Figma: 1. Freedom from Mac hardware dependency 2. Cross platform compatibility. Heck even cross device - it would open up on iPad as well I assume (haven't tried it though).

zippergz 7y ago
Almost every Figma user I know (and I know a lot) uses it on a Mac, so I’m not convinced that that’s a benefit they care about.
- nailer 7y ago
  A lot of web developers have been put off Apple due to macOS and Mac hardware issues, and simultaneously attracted to Windows due to WSL. Figma gives them an option to switch.
- toastal 7y ago
  As a developer consuming their designs on Linux, I care. Most platforms don't check that box.
  - bhhaskin 7y ago
    Check out Avocode. It is designed to do just that and is cross platform (electron). It works with PSD, AI, sketch, and figma files.
- achow 7y ago
  Figma user myself. Use on Mac at home, on Windows at office. At office Windows machine due to corporate security policies.
- j-kent 7y ago
  I went from a macbook to a surface pro, Sketch was the only thing keeping me on the mac until I switched to Figma. I use it for UI design.
- 7y ago

chadlavi 7y ago

I'm in the middle of this transition right now and it's pretty good so far. Also, there's a plugin for Figma that lets you automate anything in Figma with typescript which is immensely cool.

chrisux 7y ago
What is the plugin?
- zackbrown 7y ago
  GP may be describing the Figma plugin platform itself, which allows you to "automate anything in Figma with TypeScript" — by authoring plugins.
- oh_boy 7y ago
  Figma Scripter maybe. https://www.figma.com/c/plugin/757836922707087381/Scripter https://www.figma.com/c/plugin/757836922707087381/Scripter
  - chadlavi 7y ago
    Yep this is the thing I meant! I just used it recently to go through and add the hex code for every color in our library to its description for quick designer reference

phaedryx 7y ago

Interesting. We solved the problem of file management and versioning by having the designers use Github Desktop. Tracking files, changes, versions, commit messages, etc. is a solved problem.

tenaciousDaniel 7y ago
I've been hesitant to recommend that because I don't know how git handles image changes. If you don't mind me asking, how do your designers handle rebasing and conflict resolution?
- eindiran 7y ago
  You should just use the same tricks for images that you would use for binary files. Instead of doing a diff, and merging the bits and pieces of conflicting files, you want to select the version from the two branches that you want. In a merge, select the desired version (eg `git checkout --theirs -- logo.png` for the version from the branch you're merging into the current branch or `git checkout --ours -- logo.png` for the version from the current branch), then add the file and complete a normal merge commit. git merge foo git checkout --theirs -- logo.png git add logo.png git commit -m "Merging foo into master" See here for some more info: https://stackoverflow.com/questions/278081/resolving-a-git-conflict-with-binary-files https://stackoverflow.com/questions/278081/resolving-a-git-c...
faramarz 7y ago
Well.. that's what the Abstract is; Visual Git for Sketch files. We're using Abstract + Sketch at the moment and I can't complain. Being able to export the file or opening it track/untracked is a real benefit sometimes. That said, Figma promises to be the combination of Abstract + Sketch + Invision and thats what has me intrigued. Going to a Figma webinar may ease a lot of my worry.

liminal 7y ago

Sketch only works on Mac, so it's a non-starter for real distributed teams where people aren't given company hardware

kaymanb 7y ago

Only somewhat related, but I recently found out that the dev who created Finite State Machine Designer [1] (which I used extensively in my undergrad) is Evan Wallace, the CTO of Figma. [1] http://madebyevan.com/fsm/ http://madebyevan.com/fsm/

areoform 7y ago

Perhaps I am old fashioned, but I am very vary about moving from Sketch to Adobe's new "Creative Cloud" or Figma. As a novice, I'm currently studying the designs and work of Dieter Rams and lesser known contemporary studios such as, http://pharusdesign.com/en/case/rio-cello/ http://pharusdesign.com/en/case/rio-cello/ , watching them wield their craft has taught me more than any college course ever could. We are very lucky that such work has been preserved for the benefit of future generations. Design is a deeply collaborative process, with each designer standing on the shoulder of giants. Great design needs to be studied and preserved so that it is accessible in the long-run. So far that has been easy to do. The designs have been on paper, and can be viewed in physical products. But now, with the advent of design tools made entirely for the web, I am worried that many great works will slip through the cracks of history. In the future, we'll no longer be able to benefit from hindsight. The groundbreaking designs whose impact doesn't become obvious or important until decades into the future might evaporate with time, with little to show for it. After all, will Figma keep all designs, permanently in their archives, even when companies go bust and stop paying their bills? No matter how influential or interesting their design was? Will we be able to do autopsies of work from this era when Figma's servers are down? Data ownership doesn't seem to be an option in Figma's paradigm. You do not have a copy of the tool, you only execute a part of it. You do not possess the data, they store it for you. Should there be an event where Figma is acquired or goes out of business, then (in all likelihood) every user of this platform will lack the ability and the choice to preserve their work for future generations (and for their business). What are the odds of Figma staying as it is, in the control of founders, chugging along as a profitable business a year from now? 5 year from now? A decade? Two decades? This timeline may seem to be long, but the average startup takes 7 years to IPO. Consequently, if you choose Figma as your tool of choice now, then it will be a marriage that lasts a decade or more. I prefer Sketch and other tools because they store files natively. I know who is in control of my data. And, if need be, I can archive these files and the latest version of the program so that they can be spun up in the future, decades from now, for future generations to view. Or, in the business context, there is data portability and ownership, when you control your data, you can control how it is inherited by future iterations of your product teams.

anaisbetts 7y ago

jonshariat 7y ago

For those curious about the hype behind figma, here are the reasons why teams are moving to it: 1. No versioning needed. For designers versioning has been a huge pain, some git like tools have popped up but with Figma none is needed. Changes made by multiple parties are always in sync since they are made live in the same doc. Plus always on versioning. 2. All in one tool. Currently designers use sketch(create designs), Invision (prototype and get feedback, and Zeplin (hand off to dev). Thats 3 different places to manage, no source of truth. With Figma its all in one package. 3. Cheap. Free for teams of 2 designers, viewers are always free. You done need to pay for the above tools I mentioned. 4. Strong foundation for plugins and community. They way the figma team have built the product allows for rich plugins and community.

partlysean 7y ago
Design version control has actually been a big win for our design team and the handoff to engineering. We use Sketch + Abstract to do this. WIP projects live in separate branches that we can share out to get feedback. Once the design is locked in for that milestone, we push to Master and hand that off to engineering where they can inspect the mocks right in Abstract. We don’t mind using multiple tools if they’re all really good at what they do. Our core toolkit includes Sketch, Abstract, and Marvel. Sketch Cloud has supported prototyping and commenting for a while now, but Marvel is a bit more robust. Obviously each team has their own needs, but this has worked for us.
- jonshariat 7y ago
  I liked Abstract's rigor in keeping things in order but it also added a lot of overhead of commit, write, merge, etc. Also the biggest hurdle I had with Abstract was no layer level diffing/conflicts. I know they were working on it though. Figma allows us to move a lot faster but you do lose some of that workflow rigor that something like abstract forces you into. Like you said different teams with different needs.However, looking ahead in the next 5 years, sketch is going to have a hard time staying relevant imho.