article_components copy.jpg


In the previous article, we talked about our experience optimizing a Figma project using a large banking application as an example: the file started to slow down significantly, and over time we came to understand how to solve this problem.


In the
 <a href="/articles/3-optimizaciya-proekta-figma-na-primere-bankovskogo-prilozheniya">
 previous article
 </a>
 we talked about our experience optimizing a Figma project using a large banking application as
 an example: the file started to slow down significantly, and over time we came to understand how
 to solve this problem.
 



 In this article, we will focus on how we organized the component library after optimization: we
 will discuss its structure, naming logic, and the placement of elements.


 We, the design studio Mish, spent a long time designing two mobile applications for SBI Bank: the
 classic banking app for adults and a separate banking app for children.


 After six months of work, the project files began to lag heavily, so we started a full-scale
 optimization. We decided to organize the library so that complex components were built from simple
 ones, with several levels of nesting: the smallest elements are icons, fonts, and geometric
 shapes; the largest are lists, cards, and screens.

<img src="/uploads/Component_structure_a9fdecec39_67873e680d.jpeg" alt="Component structure" />

<h3>Component Structure</h3>


 Let’s show what the component consists of using the example of a list row with a height of 64px —
 one of the most common elements in the project.


 There were more than thirty layout variations of such a list block: with and without an icon, with
 one title or a title and subtitle, with an amount and subtitle or with an amount without a
 subtitle, with a button instead of an amount, and with an arrow instead of a button. In addition,
 each variation had loading states and dark background states. We separated all these variations
 into individual components. Why we did this is described in the
 <a
 href="https://vc.ru/design/120754-optimizaciya-proekta-figma-na-primere-bolshogo-bankovskogo-prilozheniya"
 >
 previous article
 </a>
 .

<img
 src="/uploads/Typical_List_Component_8bfee335ef_cff3fba4cd.jpeg"
 alt="Typical list component"
/>

 A standard list component consists of a background, text, amount, and several nested components.
 The latter, in turn, contain another level of components: for example, the list cover component
 consists of a circle component and a dollar icon component.


 Any other icon can be placed instead of the dollar icon — a ruble icon, a transaction category
 icon, or a restaurant logo. The icon component is the smallest object in the structure, and there
 are about a hundred icons of similar size in the project. This list layout is used in all sections
 of the app: on the main page, in the history, in the profile, and on internal screens.

<img src="/uploads/Assets_panel_23748eb706_2fc306f287.jpeg" alt="Assets panel" />

 To place another icon on the cover instead of the dollar sign, drag it from the Assets panel while
 holding Opt+Cmd. The Assets panel is the second tab of the left layer panel. Shortcut to quickly
 open Assets — Opt+2. It is important that the new icon be the same size, for example 24×24,
 otherwise it will shrink or stretch when replaced.


 It is more convenient to change the background of the circle under the icon through Related
 components in the right tool panel. Another way to change the background is to modify its color
 through the style or palette. But we decided to pack everything into components as much as
 possible and created six cover components for different colors. Thus, if we need to change the
 background color throughout the project, we can do it faster.


 There are also separate cases when you need to place a company logo, for example, a mobile
 operator’s, on the list cover. To do this, disable the icon visibility on the child component and
 change the background fill to the desired logo through styles. Beforehand, all logos and avatars
 must be added to the color styles.

<img src="/uploads/Component_path_d7470218f5_78214a1467.jpeg" alt="Component path" />

<h3>Path to a Component</h3>


 We mentioned above that the list row block has several layout options, and each of them is a
 separate component. The picture shows two similar components. They differ slightly in layout.

list64+icon/1-1— list element with one title and amount.
list64+icon/2-2— with a title, subtitle, and amount with a subline.

 There are about thirty similar variations, but we will not show them all. It is important to note
 that if these elements are named correctly, you can easily switch between them and replace one
 block with another. This can be done in any convenient way: by dragging from the Assets panel or
 switching in the component panel.


 A great lifehack: to keep the title text and amount when replacing one component with another, the
 layers of these elements must have the same names. This is also very useful when modifying input
 or button components.

<img src="/uploads/123_b4474790c4_4fc0ab8ff9.gif" alt="Assets" />

 To make the necessary components appear in Related components, it is important to name them
 correctly. For example, the background components for icons in our project are named approximately
 as follows:

componentsAndroid/lists/elements/circle40&times;40/dark
componentsAndroid/lists/elements/circle40&times;40/white
componentsAndroid/lists/elements/circle40&times;40/white15
componentsAndroid/lists/elements/circle40&times;40/blue
componentsAndroid/lists/elements/circle40&times;40/blue5
componentsAndroid/lists/elements/circle40&times;40/blue10
<img
 src="/uploads/Background_components_for_icons_e051190aab_0ae1602c70.jpeg"
 alt="Background_components_for_icons_e051190aab.jpeg"
/>
Now let’s look at what the full path to the components consists of.
<img
 src="/uploads/full_path_to_components_0290658f98_85ce0e30d7.jpeg"
 alt="full path to components"
/>
componentsAndroid— file name.
lists— frame name in the file.

 Then comes the custom name, each element of which between “/” creates another nesting level.
 Finally, the name of the element itself.

Another nesting level can be created by dividing the file into pages.

 If several components have identical names for all levels up to the final element, Figma considers
 these components to be in the same group. It allows you to replace one component with another in
 one click and stores them together in the Assets panel.

<img src="/uploads/nesting_level_1adf7ec501_897dc65adc.jpeg" alt="nesting level" />

 Each designer decides the order of this path depending on the specifics of the project and
 convenience of use.


 In some cases, it is convenient to make the color the last point, which, as in the example above,
 allows you to quickly change the color of the background under the icon. In other cases, it is
 more convenient to name elements by another principle — for example, by the element’s state:
 Enable and Disable, Hover and Active.


 To avoid redesigning, it is important to think through your structure at the very beginning and
 sketch it out. But even if you made a mistake in the structure, do not worry, just rename the
 master components in a way that is convenient for you. Figma allows you to do this at any time,
 and it will not take long. You can also speed up the renaming process using plugins

Path to a Component
We organized the library into three files:
<ul>
 <li>A file with icon and illustration components common to both platforms</li>
 <li>A file with iOS element components</li>
 <li>ФA file with Android element components</li>
</ul>
<img src="/uploads/Library_structure_e16d67f47b_d42dce378d.jpeg" alt="Library structure" />

 If the project includes more than a thousand screens, we recommend storing components in separate
 files. To find out what can happen if components are stored in one file with layouts, read our
 previous article.


<h3>Conclusions</h3>
<ul>
 <li>
 If your project includes more than a thousand screens, store components in separate files.
 </li>
 <li>
 It is better to make different element states as separate components rather than hidden layers.
 Icons should be switched in the component panel.
 </li>
 <li>
 Name components and layers meaningfully. Use nesting with slashes “/” and hierarchy inside the
 file: file name / page name / frame name / internal hierarchy with “/”.
 </li>
 <li>Plan the library structure in advance to save yourself time in the future.</li>
</ul>

Structure of a Component Library in Figma: Banking App Case

Крестов Иван

Кретинин Андрей

16_9.jpg

We’ll explain how we optimized and sped up large Figma files by three times. This effort was prompted by slow and sometimes unopenable files on the project team. The problem was particularly noticeable for team members with less powerful hardware: files were loading for five to ten minutes.

<h3>
 We’ll explain how we optimized and sped up large Figma files by three times. This effort was
 prompted by slow and sometimes unopenable files on the project team. The problem was particularly
 noticeable for team members with less powerful hardware: files were loading for five to ten
 minutes.
</h3>

 During our search for a solution, we encountered some limitations and bugs in Figma that are
 useful to know in advance and which we will describe in detail below.


 This article will help avoid fundamental mistakes when developing design systems. The material
 will be especially useful for designers, developers, and businesses working on projects with over
 five hundred layouts.


 We are Mish studio, primarily focused on website and mobile app design. Over time, we have worked
 on large projects, particularly in the banking sector. In this case, the client tasked us with
 designing two mobile apps for SBI: a “for adults” banking app and a separate banking app “for
 kids,” which included a full account, parental tasks, rewards, and saving for goals. The apps were
 developed for two platforms.


 After six months of work, the “adult” app alone had over six hundred screens per platform. That’s
 when we faced a problem: everyone involved in the project — developers, analysts, testers —
 noticed that Figma files were slowing down. Specifically, files opened slowly, lagged when
 zooming, and sometimes even crashed. Even designers on MacBook Pros experienced difficulties. For
 example, copying ten frames could take about a minute: you select them, press ⌘+C, and wait —
 Figma freezes during this time. If unlucky, a “You run out of memory” message appeared. Then, you
 had to restart Figma and copy frames one by one.


 <img
 src="/uploads/error_Figma_3da87ea2d2.jpg?updated_at=2023-03-09T14:47:12.467Z"
 alt="enter image description here"
 />

<blockquote>
 
 After searching online and on the Figma website, we identified the cause and figured out how to
 solve the problem. Here’s the
 <a href="https://help.figma.com/hc/en-us/articles/360040528173">article</a> that helped us.
 
</blockquote>
Two main causes of slowdowns:
<ul>
 <li>Too many layouts in a single file.</li>
 <li>Master components built with many hidden layers.</li>
</ul>

 Both of these significantly impacted key file metrics: memory usage and total layer count. Let’s
 look at each point in more detail.

<img src="/uploads/stat_Figma_6c131a2528.jpg" alt="enter image description here" />

<h3>Cause 1: Too many layouts in one file</h3>
The “adult” app design consists of three files:
<ul>
 <li>A file with iOS layouts and components</li>
 <li>A file with Android layouts and components.</li>
 <li>A file with shared components, icons, and graphics.</li>
</ul>

 There are also two files for the “kids” app, but we didn’t optimize them because these files run
 quickly — they contain fewer than five hundred layouts.

<img src="/uploads/arrow_Figma_f23a51acaf.jpg" alt="enter image description here" />

 We stored master components in the same file as layouts. At the start of the project, this seemed
 reasonable and convenient: no need to switch files to move an icon two pixels. We thought that, if
 necessary, we could split the file later: leave master components in one file and move layouts
 with child components to separate files.


 However, we were unaware of a fundamental Figma bug, which we will describe later. For now, let’s
 look at two ways to split a large file into smaller ones.


<h4>Method #1</h4>

 Duplicate the file as many times as needed and remove unnecessary layouts or pages from each
 duplicate.

<img src="/uploads/tablet_Figma_00c6d3ce66.jpg" alt="enter image description here" />

 This method didn’t work for us because master components were in the same file as layouts and
 would lose connection with child components in the new files.


<h4>Method #2</h4>

 Create several new files, connect them to the team library, and copy the necessary layouts from
 the original file. Keep only master components in the original file, since unlike child
 components, they cannot be moved to another file — a frustrating Figma limitation we knew about.

<img src="/uploads/arrow2_Figma_8df4ce0640.jpg" alt="enter image description here" />
This method seems feasible and doesn’t violate any obvious Figma rules.

 However, we didn’t know about a serious hidden issue: when moving layouts to a new file, many
 child components lose their connection to the master component. In other words, some copied child
 components become regular frames upon pasting. This is the fundamental bug that Figma is aware of
 and has been trying to fix for about two years.
 <a
 href="https://spectrum.chat/figma/help/components-turning-into-frames~f758bd95-2a65-4c83-a1cd-d4838b40440e"
 >
 More details about the problem
 </a>
 .


 Such bugs can occur even when copying and pasting a layout within the same file via
 “⌘+C → ⌘+V” or “Copy → Paste.” We noticed it often happens with
 complex components and when components have been copied and pasted multiple times.

To avoid this bug, copy complex multi-part components while holding Opt/Alt.

 We couldn’t quickly split the file and resolve the first cause of slowdowns, so we moved to the
 second cause.


<h3>Cause 2: Master components built with many hidden layers</h3>

 Some elements are used almost in every layout and differ only in details — for example, lists. A
 list may have an icon or not, one header or a header with a subheader, a sum with subheader or
 without, a button instead of a sum, or an arrow instead of a button.


 Don’t forget loading states and the same states on a dark background. The element height remains
 the same, the main elements are roughly the same, but their combinations and arrangements differ.

<img src="/uploads/tablet2_Figma_2f24b265c7.jpg" alt="enter image description here" />

 For example, we had over thirty variations of a 64px-high list block in our app. Plus, each state
 could have about 100 different icons on the cover.


 When creating initial components, we considered two approaches for design system construction.


<h4>Method #1</h4>

 Create one component and include all states as hidden layers. 


 We did this at first. It seemed convenient: no need to create many library layouts, and switching
 states was easier in the layer panel by toggling visibility.


 It’s important to name layers and layer groups clearly. Initially, this seemed convenient for all
 designers.


 However, in Figma, a child component is not just a reference to a master component but a full
 instance that occupies memory and carries all hidden layers. One instance “dragged” thirty hidden
 layers with it, increasing file size.


<h4>Method #2</h4>
Create a separate master component for each case.

 Only layout variations are considered: if the same layout has fifty states differing only by an
 icon, insert that icon as a nested component (matryoshka principle).


 ЗReplacing the icon takes a few clicks in the component panel. Other blocks can be swapped the
 same way — switches, checkboxes, radio buttons, etc.

<img src="/uploads/111_73406d3a50_217e45fbe5.gif" alt="enter image description here" />

 Initially, we chose method #1 — “super-components” with all states as hidden layers. This
 increased layers and file size. The better solution was method #2: create a separate component for
 each state.


 Next, we optimized the project: move master components to a separate file and optimize their
 structure — remove unnecessary layers, make each state a separate component. This solved multiple
 problems: reduced overall project weight and created a system of files that can be easily split in
 the future.


 We decided not to redo existing components but to rebuild the project from scratch, screen by
 screen. Besides solving the main task, we could clean up layouts from unnecessary layers and
 artifacts.


<h3>Workflow</h3>

 We worked on a “live” project with developers, analysts, testers, and client representatives
 involved. One designer handled the optimization while also developing new features and supporting
 development.


 Reworking two platforms took about a month. We logged key file metrics and took screenshots of
 Figma’s resource usage (View > Resource Use) after closing each section. So, what did we achieve?

Optimizing a Figma Project Using a Banking App as an Example

Lifehack-figma.jpg

Last year, we fully switched from Sketch to Figma. Since then, we’ve settled in and absolutely love it. This article will be useful for both newcomers and experienced users alike.

<h3>1. Create a Page Structure</h3>


 For smaller projects, we keep everything in one file — drafts, concepts, and final mockups with
 components. To help developers and clients understand where the final design is and where the
 conceptual drafts live, we divide the file into pages.


 We break the page list into sections. To make it easier to scan, we use emojis and add spaces at
 the beginning of page names to imitate hierarchy.


 Technically, this “structure” is just a visual trick — Figma doesn’t allow nesting pages. So, we
 use empty pages as section dividers.

Here are a few examples of such a structure:


 <img src="/uploads/2_0fcfc29644_c00e3265a4.png" alt="2_0fcfc29644.png" />
 
 Using emojis like 🟢 or 🟠, you can also indicate the readiness of a section before handing it
 over to development.
 


<h3>2. Use Identical Layer Names for Connected Components</h3>


 To preserve text when switching between component states, text layers in both components must have
 identical names. This is especially useful for buttons, list items, and input fields.
 <img src="/uploads/gif1_a31ffe4bfc_bdee87fc89.gif" alt="gif1_a31ffe4bfc.gif" />



 For example, when switching an input from its default state to focus state, the label “Address”
 moves upward without losing its name.


 To make it work, make sure the text layers are named the same way — for instance, “Title” and
 “Title,” as shown below.
 <img src="/uploads/3_9b0b21b80a_4e427ea4f2.png" alt="3_9b0b21b80a.png" />


<h3>3. Save All Images as Color Styles</h3>

 If you often use logos, flags, or avatars as fills, it’s handy to store them as color styles. This
 way, you can quickly apply them to any shape without re-uploading images.
 <img src="/uploads/4_e0f12b6320_0f4e076a98.png" alt="4_e0f12b6320.png" />


<h3>4. Quickly Find All Elements with Similar Properties</h3>


 In just two clicks, you can find all elements with similar properties — fill, stroke, font, etc.
 Select an element, go to Edit > Select All with the Same…, and choose the property you want to
 match.


 This is super helpful when you need to replace outdated colors, fonts, or swap component
 instances.
 <img src="/uploads/5_d1867a25f9_ce947e319b.png" alt="5_d1867a25f9.png" />


 You can also use this trick to move a master component to another file. How? Let’s talk about that
 next.


<h3>5. Move a Master Component to Another File</h3>


 Figma doesn’t have a built-in option to transfer a used master component to another file — but
 there’s a reliable manual way to speed things up.

Here’s how:
<ul>
 <li>Copy the master component to the new file.</li>
 <li>Connect that new file as a library to your current one.</li>
 <li>Select any instance of the old master component.</li>
 <li>Go to Edit > Select All with the Same Instance.</li>
 <li>
 Use the Instance menu in the toolbar to replace the selected elements with the new component.
 </li>
 <li>
 Done! Now check the replaced instances for any broken text or style links. To keep texts intact
 during replacement, make sure text layers have identical names (see tip #2).
 </li>
</ul>
<img src="/uploads/6_7fc92fed3f_fcb22460cb.png" alt="6_7fc92fed3f.png" />

 You can use the same approach to move color and text styles between files. For color styles,
 plugins like
 <a href="https://www.figma.com/community/plugin/816627069580757929/Style-Organizer"
 >Style Organizer</a
 >
 (or similar) will also help.


<h3>6. Turn Lists into Auto Layouts</h3>


 If you turn a list into an Auto Layout, it becomes much easier to manage — you can duplicate rows
 with Cmd+D or delete items from the middle without breaking spacing.


 <img
 src="/uploads/gif2_edaddde0b0_e210f9c736.gif?updated_at=2023-03-15T12:14:30.185Z"
 alt="gif2_edaddde0b0.gif"
 />


<h3>7. Turn Everything into Auto Layouts</h3>

Familiar situation? 👇

 <img
 src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z"
 alt="gif3_5b2c747874.gif"
 />

All that can be fixed simply by wrapping those three elements in an Auto Layout.

 <img
 src="/uploads/gif4_d3a121f425_46f3b574e7.gif?updated_at=2023-03-15T12:16:14.830Z"
 alt="gif4_d3a121f425.gif"
 />

Here are a few more examples:

 <img
 src="/uploads/gif5_bc5c564ae3_ca286a0665.gif?updated_at=2023-03-15T12:17:29.082Z"
 alt="gif5_bc5c564ae3.gif"
 />


 <img
 src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z"
 alt="gif6_4e257c573f.gif"
 />


 <img
 src="/uploads/gif7_c8f57944c0_b0db50f4d7.gif?updated_at=2023-03-15T12:17:28.615Z"
 alt="gif7_c8f57944c0.gif"
 />


 A progress bar, for instance, can be made from an Auto Layout and invisible text. This method is
 especially useful when the progress bar lives inside a component, and you need to show multiple
 states without detaching it.


<h3>8. Stretch Auto Layouts</h3>


 To make content inside your blocks adapt when resizing, set the Auto Layout parameter to Stretch
 Left & Right in the top toolbar.


 <img
 src="/uploads/gif8_5129a53089_95559dd5ed.gif?updated_at=2023-03-15T12:20:40.099Z"
 alt="gif8_5129a53089.gif"
 />


<h3>9. Open More Than One Window in the Desktop App</h3>


 Not everyone knows that you can open multiple windows in Figma’s desktop app. Just use the
 shortcut Cmd+Shift+N.


 This is especially handy when you work on several files at once — say, iOS, Android, and a shared
 component library.


 And by the way, we explain why large projects are better kept in separate files in another
 <a
 href="https://mish.design/blog/2--optimizaciya-proekta-figma-na-primere-bolshogo-bankovskogo-prilozheniya"
 >article</a
 >.


 <img
 src="/uploads/8_9cb8117241_ca9c42c193.png?updated_at=2023-03-15T12:22:10.113Z"
 alt="8_9cb8117241.png"
 />


<h3>10. Stop Doing Math in Your Head</h3>


 Fields that accept numeric values understand simple arithmetic. You can double an element’s width
 or add 50% — no calculator needed. It saves time and reduces mistakes in manual calculations.


 <img
 src="/uploads/9_a349a438ba_92da5dec3b.png?updated_at=2023-03-15T12:22:10.224Z"
 alt="9_a349a438ba.png"
 />


 We’ve adopted these simple rules at Mish — and the results exceeded expectations. Many tasks
 started moving much faster, and unified internal guidelines made it easy to switch designers
 between projects without losing time. Both our teammates and clients noticed the difference.

Product Management

hello@mish.design

Moscow

Nizhny Novgorod