menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
Team

Figma Dark UI: Plugin

March 1, 2018 at 6:35pm

Figma Dark UI: Plugin

March 1, 2018 at 6:35pm (Edited 11 months ago)

The unofficial Plugins Panel for Figma. v2.0.1

Available for Desktop App (Mac), Chrome and Firefox

https://github.com/PaperTiger/figma-plugins


March 1, 2018 at 6:43pm

Ah men, I'm using Figma for mac..

  • reply
  • like

This is platform agnostic, but I'm getting an 'undefined' when trying to run the snippet :(

like-fill
1
  • reply
  • like

I think you can still get it to work

  • reply
  • like
  • reply
  • like

@bobbify you can download the snippet by using the link below the main button :)

like-fill
2
  • reply
  • like

@briguy can you shoot me a mail with some screenshots at mirko@papertiger.com ? Or maybe post some here?

  • reply
  • like

@mirko-santangelo Whoops, sorry totally missed that!! Thanks ;)

  • reply
  • like

p.s. this is awesome!

like-fill
1
  • reply
  • like
🔥🔥🔥
like-fill
2
  • reply
  • like

I sent you a message @mirko-santangelo as to not crowd this

  • reply
  • like

Hi guys, to avoid any confusion, I'm recording a couple of video to show you how install the plugin on Firefox and the Desktop App

  • reply
  • like

Here's the first one for Firefox (or Safari)

https://www.dropbox.com/s/1xgk9c9arhlilsj/firefox.mp4?dl=0

  • reply
  • like

If anyone runs into an 'undefined' error while trying to use this on the desktop app - make sure you are accessing help -> 'Toggle Developer Tools' NOT 'Toggle Window Developer Tools'. The options are right next to each other and will only work on the non-window dev tools.

like-fill
1
  • reply
  • like

Unfortunately it doesn't work well on desktop app (windows 10). It changes the UI color, but only in window where DevTools were open. If I open a new tab, the UI color will be white and never changes (even if I run the script one more time).

  • reply
  • like

I noticed it also doesn't completely style all of the elements. for example on the left tabs it still keeps them black.

  • reply
  • like

I was able to decompile the script and fix it.

  • reply
  • like

@cyrilg Hi Kirill, I'm aware of that behavior. (This limitation was also described here:

https://www.papertiger.com/figma-dark-ui-plugin

(Click on the link below the button).

If you're not using the Chrome extension, the only option would be to Run again the script on each new tab and make sure to RE-OPEN the Inspector as well, because each tab is treated as a separate entity.

  • reply
  • like

Hi @chris-northcutt would you be able to send me a message with the issue? I'll make sure to update the script :)

Counting on you guys to test this out.

like-fill
1
  • reply
  • like

fyi I'm only able to run the plugin on Mac at the moment. So if there's any Windows user that would like to test the plugin, just feel free to get in touch with me at mirko@papertiger.com

  • reply
  • like

[UPDATE] Dark UI 1.0.4 — A new version of the plugin has been published on the Google Store. This micro-release fixes the issue with the SVGs on Windows 10. To get the latest version you'll have to manually update your Extensions. A quick step by step process is available below:

1. Open Google Chrome on your computer.

2. At the top of the extensions page, check Developer mode. This is next to the big Extensions text right at the top.

3. Click Update extensions now under Developer mode.

I'll create a Github repo over the weekend to keep everything organized, and simplify the process for future updates. :) Feel free to hit me up if you spot something!

like-fill
4
  • reply
  • like

Nice work Mirko!

like-fill
1
  • reply
  • like

;) thx Thomas!

like-fill
1
  • reply
  • like

March 5, 2018 at 2:45am

Looking great! I wish I could have this on the Mac version.

  • reply
  • like
Show more messages