You can’t do it directly with Figma, but any Sass color generator will work just fine - for example, SassMe by Jim Nielsen. The main benefit of this technique is to use the same hue for the different variants and obtain a mathematical rule that can be automated in the code. Next, generate more color values using the Sass functions such as “Lighten” and “Darken” - this works really well for user interfaces.I recommend keeping it simple and using a maximum of four or five colors (including validation colors) because the more colors you include here, the more stuff you’ll have to maintain in the future. First, you need to define the main colors of the system.I think it’s best if you to divide this task into two parts. Second, we need to define the color scheme. Related resource: “ Defining A Modular Type Scale For Web UI” by Kelly Dern. The creation of a rule to convert pixels into EM/REM multiples is always recommended. It’s easier to maintain a typography scale based on EM/REM more than actual pixels. If you’re designing a digital product, it is useful to talk to the developers first. It’s more common to use small sizes for components - usually from 12 to 18 pixels depending on the text’s importance. It means more information, more content and more components, all in the same space.įor this case, I personally find it rare to use more than 24px for texts.
On the other hand, digital products or services are designed to provide a solution to a specific problem, usually with multiple actions and possible flows. Related resource: “ 8-Point Grid: Typography On The Web” by Elliot Dahl. It’s easier in that context to have 36px for a main title, 24px for a secondary title, and 16px for a description text. The reason for this is behind the design’s goal - a website is usually designed to communicate and convert so it gives you one or two direct actions. It’s common to use a bigger ratio for website designs and a smaller ratio when designing digital products. The type of scale depends on what you’re designing. Typography scales are useful to improve the hierarchy of the elements, as managing the sizes and weights of the fonts can really guide the user through the content. The first step to do is to define the typography scale it helps to focus on how the text size and line height grow in your system, allowing you to define the visual hierarchy of your texts. Intro To Figma: Beginner’s Guide To Figma Basics (Video)īefore starting, there are some requirements that we have to cover to define the styles for the library.Best Practices: Components, Styles And Shared Libraries.If you are new to Figma, check the following tutorials before proceeding with the article: This guide was created from a designer’s perspective, and if you have at least some basic knowledge of Figma (or Sketch), it should help you get started with creating, organizing and maintaining a component library for your design team.
#Figma logo update
Note: To make it easier to use, update and maintain, we found that it is best to use a separate Figma file for the library and then publish it as a team ‘library’ instead of publishing the components individually. (A master component will allow you to apply multiple changes all at once.) I’ll also cover in detail the components’ organization and will give you a possible solution if you have a large number of icons in the library.
This article will outline the steps needed for building a component library with Figma, by using styles and a master component. I hope the tips that I’ll provide in this article will make the process smoother for you as well. It will also help increase the overall design consistency and will make the maintenance easier in the long run. To be honest, as with any library construction, it requires time, effort, and planning, but it is worth the effort because it will help with providing detailed components for your team. We used the Sketch app for the first year and then we moved to Figma where the library management was different in certain aspects, making the change quite challenging for us. I’ve been working on the creation and maintenance of the main library of our design system, Lexicon. This article aims to help you avoid mistakes and assist you with the building of your own Figma component library. Figma has become a very popular tool for web and product designers, mainly because of its focus on design teams and team libraries.