Help setting up Figma + Calcite

[Trippetoe]

Hello. I saw several wonderful presentations on Calcite during the 2023 Dev Summit. All the presentations seemed to mention and / or use Figma as way to explore / design with Calcite.  So, i thought that maybe i should give it a try. I am sad to admit that several hours into this experiment i have made nearly zero progress on designing my first file with calcite components.

I am wondering if Esri has developed a step-by-step brand-new-to-figma-and-calcite users guide? Starting at the very beginning with creating a count, what it means to 'get a copy' of the necessary calcite files, etc. If a guide doesn't exist, would you be willing to create one, or point me in a direction so i can get started?

I'm beginning to wonder if there is a requirement for a paid Figma account. I started with the free version to give it a try before buying.

All / any help is greatly appreciated.

Thank you.

[KittyHurley · Accepted solution]

Hi @Trippetoe, great to hear about the 2023 Dev Summit presentations!

The free version of Figma should suffice when accessing the UI kit from Figma Community.

Will be adding more resources in to the UI kit and developers site soon, but in the meantime listed below are a few resources, which could be useful to get started with Figma:

• Figma Help Center
• Figma for beginners
• Set up Figma
• Figma's YouTube channel
• Guide to libraries in Figma

[JT_Salfer]

There's not a lot of material on how to do this currently. There used to be a tutorial on Github, but the resource has been depreciated, and no resource has taken its place. https://github.com/Esri/calcite-ui-kits/tree/master/Figma

What I gather the new workflow is:

1. Visit ESRI's page on Figma
2. Click on Styles or Icons FIRST
3. Click "Open in Figma" - (this opens a local copy you must save as a library)
4. In the top of the left sidebar, click on the open-book icon. 
   1. It should take you to this modal
       
   2. Now, this is where it gets tricky. Figma may tell you "Includes x missing libraries". This introduces a world of confusion. This is telling you that the diagram has references to assets that are not present. The references may not be in use "Missing library with no components", but this is an issue for ESRI to resolve. There's options in Figma to swap libraries, but we can't do that on the official distribution, it's best to just Ignore the warnings.
5. Click "Publish..."
6. Add a description
7. Click Publish in the lower left corner.
   1. This should create a static copy of the components in your Library. If changes are made to the official repo, I believe you would have to delete your library and repeat these steps, but I'm not certain.
8. Now repeat steps 1-7 for Icons if you did Styles first, or Styles if you did Icons first.
9. Lastly, repeat steps 1-7 for the calcite web-ui-kit
   1. or if you want to get into the weeds, repeat steps 1-4, then try swapping libraries for missing components using your new, local copies of Icons and Styles to get rid of some of the warnings. I really can't say if this adds extra functionality by doing this, but I assume that by replacing the icons at least, you're able to more easily customize the size since it's referencing the icon sheet directly. 
10. Now that you have all the libraries published to your account, Create a new Figma file
11. Lastly, access the Assets tab in the top of the left sidebar, and click the Library icon.
12. Toggle the switches for each of the libraries you made.
    1. you should now see the components and icons show up in the asset side bar. The Styles will be embedded in the right sidebar as new color selections and fonts.

I think this is the best way to do things, but this also completely detaches you from the latest release, and you'll have to check back every now and then if you want more up-to-date files. Although, the files that are already there are out of date (icons as of today are on 3.20.7, and the latest calcite release is on 3.22.7), so who knows how long this workflow will be good for. Hope this helps.

[Trippetoe]

This is wonderful! thank you for putting it together. As of today, i still haven't gotten Figma + Calcite working together. And it seems like documentation completely skips (or maybe more accurately, i don't understand) the point at which i bring in the Calcite files.  Anyway, thanks again for re-kindling my energy to make this work. I'll let you know how it goes.