thanks-to-figma-plugins,-automated-work-spares-more-time-for-design

It’s been a while since beta but Figma Plugins is finally here. While Sketch is catching up with their cloud capabilities, Figma has also been working on proper third party support.

Figma has become my main design tool over the past year. I have been using it for interface and website design on a daily basis. Our social media and marketing assets are also created in Figma for easy collaboration and bilingual support. (I’m writing another piece to elaborate our process, stay tuned.)

After a few weeks of us, I can conclude the best part of Figma Plugins is automation. With Figma Plugins, tedious steps become one simple click. Inputting data can also be set up without any coding effort. Tidying up components finally feel not stupid. I felt motivated to re-organize my artboards again. I started to think it is not a time-consuming process as it was before.

Getting Started



plugin main

If you have updated Figma to the latest version, you can find it on the main page. Installing plugins are slightly easier than Sketch as everything is distributed through Plugins page. Simply click install the plugin will be downloaded in no time.

Here is a pro tip that you must try. You can speed up the workflow by learning the quick-search shortcut Command .. Essential it is a shortcut to search for any functions and execute them. (Like Sketch Walker). All you need is to remember the keyword and go for it. It is way faster than clicking “Right Click” – “Plugins” – “Plugin that you want to open” with your mouse. (FYI Figma’s keyboard shortcut is the role model every app should adopt. This is how users can pick up the learning curve, click “Help & Account” to enable the shortcut panel)

Here are 4 plugins that I found the most useful and interesting that can speed up your design workflow.

Google Sheets Sync – Designing with custom real data

I wrote about my expectation of being able to design with real data a year ago.
With Figma Plugins, it is now possible to write a custom plugin to fetch data from API, take the most realistic approach on design. After trying out Google Sheets Sync, I realized it was an even better way. Here’s why:

  1. Zero coding effort, that’s the dream. Export any data in csv and upload it, or just create your own using Google Sheets.
  2. You can collaborate on the data with your team. Make sure to include edge cases (like long text, different languages, empty state) in your data set.
  3. All data will be updated accordingly when it was synchronized. You can also try formulas like IF / ELSE in Google Sheets to achieve so much more.



google sheets sync

Set up the spreadsheet with all data and map first column name with Figma’s layer name, by adding a “#” hash in front. Make sure you have duplicated the components and paste the link in the plugin. All components with matching name will apply with Google Sheets data. The plugin for sure will saves tons of time comparing to inputting fields one by one. The end result may not be pretty but it will allow me to foresee design flaws ahead.



google sheets sync after

Sorter – Re-order layers in one click



sorter

A part of my design time includes preparation for developer handoff. The process includes cleaning up layers, grouping up and re-naming them. Sorting layers visually from top to bottom enables developers to understand the visual hierarchy. These tasks are useful but can also be menial. But those days are over with Sorter.

Sorter is able to sort all selected layers automatically according to the rules you set. This is pretty amazing by speeding up your workflow 10x.

For example, in the previous demo, the movie card components are sorted randomly. Select all layers within the component and open Sorter, it will allow you to pick different sorting rules. For me “Position (Top Left to Bottom Right)” is the most useful for HTML or any component structures. It’s just one simple click.



sorter after

Stark – Make a habit to check color contrast all the time

There are plenty of color contrast checkers online, but either you have to input the color hex code or you have to capture the screen and upload it.



stark

Stark simplified the process by selecting two layers in Figma. It also can simulate 4-8 colorblind situations.

Let’s check the color contrast of the movie card’s director field. For normal size text, the recommended standard is to meet W3C’s minimum AA rating, a contrast ratio of at least 4.5:1 (AA). The current color does not match the rating, so we have to increase to contrast. I have changed the color from #848BAF to #636B94, now we have passed the contrast checker.

Stark also offers a PRO subscription that includes more colorblind situations as well as rapid contrast checking. Check out their website for more details.



stark 2

Similayer – Selecting similar layers all at once



similayer

As you can tell from the name, Similayer allows you to select all layers that share the same properties. I found it extremely useful when you have created a bunch of components and want to edit some of the instances. All the properties from the design panel can be used as select criteria.

Conclusion: Just the beginning

These 4 plugins that I recommend are highlights that can speed up your design workflow. I hope you found this helpful, I have shared the Figma project if you need it for references.

During my selection process, I skipped some popular ones (Like Unsplash, Mapsicle and Autoflow and those from big design teams ( Did you know Microsoft Design team has already published 5 plugins!).

Opening up third party developer support surely will speed up the maturity of the platform. I have no regret switching over from Sketch in first place.

132 comments

  1. his is the right blog for anybody who desires to find out about this topic. You realize so much its virtually laborious to argue with you (not that I actually would need…HaHa). You definitely put a brand new spin on a topic thats been written about for years. Great stuff, just great!

  2. Great site. Plenty of useful info here. I am sending it to a few friends ans additionally sharing
    in delicious. And naturally, thank you on your effort!

  3. After I originally commented I appear to have clicked
    on the -Notify me when new comments are added- checkbox and from now
    on every time a comment is added I recieve 4 emails with the
    same comment. Is there a means you are able to remove me from
    that service? Thanks a lot!

  4. It’s really a great and useful piece of info. I am happy that you just shared this helpful info with us.
    Please stay us up to date like this. Thank you for sharing.

  5. My brother suggested I might like this web site. He was
    totally right. This post actually made my day. You cann’t imagine simply how much time I had spent for this info!
    Thanks!

  6. Wow, superb weblog layout! How long have you ever
    been running a blog for? you make running a blog look easy.
    The total look of your site is excellent, let alone the
    content material!

  7. Its like you read my mind! You appear to know so much about this,
    like you wrote the book in it or something. I think that you could do with a few pics to drive
    the message home a little bit, but instead of that, this is magnificent blog.
    An excellent read. I’ll certainly be back.

  8. I feel this is one of the most vital information for me. And i am glad
    reading your article. However wanna observation on some basic things, The web site style is perfect,
    the articles is really great : D. Excellent task,
    cheers

  9. That is really attention-grabbing, You’re an excessively professional blogger.
    I’ve joined your rss feed and look ahead to in the hunt for extra of your magnificent
    post. Also, I have shared your web site in my social networks

  10. Hi there! I realize this is sort of off-topic but I
    had to ask. Does managing a well-established blog
    such as yours take a lot of work? I am brand new to blogging however I
    do write in my journal daily. I’d like to start a blog so I can easily share my personal experience and feelings online.

    Please let me know if you have any suggestions
    or tips for new aspiring bloggers. Thankyou!

  11. I am really impressed along with your writing skills as well as with the format on your weblog.

    Is that this a paid topic or did you customize it your self?
    Anyway stay up the excellent high quality writing, it’s uncommon to see
    a nice blog like this one these days..

  12. Thanks , I have just been searching for info
    about this topic for ages and yours is the best I have came upon till now.

    But, what concerning the bottom line? Are you certain concerning the source?

  13. Hi there, just became alert to your blog through Google,
    and found that it is really informative. I am going to watch
    out for brussels. I’ll be grateful if you continue this in future.
    Lots of people will be benefited from your writing.
    Cheers!

  14. After looking over a handful of the blog articles on your website, I honestly like your technique of writing a blog.
    I saved it to my bookmark website list and will be checking back soon. Take a look at my
    web site as well and let me know how you feel.

  15. What i do not understood is if truth be told how you’re now not really a lot
    more well-liked than you might be right now. You’re very intelligent.

    You understand therefore significantly relating to this matter, produced me personally imagine it
    from so many numerous angles. Its like men and women aren’t involved until it
    is something to accomplish with Woman gaga!
    Your personal stuffs great. At all times handle it up!

  16. Hey there! I realize this is sort of off-topic however I needed to ask.

    Does building a well-established website like yours require a
    massive amount work? I’m completely new to writing a blog however I do write in my diary everyday.

    I’d like to start a blog so I can easily share my
    experience and views online. Please let me know if you have any kind of recommendations or tips
    for new aspiring bloggers. Appreciate it!

  17. Good day! I could have sworn I’ve been to this blog before but after checking through some of the post I realized
    it’s new to me. Anyhow, I’m definitely glad I found it and I’ll be book-marking and checking back frequently!

  18. Greetings! I know this is somewhat off topic but I was wondering
    if you knew where I could locate a captcha plugin for my
    comment form? I’m using the same blog platform as yours and I’m having problems finding one?
    Thanks a lot!

  19. What’s up, the whole thing is going well here and ofcourse every one is sharing information, that’s genuinely fine,
    keep up writing.

  20. Link exchange is nothing else except it is just placing the
    other person’s webpage link on your page at proper place and other
    person will also do similar in support of you.

  21. Hey there! This is my first visit to your blog! We are a collection of volunteers and starting a new project in a community
    in the same niche. Your blog provided us beneficial information to
    work on. You have done a wonderful job!

  22. Greetings from Carolina! I’m bored to tears at work so I decided to browse
    your site on my iphone during lunch break.

    I love the information you present here and can’t wait to take
    a look when I get home. I’m surprised at how quick your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyways, excellent blog!

  23. I will right away take hold of your rss as I can not in finding your
    email subscription link or newsletter service.
    Do you have any? Please permit me understand so that I
    may subscribe. Thanks.

  24. Superb blog! Do you have any helpful hints for aspiring writers?
    I’m hoping to start my own site soon but I’m a little lost on everything.

    Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally
    confused .. Any suggestions? Thanks!

  25. I loved as much as you’ll receive carried
    out right here. The sketch is tasteful, your authored subject matter stylish.

    nonetheless, you command get got an shakiness over that you wish be delivering the following.
    unwell unquestionably come further formerly again as exactly the same nearly very often inside
    case you shield this hike.

  26. Thanks for one’s marvelous posting! I definitely enjoyed reading it,
    you happen to be a great author. I will ensure that I bookmark your blog and
    will eventually come back down the road. I want to encourage
    you continue your great work, have a nice day!

  27. I do accept as true with all the concepts you have presented on your post.
    They’re very convincing and will definitely work. Nonetheless, the posts are very short for starters.

    Could you please prolong them a bit from subsequent time?

    Thanks for the post.

  28. I don’t know whether it’s just me or if perhaps everybody else encountering issues with your site.
    It appears as if some of the text within your posts are running off
    the screen. Can somebody else please comment and let me know if
    this is happening to them too? This may be a problem with my internet browser because I’ve had this happen before.
    Thank you

  29. It is the best time to make a few plans for the longer term and it’s
    time to be happy. I’ve learn this publish and if I may just I desire to suggest you few interesting issues or tips.
    Perhaps you could write next articles referring to this article.
    I wish to learn even more things about it!

  30. Good post. I learn something new and challenging on sites I
    stumbleupon every day. It will always be interesting to
    read through articles from other authors and practice something from other web sites.

  31. Pretty component of content. I simply stumbled upon your blog and in accession capital to say that I acquire actually loved account your
    blog posts. Anyway I will be subscribing in your
    feeds or even I achievement you get right of
    entry to consistently rapidly.

  32. Very nice post. I just stumbled upon your blog and wished to say that I have really enjoyed browsing your blog posts.
    After all I’ll be subscribing to your rss feed and I hope you
    write again soon!

  33. Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve really enjoyed surfing around your
    blog posts. After all I’ll be subscribing to your feed and I hope you write again very soon!

  34. Greetings! Very helpful advice within this article! It’s the
    little changes that produce the biggest changes.
    Thanks a lot for sharing!

  35. Greate pieces. Keep posting such kind of information on your blog.
    Im really impressed by your blog.
    Hello there, You have done an incredible job. I’ll definitely digg it and in my view recommend to my friends.
    I am confident they will be benefited from this web site.

  36. Hello there! This is kind of off topic but I need some guidance from
    an established blog. Is it difficult to set up your own blog?
    I’m not very techincal but I can figure things out pretty fast.
    I’m thinking about creating my own but I’m not sure where to begin. Do you
    have any tips or suggestions? Thanks

  37. This is a very good tip particularly to those fresh to
    the blogosphere. Simple but very precise information… Appreciate your sharing
    this one. A must read article!

  38. Hi, i think that i saw you visited my web site so i came to “return the favor”.I’m trying
    to find things to enhance my website!I suppose its ok to
    use some of your ideas!!

  39. hello!,I really like your writing very so
    much! percentage we keep up a correspondence extra about your article on AOL?
    I need an expert on this area to unravel my problem.

    Maybe that is you! Having a look forward to peer you.

  40. Every weekend i used to visit this web site, for the reason that i wish for enjoyment, as this
    this site conations in fact fastidious funny information too.

  41. Excellent post. I was checking constantly this blog and I am impressed!
    Extremely helpful info specifically the last part 🙂 I care for such info much.
    I was seeking this particular information for a long time.
    Thank you and good luck.

  42. I do accept as true with all the ideas you have presented on your post.
    They’re really convincing and can certainly work.

    Nonetheless, the posts are too short for starters.
    May you please prolong them a little from next time? Thanks for the post.

  43. You can certainly see your expertise within the work you write.
    The sector hopes for more passionate writers like you who are not afraid to say how they believe.

    All the time go after your heart.

  44. Thank you for some other informative site.
    Where else may I am getting that kind of info written in such an ideal way?
    I’ve a mission that I am simply now operating on, and
    I have been on the look out for such information.

  45. I like the helpful info you provide in your articles.
    I will bookmark your blog and check again here frequently.
    I’m quite sure I’ll learn plenty of new stuff right here!
    Best of luck for the next!

  46. Woah! I’m really digging the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s challenging to
    get that “perfect balance” between usability and visual appeal.

    I must say that you’ve done a great job with this.
    Additionally, the blog loads super fast for me on Firefox.
    Superb Blog!

  47. We stumbled over here coming from a different website and thought I might as well
    check things out. I like what I see so now i’m following you.
    Look forward to looking at your web page again.

  48. Oh my goodness! Awesome article dude! Many thanks, However
    I am having difficulties with your RSS. I don’t understand the reason why I am unable to join it.
    Is there anybody having similar RSS problems? Anyone
    that knows the solution will you kindly respond? Thanks!!

  49. I have been browsing on-line greater than three hours as of late, but I by no means found any interesting article like yours.
    It is lovely price sufficient for me. Personally, if all
    website owners and bloggers made excellent content material as you probably did,
    the web shall be a lot more helpful than ever before.

  50. Howdy! This is my 1st comment here so I just wanted to give a quick shout out and
    say I genuinely enjoy reading through your articles. Can you recommend any other blogs/websites/forums that deal with the same topics?
    Thank you so much!

  51. Great goods from you, man. I’ve understand your stuff previous to and you are just too fantastic.
    I really like what you have acquired here, certainly like what you are stating and the
    way in which you say it. You make it enjoyable and you
    still care for to keep it sensible. I cant wait to read
    far more from you. This is actually a great web site.

  52. We are a bunch of volunteers and starting a new scheme in our community.
    Your site offered us with helpful info to work on. You have done an impressive
    task and our whole community will be grateful to you.

  53. Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any tips on how to get listed in Yahoo
    News? I’ve been trying for a while but I never seem to get there!

    Many thanks

  54. Have you ever considered writing an e-book or guest authoring on other blogs?
    I have a blog based on the same topics you discuss and would love to have you
    share some stories/information. I know my visitors
    would enjoy your work. If you’re even remotely interested,
    feel free to send me an email.

  55. Thank you for any other magnificent article. Where else may anybody get that kind of info in such a perfect approach of writing?
    I have a presentation next week, and I’m at the search for
    such info.

  56. Heya i am for the first time here. I found this board and I find
    It truly useful & it helped me out a lot. I hope to present something back and help others like you aided me.

  57. I am actually pleased to read this weblog posts which contains
    plenty of helpful information, thanks for providing
    such statistics.

  58. Hello! Quick question that’s entirely off topic. Do you
    know how to make your site mobile friendly? My website looks weird when viewing from my iphone.
    I’m trying to find a theme or plugin that might be
    able to correct this problem. If you have any recommendations, please share.
    Appreciate it!

  59. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each
    time a comment is added I get four e-mails with the same comment.

    Is there any way you can remove people from that service?
    Cheers!

  60. I’m more than happy to uncover this great site.
    I need to to thank you for ones time due to this wonderful read!!
    I definitely savored every little bit of it and I
    have you saved to fav to see new stuff on your blog.

  61. Definitely believe that which you said. Your favorite justification appeared to be on the net the simplest thing to be aware of.
    I say to you, I certainly get annoyed while people think about worries that they
    plainly don’t know about. You managed to hit the nail upon the top and
    defined out the whole thing without having side-effects , people can take a signal.
    Will probably be back to get more. Thanks

  62. Having read this I believed it was extremely informative.
    I appreciate you taking the time and energy to put this information together.
    I once again find myself spending a significant amount
    of time both reading and commenting. But so what, it was still worth
    it!

  63. Excellent post. I used to be checking continuously this weblog and I’m impressed!
    Extremely useful info specifically the closing phase 🙂 I maintain such information a
    lot. I used to be seeking this particular info for a long time.
    Thank you and good luck.

  64. of course like your web-site but you need to test the spelling on quite a few of your posts.

    Several of them are rife with spelling problems and
    I to find it very bothersome to inform the truth
    however I will certainly come back again.

  65. I’m not sure exactly why but this blog is loading extremely slow for me.
    Is anyone else having this issue or is it a issue on my end?

    I’ll check back later and see if the problem
    still exists.

  66. Greetings from Carolina! I’m bored at work so I decided to check out your blog on my iphone during
    lunch break. I love the knowledge you provide here
    and can’t wait to take a look when I get home.

    I’m amazed at how fast your blog loaded on my
    cell phone .. I’m not even using WIFI, just 3G .. Anyways, superb blog!

  67. My brother recommended I might like this blog. He used to be totally right.
    This submit actually made my day. You cann’t consider simply how so much time I
    had spent for this information! Thanks!

  68. Does your site have a contact page? I’m having trouble locating
    it but, I’d like to send you an email. I’ve got some creative ideas for your blog you might be interested in hearing.
    Either way, great website and I look forward to seeing it improve over
    time.

  69. Awesome issues here. I’m very happy to peer your post.

    Thanks so much and I’m taking a look forward to
    contact you. Will you please drop me a e-mail?

  70. Hi there, i read your blog occasionally and i own a similar one and i was just curious if
    you get a lot of spam feedback? If so how do you protect against it, any plugin or anything you can advise?
    I get so much lately it’s driving me crazy so any support is very much
    appreciated.

  71. If you are going for best contents like I do, just visit this web page every
    day for the reason that it presents quality contents, thanks

  72. Excellent blog here! Also your web site loads up fast!
    What web host are you using? Can I get your affiliate link to
    your host? I wish my website loaded up as quickly as yours lol

Leave a Reply

Your email address will not be published.