Figma Design System References

Just some of the sources that helped me get started trying to make a Gutenberg + JointsWP system in Figma.

First off, getting into how to actually make a design system in Figma. I started researching this a few weeks ago, and came across several awesome resources. And I guess my next million posts in the Gutenberg Diaries category of this blog are going to be me trying to figure this out.


Figma Themselves

Some of the absolute best resources about Figma are made by…Figma! Their Youtube Channel is full of bangers. Here is a recent Figma 101 livestream if you need to learn the basics of the app.

A lot of the things we’ll be doing for the design system are covered on that Youtube channel. For example, this video on Styles:

Definitely throw them a subscription and poke around their channel, but Figma’s blog is also fire emoji.

Trust me, bookmark this one: Best practices: components, styles, and shared libraries. And I’ll be revisiting “Kick-start your typography system in Figma”, you know, when I’m kickstarting my typography system in a few blog posts from now.

Here are a few more links direct from Figma to check out if you need ‘em:

Figma just relaunched DesignSystems.com.  https://www.designsystems.com/

Their Resources page: https://www.figma.com/resources/

I dunno, I could go on and on just posting links from them. Good stuff. Great product. 


DesignCode.io 

This tutorial is actually what pushed me into action. DesignCode.io is the site I originally learned Sketch from years ago, and when I saw they put out a FREE “Design System in Figma” tutorial series earliier this year, I knew it was a must-read.

This is geared more towards learning to design a singular app in Figma, and not really the system I’m trying to set up for my WordPress / Gutenberg development, but there was still a lot to learn.

Also, you get access to the Figma file (most figma files you click on from other people will get added to your drafts) I used this as the basis of my first attempt at trying to create my design system. I copied, deleted, and edited all pages provided by DesignCode.io and Meng To. However, I realized that the way some of the files were set up wasn’t ideal for the way I was working. There was a reliance on folders over frames, and some of the naming conventions didn’t work for me either. But again, I learned a lot! Worth reading the site and playing with the file, for sure. This solution just felt overwhelming to me, though.


CharliMarieTV

I was feeling overwhelmed, and Charli Marie simplified things for me , and helped me move forward.

This video covers how to use styles, components, and how to organize things with frames and naming conventions. Charli Marie also has a handy pdf download checklist for building a system similar to her’s.


I guess I’m going to start on the styles now. Next post will be Colors.

Leave a Reply

Your email address will not be published. Required fields are marked *