As you can see, in our example, several elements share the same shade of blue: the color of the “Personal” tag, the check marks for selected tags, the background of the primary “Apply” button, and the label of the secondary “Cancel” button. When we’re set on a color, we might want to reuse it.
#Text styles in figma code
So, how do we assign these colors when we start a new project from an empty slate? In Figma, we select the shape we want to fill and use the color picker in the “Fill” menu to select the desired shade, or we just type in the hex code directly. For this little example, we’ve chosen six colors in total: black, white, blue, pink, green, and light gray. Let’s do it! Those hexed colorsĬheck out another Figma post from our design department: Auto Layout:Īs experienced designers, we want to limit ourselves to a clearly defined palette which contains just the right amount of distinctive colors to be reused between different elements of our interface.
We’ll also walk you through the necessary preparations to set up your development environment from scratch. Once we think up our dynamic color system to solve our problem, we’ll implement our solution by extending the feature set of Figma with our simple plugin. The simple-color-system plugin you’ll have developed by the end of this tutorialīefore we jump into the code, let’s lay out the case for the aforementioned missing Figma feature: a way to change how we manage colors in a scaling design project. To give you some motivation: here’s the video of our little plugin in action:Ī simple-color-system plugin you will have developed by the end of this tutorial So, in this article, we’ll draw up a simple mock interface for our sample project to work within, then we’ll imagine a better way of working with colors outside the confines of what Figma currently offers and we’ll create a small plugin to make implementation our new system possible! The goal here is to get you comfortable with making your own Figma plugins whenever you encounter a missing feature and wish to solve that problem.
If you have limited experience with HTML, CSS, and JavaScript, we still encourage you to try this tutorial-we’ve broken the process down into simple steps with accompanying explanations and code examples that can be copied and pasted into your editor. Where to begin? If you’ve developed for the web before, working on a Figma plugin will make sense right away. 📝 Editor’s note: This post has been refreshed for 2022! If you’re working at the intersection of design and web development-this post is for you! Figma seem to be missing a feature that would help your workflow? Let’s learn how to build it with just some basic knowledge of HTML, CSS, and JavaScript in this step-by-step tutorial.
0 kommentar(er)
