Figma web design system. Watch the world and see components
What should be the optimal design system in Figma? What is a reusable component? How to organize the structure inside the Instance panel more clearly and conveniently? What are the stages of developing such a product?
Most recently I have developed my 4th library for Figma and only now I am ready to structure the knowledge and experience gained in the development of this and previous systems.
Meaningful use occurs after a hype.
As with any innovation in the market, the design systems have passed their hype and reached the stage of practical rethinking. From now on they can be used in completely different cases and to solve more types of problems. For a large organization it is the visual language, branding, order, unity of design and code. For small organizations it is the team library in Figma, where a small staff of developers and designers is effective. The design system can be applied by a private freelancer for his tasks as well — this and clients` editing automation (he quickly moves the pixels, changes color and shape through master components) and gradually growing base of UI widgets (they are organized and logically rearrange at resize). The speed of tasks implementation increases several times with such a product. Today everyone can find the pros of working within the design system.
How would I explain the idea of the design system in Figma in simple language? Just six words: “You`ve changed here — it changed everywhere.” This is the main principle of using components and examples in the development of any interface, which, with the correct sequence of using atoms and molecules to create templates, will eventually become a complete system.
Watch the world and see components
It was previously enough for a designer to simply draw and move pixels. Sometimes he even ordered and accurately named layers and groups. Then Symbols came on the stage and gave us processes semi-automation. Now came the components and changes can be broadcast automatically to different artboard fragments scattered throughout the design system. The use of components has changed the approach to visual development.
Component development of interfaces is primarily in the unification and consistency. As I've said before, it was enough to simply move pixels, but with the arrival of components in the interface design, the designer has to keep in mind the constraints arrangement, the instance logic, the categorization of all elements in the system and still remain consistent when creating complex components from simple ones. On the one hand, the interface creation process is much easier due to the new generation of software. On the other hand, innovations appearance makes you learn and acquire new skills, turn into specialization. Visual developer of design systems is probably a very promising profession of the nearest future.
Components unification and re-use.
An effective design system does not contain unnecessary components. Any such product starts with the study on the possibility to generalize the repeated blocks and reuse them in different cases. For a simple example: the List component can be used both as a file catalog element and for visualizing customer feedback, for example. This is the whole essence of unification and re-use.
See that? Both components are identical in structure, the only differences are the size and density of the font and the content in the round element.
It is impossible to come up with a new module for interface creation. All lists, tables, blocks and etc already exist, but they are sometimes used differently. When planning the components composition, you need to start with a study to find visually similar ones, to try to reduce them to one component in the system, a copy of which will be reused with different content. Although now Figma is powerful enough to store 500 or more components in one library, it is better to try to minimize them so that it is easier to organize the structure. So, it’s time to finally move on to the product itself…
Case study: universal web design system for Figma
Landing sites prototyping
In this article, we will focus on the web sites construction. The word “construction” was used for a reason. This design system is a kind of constructor to quickly create any templates from the provided blocks and customize them even faster. Both for mobile and desktop devices. It is the component architecture that will allow you to do this effectively; so that in the future you can simply clone the source, quickly change colors, typography and create new themes. “You've changed here — it changed everywhere.” Remember that?
Study and analysis of the future composition
Landing sites are an ideal area of the component approach application. The fingers of two hands are enough to count all the blocks from which a classic website advertising a product, service or service is built: Header, Footer, Call to action, Features, Testimonials, Download, Video and so on. The principle of such a construction system is in the presence of sufficient combinations of all these blocks. Thus it is possible to do any site + a mobile version as a puzzle. I only had to study a hundred of fresh landing-sites and collect the most frequently used elements. In the future, I will redraw them, create components, set a certain style and collect templates in the end. Looking ahead, I`d say that finally we managed to collect 18 full templates: 9 full-screen and 9 mobile versions. I tried to create universal templates that would be equally suitable for the presentation of services, applications, portfolio and any other products.
Most sites are basically faceless
That’s the conclusion I came to when I tried to just google. The web as a whole quickly becomes obsolete and that's ok. After all, being in the actual design always means changes. And we treat changes with caution, apprehension. If the old site works and somehow sells itself, it's better not to interfere with the mechanism for it to work. But there are companies that are engaged in the internal processes optimization. And food design is not the last thing for them. I was able to find most of the good sites for auditing at https://hyperpixel.io/ and https://www.lapa.ninja/ .
I guess I’ve looked at 100+ different links and that’s just a small part of the list. There must be a sense of measure to understand the volume required for the first version (read MVP). So I stopped when the volume of components in the Text blocks section (various text blocks, possibly with shapes and buttons) reached 30:
Product appearance
What exactly should the product look like? It's one of the important issues at the design stage. Huge resources of companies are spent on search of the answer and research. I decided so — the product should be visually relevant. Design and style should not be from yesterday or tomorrow, but in the form that is in trend now. A simple example: today it is rare to find the Open Sans font in the web, although three years ago it was very relevant. If Google as a brand is switching to Product Sans, it is necessary to look at similar fonts. If Intercom uses papercut style in its product design, it is necessary to understand how to use similar techniques in your projects. Now typography is about design, message and mood at the same time. Let’s start with it.
A good font is half the battle.
This idea daunted on me quite suddenly. Incredibly proportional neo-grotesque Objectivity immediately struck me with its relevance. The author did a great job and allowed free commercial use. I immediately wanted to design something based on this font. I was twirling it around on artboards in Figme for a while before I realized “This is the perfect font for the web!” Probably at that moment the plan for creating a system specially for the web was born.
So, a good design-system in Figma is:
- Using global styles (typography, color, shadows)
- Considered logic of internal objects displacement at a component resizing (constraints)
- Using instances for different object States (hover, active, etc.))
- Naming using the “/” symbol to create a convenient instance structure
- Creating complex components from simple ones (molecules → templates)
- Built-in library with ordered icons
Now I would like to talk about each item separately…
Using global styles
With the ability to declare colors, text and shadows globally, the speed of customization in Figma increased significantly. Overall productivity also increased. Global styles allow you to quickly change the font in hundreds of objects, change the color scheme and, in fact, get a new style.
Color
How many colors should I store in the system? I met design systems for Sketch where all the colors of the rainbow were declared + a dozen shades for each. In reality, this is too much and 80% of such a palette will never be used. My Websy system, which I’m starting to talk about in detail from now on, stores only 8 colors: white, black, action color (action), secondary color (secondary), and 4 gradations of black. I suppose everything is clear with white and black. We use Action & Secondary colors to color the elements we can interact with (buttons, icons, links). The Secondary color can be used for an accent. For example, to highlight an important phrase, slogan, etc. it is allowed to declare Success / Warning colors, if your system is more about interfaces than about sites.
Shadows
I am an adept of material design, so I keep several options of elevation above the plane in the system. In Websy you will find 4 combinations of shadows: 2dp, 4dp, 8dp, 16dp. They differ in displacement and blur. For example, for a regular card it is recommended to use 2/4dp shadows. For drop-down lists, onhover states and dialogues you can use 8/16dp. The attentive designer has already noticed that some Google products now use reflex and double shadows, which are more realistic. Therefore, in addition, several multi-layer shadows, which give a very realistic effect are declared in the system. Shadows are switched through global styles in just a couple of clicks.
Stroke panel
The Stroke setting in Websy is regulated through several individual components, which are different by various settings of the corner fillet. Stroke is most commonly used for buttons and text boxes. Similarly to shadows, 5 variants corner fillets are declared: 0px, 4px, 8px, 16px and 99px. Why so many? I’ll start with an example of how the stroke component is generally used, for example, for a button:
By placing the button, which has the 4dp stroke by default, you can select the Stroke component and switch the corner fillet to the smaller or larger side through the Instance panel. This is a slightly more complex method, but allows you to store different types of fillets in a separate master component. The easiest way is to change the degree of fillet through the input field in the right panel. The same pattern applies to text boxes, cards or any background components.
Constraints arrangements for components.
Let me tell you about this item and the rest in the next Chapter. I need to say much about the behavior of modules and elements at resizing. And we will move on to a very interesting part — description of all the components in the Websy web design system. And maybe we`ll consider some ready-made templates for landing pages. We will discuss their composition and flexibility of changing blocks to fit any needs and goals… Follow me, if interested.
Short video for a dessert.
In this video, I use ready-made components to collect layouts, which will be used as presentation screens for the system. I liked the first option less and I took the second one (starts at 1:30) as the main one.
See you next chapter!
Happy prototyping, Roman
Hey! You should start today with Figma & Websy
Components-driven landing pages constructor delivered as smart web design system for Figma. Allows you to launch mobile & desktop sites faster by building any pages from responsive pre-designed blocks. Helps to represent your service, product or application in a most convenient way providing any kind of design block you ever needed for web. Purchase below just for $58.
