image 13.jpg

My name is Misha, and I've been running the design studio Mish for almost three years. When I started my studio, I dreamed of big, exciting projects for my team. The thought of having to "rent out" any of my designers to client companies seemed completely unacceptable to me. But one practical experience completely changed my perspective on outstaffing.

<h3>
  My name is Misha, and I have been running the Mish design studio for almost three years. When I
  created my studio, I dreamed of big and exciting projects for my team. The very idea of having to
  “rent out” any of them to client companies seemed unacceptable to me. But one real-life experience
  completely changed my attitude toward outstaffing.
</h3>

<p>
  A client who had their own IT department alongside working with us as an agency proposed that we
  provide resources for three months under their management. The result? The client got an excellent
  product, the designers gained valuable experience, and we strengthened our relationship with the
  client and began actively working with the outstaffing model. However, we often encounter
  misunderstanding of this format among designers, so we decided to explain in detail how it
  actually works.
</p>

<h3>What is Outstaffing?</h3>

<p>
  Let's start with terminology. Outstaffing is essentially staff leasing, where all legal and
  financial matters are handled by the company providing the resources. In practice, a designer is
  employed by one company but performs work for another. In most cases, the designer works in the
  client's office, completes tasks assigned by the client, and communicates closely with the client
  company's employees. The outstaffing company, which officially employs the designer, handles their
  salary, vacation time, and other administrative matters.
</p>

<h3>Why It's Needed</h3>

<p>
  What makes this collaboration format beneficial for client companies? This approach can be
  justified with complex financial models proving its cost-effectiveness. But all that is boring,
  abstract, and not particularly relevant for designers. Besides financial reasons, there are more
  tangible benefits.
</p>
<p>
  Imagine there's a client on the market—a large bank with its own in-house team. Suddenly,
  management decides to conduct large-scale research and, based on the results, develop several user
  scenarios and test them. Pulling people from the main workflow isn't possible. Hiring an entire
  new team for a project that might not succeed is time-consuming, expensive, and unjustified. If
  the project gets cancelled, it's unclear what to do with the new hires. This is when an external
  company with designers comes to the rescue. A similar situation occurs when positions need to be
  filled quickly using outstaffing resources.
</p>
<p>
  We collaborate with major players like Alfabank, NLMK, Gazprombank, Sportmaster, and others.
  Experience shows that every large corporation periodically uses outstaffing services. New requests
  arise daily, while the market faces a shortage of solid mid-level designers.
</p>

<h3>How Hiring Works: Contact with the Outstaffing Company</h3>

<p>
  Let's examine step-by-step what happens when Company X approaches an outstaffing provider
  requesting 2-3 designers for a project. Different outstaffers announce vacancies differently: some
  simply never stop recruiting, while others clearly specify timelines and project details. In
  practice, the outstaffing company first checks their available in-house resources, then reaches
  out to partner companies, and only when no suitable designers are found do they begin recruiting
  from the job market.
</p>
<p>
  We'll focus on designers from the job market, since in-house staff are usually prepared for such
  scenarios. At Mish, we practice having our staff work temporarily on client-side projects, giving
  them a chance to work on different products and take a breather, as studio work pace is several
  times higher.
</p>
<p>
  So, you—a potential candidate—saw an outstaffing company's announcement, sent your resume, and are
  waiting for a response.
</p>

<h3>Resume Tips</h3>

<ul>
  <li>
    The email subject line should contain your level or the position from the vacancy plus your full
    name. It makes searching easier.
  </li>
  <li>City location and relocation possibilities, not primary but important.</li>
  <li>
    Portfolio organized in Figma or collected in one place. Everyone's time is limited, so
    candidates with huge lists of Google Drive links usually get filtered out.
  </li>
  <li>
    Resume link, the outstaffing company prepares CVs specifically for each client, but having your
    own is beneficial.
  </li>
  <li>Preferences and salary expectations are better placed at the end.</li>
  <li>
    Professional preferences are important to specify so you don't end up on a project that
    completely doesn't interest you.
  </li>
</ul>
<p>
  If your resume fits, you'll be scheduled for a first interview with the outstaffing company. No
  special preparation needed. The main goal is to verify the designer's adequacy and match with the
  qualities stated in the resume. Assuming you successfully pass the internal interview, you'll be
  sent to a second one—with the client company.
</p>

<h3>Contact with the Client Company</h3>

<p>
  If the outstaffing company has already shown interest in you, leverage this advantage. They can
  properly prepare you for the client meeting and share all the insider information. Ask in advance
  what to expect during interviews, how strong the competition is, and where candidates typically
  struggle. The outstaffing company will provide recommendations on what to read or review, what not
  to say, and what questions were asked in previous interviews.
</p>

<h3>Pre-Interview Checklist: Top 6 Points</h3>

<ul>
  <li>Know your strengths and weaknesses and be able to articulate them concisely.</li>
  <li>Prepare to showcase your work despite NDAs.</li>
  <li>
    Communicate your industry preferences - outstaffing companies usually have multiple openings
    across different business sectors. If you've worked with complex admin panels, understand
    wholesale operations, and want to continue in this field, now's the time to mention it.
  </li>
  <li>
    Ask all employment-related questions: legitimate salary arrangements, company reputation,
    project details including timelines, functionality, and potential scenarios. If they're rushing
    your decision without providing clear information, that's a red flag.
  </li>
  <li>
    Review the resume the outstaffing company prepared for you - it might contain unexpected
    information.
  </li>
  <li>
    Join video calls with your camera on from a computer - this significantly increases rapport and
    allows you to showcase projects if needed.
  </li>
</ul>

<h3>The Test Assignment</h3>
<p>
  The third stage is the test assignment - an optional step with unpredictable scope. At Mish, we
  try to compensate candidates for test assignments. Sometimes they're genuinely extensive, and if a
  candidate has passed previous stages, it's right to incentivize them and boost motivation.
</p>

<p>
  Some companies provide significant hints to candidates. We never do. Our typical guidance looks
  like "this needs more thought" or "elaborate further here." Why? If we complete the test for the
  candidate, they'll start work and the deception will be exposed within months. We'll end up with a
  weak designer we can't place anywhere, damaging relationships with both the candidate and client.
  Our market reputation suffers too. Nobody wins. So you'll need to handle the assignment
  independently
</p>

<h3>The Work Process</h3>

<p>
  You've passed all stages and received a job offer. What's next? Who's responsible for what, and
  where do you go with questions and issues?
</p>
<p>
  On one hand, Company X should provide work and manage your timing. On the other hand, this is also
  the outstaffing company's responsibility. They typically assign a manager or HR representative (or
  both) responsible for your morale, timely salary payments, sick leave and vacation processing, and
  other financial and personnel matters. The outstaffing company serves as the designer's advocate
  with the client - they care about your salary and bonuses, and defend you in conflict situations.
</p>
<p>
  Technical aspects like equipment, workspace, and onboarding are also the outstaffing company's
  responsibility. They should prepare for your start date by ensuring all access and equipment are
  ready.
</p>
<p>
  The integration process depends on each client's specific tasks and corporate culture. We have
  client companies where our designers enjoy complete freedom - they design complex systems without
  art director involvement, conduct their own research, and occasionally tap studio resources for
  illustrations or copywriting. Some clients integrate designers so well into their teams that they
  stay 1.5-2 years. We periodically check how they're doing and offer support, but they've become
  full team members at the companies they're designing for.
</p>
<p>
  They attend corporate events and training sessions. Their work process differs in only one way –
  it can end.
</p>

<h3>When Projects End</h3>

<p><strong>Several scenarios typically unfold:</strong></p>
<ul>
  <li>
    Project extension. If everything went well and there's new backlog, Company X may extend the
    project for years
  </li>
  <li>
    Direct hire offer. If the company likes the designer, they may offer a permanent position. The
    outstaffing company usually receives small compensation and loses a strong resource, but
    maintains excellent client relationships
  </li>
  <li>
    Return to the studio. The outstaffing company may bring the employee back to work on internal
    projects. We currently have team members who returned to the "family" after a year-long
    "assignment" and now handle research on outsourced projects
  </li>
  <li>
    New project. In this case, you return to the initial stages with an external interview and a
    test assignment. You can find many stories on the internet about fraud when working for an
    outstaffing company. In most cases, these are representatives of low-paid professions who find
    work through recruitment agencies. The companies disappeared without paying salaries, and there
    were no employment contracts — the classic scenario. In the IT industry, everything works
    differently. If someone doesn't pay salaries, the whole market finds out. The image risks here
    are much higher than an employee's salary, so all market players understand this perfectly well.
    If you get hired through a large or well-known company, you are 99% protected.
  </li>
</ul>

<h3>Advantages of working through an outstaffer</h3>
<ul>
  <li>They help you get hired because, besides you, the outstaffer is also interested in this.</li>
  <li>
    To get hired by a company like Yandex, for example, you need to go through about 5-6 interviews;
    through outstaffing, you only need to go through two.
  </li>
  <li>
    You have the opportunity to work in different teams and gain experience, and changing teams and
    projects does not lead to dismissal.
  </li>
</ul>


Outstaffing: Mish experience

Пименова Миша

2023-04-10 18.20.51.jpg

At Mish, we receive dozens of resumes every day. Reviewing them and finding suitable candidates takes a lot of time, so poorly formatted emails often go unnoticed. To help you avoid being overlooked, we’ve put together a few recommendations.

<h3>Mistake #1: Embedding a PDF with all information in the email</h3>
<p>
  Such a document is hard to navigate, and the information in each PDF is presented differently.
  Designers often forget to check links, which frequently end up non-clickable or even just images.
  As a result, HR spends a lot of time searching. Eventually, this becomes frustrating, and you stop
  opening files. No one wants to spend half a day deciphering your resume. Please respect the
  recruiter’s time.
</p>

<h3>Mistake #2: No portfolio</h3>
<p>
  It’s impossible to respond positively to even the most inspiring email from a designer who is
  willing to do anything but cannot provide a single piece of work. Offers to complete a test
  assignment usually don’t work either. First, test assignments should be paid. Everything else is
  free nonsense. I don’t believe in it.
</p>

<h3>Mistake #3: Portfolio on an inconvenient platform</h3>
<p>
  Again, think about the person on the other side of the city who is looking at your portfolio for
  the first time. You send a link to Google Drive with a million folders. How much time, on average,
  do you think it takes to evaluate your resume and portfolio? Follow the principle of “less is
  more”: prioritize and organize. Don’t try to impress an employer with quantity.
</p>

<h3>Mistake #4: Links in the body of the email</h3>
<p>
  We often receive long, unstructured emails — like free-form essays of “I can do this… And here I
  did that” — with lots of links scattered throughout. This creates the impression of a chaotic mind
  and makes the recruiter’s job harder. The ideal solution: compile a small Figma presentation with
  good navigation tools and embed all your links there.
</p>

<h3>Mistake #5: Unidentifiable authorship</h3>

<p>
  When designers send us portfolios on Behance, I quietly rejoice. It shows professional level and
  respect for the potential employer. But then I see that the projects are shared by a group of ten
  people. It’s impossible to identify the applicant’s exact contribution.
</p>

<h3>Mistake #6: Starting with demands</h3>
<p>
  This applies not only to designers but to any candidate. Emails that start with the applicant’s
  demands or conditions are very off-putting: “In the office, you must provide me with this laptop
  model, ensure coffee and cookies, be lenient with my tardiness, because I am a Creator…” Few
  people read these emails to the end. Don’t try to inflate your value this way.
</p>

<h3>What I See as the Perfect Resume</h3>

<p>
  1. Always indicate your city right away. Some vacancies are location-specific, some are not. This
  saves the recruiter time.
</p>

<p>
  2. Present your portfolio in Figma or on Behance (see previous points). If you host it on your
  website, navigation and curation must be flawless.
</p>

<p>3. Provide a link to your resume (concise and clear).</p>

<p>4. Toward the end, you can describe your “wish list” and salary expectations.</p>

<p>
  5. List your professional preferences, mention what projects you enjoy working on, and share your
  vision for professional development.
</p>


Resume Tips for Designers: Presenting Yourself the Right Way

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>

<p>
  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.
</p>
<p>
  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.
</p>
<p>
  Technically, this “structure” is just a visual trick — Figma doesn’t allow nesting pages. So, we
  use empty pages as section dividers.
</p>
<p>Here are a few examples of such a structure:</p>

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

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

<p>
  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" />
</p>

<p>
  For example, when switching an input from its default state to focus state, the label “Address”
  moves upward without losing its name.
</p>
<p>
  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" />
</p>

<h3>3. Save All Images as Color Styles</h3>
<p>
  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" />
</p>

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

<p>
  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.
</p>
<p>
  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" />
</p>
<p>
  You can also use this trick to move a master component to another file. How? Let’s talk about that
  next.
</p>

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

<p>
  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.
</p>
<p>Here’s how:</p>
<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>
<p><img src="/uploads/6_7fc92fed3f_fcb22460cb.png" alt="6_7fc92fed3f.png" /></p>
<p>
  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.
</p>

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

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

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

<p>Familiar situation? 👇</p>
<p>
  <img
    src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z"
    alt="gif3_5b2c747874.gif"
  />
</p>
<p>All that can be fixed simply by wrapping those three elements in an Auto Layout.</p>
<p>
  <img
    src="/uploads/gif4_d3a121f425_46f3b574e7.gif?updated_at=2023-03-15T12:16:14.830Z"
    alt="gif4_d3a121f425.gif"
  />
</p>
<p>Here are a few more examples:</p>
<p>
  <img
    src="/uploads/gif5_bc5c564ae3_ca286a0665.gif?updated_at=2023-03-15T12:17:29.082Z"
    alt="gif5_bc5c564ae3.gif"
  />
</p>
<p>
  <img
    src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z"
    alt="gif6_4e257c573f.gif"
  />
</p>
<p>
  <img
    src="/uploads/gif7_c8f57944c0_b0db50f4d7.gif?updated_at=2023-03-15T12:17:28.615Z"
    alt="gif7_c8f57944c0.gif"
  />
</p>
<p>
  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.
</p>

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

<p>
  To make content inside your blocks adapt when resizing, set the Auto Layout parameter to Stretch
  Left & Right in the top toolbar.
</p>
<p>
  <img
    src="/uploads/gif8_5129a53089_95559dd5ed.gif?updated_at=2023-03-15T12:20:40.099Z"
    alt="gif8_5129a53089.gif"
  />
</p>

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

<p>
  Not everyone knows that you can open multiple windows in Figma’s desktop app. Just use the
  shortcut Cmd+Shift+N.
</p>
<p>
  This is especially handy when you work on several files at once — say, iOS, Android, and a shared
  component library.
</p>
<p>
  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
  >.
</p>
<p>
  <img
    src="/uploads/8_9cb8117241_ca9c42c193.png?updated_at=2023-03-15T12:22:10.113Z"
    alt="8_9cb8117241.png"
  />
</p>

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

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


10 Figma Hacks to Make Your Workflow More Efficient

Крестов Иван

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

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>
<p>
  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.
</p>
<p>
  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.
</p>
<p>
  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.
</p>
<p>
  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.
</p>
<p>
  <img
    src="/uploads/error_Figma_3da87ea2d2.jpg?updated_at=2023-03-09T14:47:12.467Z"
    alt="enter image description here"
  />
</p>
<blockquote>
  <p>
    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.
  </p>
</blockquote>
<p><strong>Two main causes of slowdowns:</strong></p>
<ul>
  <li>Too many layouts in a single file.</li>
  <li>Master components built with many hidden layers.</li>
</ul>
<p>
  Both of these significantly impacted key file metrics: memory usage and total layer count. Let’s
  look at each point in more detail.
</p>
<p><img src="/uploads/stat_Figma_6c131a2528.jpg" alt="enter image description here" /></p>

<h3>Cause 1: Too many layouts in one file</h3>
<p><strong>The “adult” app design consists of three files:</strong></p>
<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>
<p>
  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.
</p>
<p><img src="/uploads/arrow_Figma_f23a51acaf.jpg" alt="enter image description here" /></p>
<p>
  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.
</p>
<p>
  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.
</p>

<h4>Method #1</h4>
<p>
  Duplicate the file as many times as needed and remove unnecessary layouts or pages from each
  duplicate.
</p>
<p><img src="/uploads/tablet_Figma_00c6d3ce66.jpg" alt="enter image description here" /></p>
<p>
  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.
</p>

<h4>Method #2</h4>
<p>
  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.
</p>
<p><img src="/uploads/arrow2_Figma_8df4ce0640.jpg" alt="enter image description here" /></p>
<p>This method seems feasible and doesn’t violate any obvious Figma rules.</p>
<p>
  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>
  .
</p>
<p>
  Such bugs can occur even when copying and pasting a layout within the same file via
  “<strong>⌘</strong>+C → <strong>⌘</strong>+V” or “Copy → Paste.” We noticed it often happens with
  complex components and when components have been copied and pasted multiple times.
</p>
<p>To avoid this bug, copy complex multi-part components while holding Opt/Alt.</p>
<p>
  We couldn’t quickly split the file and resolve the first cause of slowdowns, so we moved to the
  second cause.
</p>

<h3>Cause 2: Master components built with many hidden layers</h3>
<p>
  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.
</p>
<p>
  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.
</p>
<p><img src="/uploads/tablet2_Figma_2f24b265c7.jpg" alt="enter image description here" /></p>
<p>
  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.
</p>
<p>
  When creating initial components, we considered two approaches for design system construction.
</p>

<h4>Method #1</h4>
<p>
  <strong> Create one component and include all states as hidden layers. </strong>
</p>
<p>
  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.
</p>
<p>
  It’s important to name layers and layer groups clearly. Initially, this seemed convenient for all
  designers.
</p>
<p>
  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.
</p>

<h4>Method #2</h4>
<p><strong>Create a separate master component for each case.</strong></p>
<p>
  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).
</p>
<p>
  ЗReplacing the icon takes a few clicks in the component panel. Other blocks can be swapped the
  same way — switches, checkboxes, radio buttons, etc.
</p>
<p><img src="/uploads/111_73406d3a50_217e45fbe5.gif" alt="enter image description here" /></p>
<p>
  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.
</p>
<p>
  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.
</p>
<p>
  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.
</p>

<h3>Workflow</h3>
<p>
  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.
</p>
<p>
  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?
</p>


Optimizing a Figma Project Using a Banking App as an Example

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.


<p>
  <strong>
    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.
  </strong>
</p>

<p>
  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.
</p>
<p>
  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.
</p>
<p>
  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.
</p>
<img src="/uploads/Component_structure_a9fdecec39_67873e680d.jpeg" alt="Component structure" />

<h3>Component Structure</h3>

<p>
  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.
</p>
<p>
  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>
  .
</p>
<img
  src="/uploads/Typical_List_Component_8bfee335ef_cff3fba4cd.jpeg"
  alt="Typical list component"
/>
<p>
  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.
</p>
<p>
  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.
</p>
<img src="/uploads/Assets_panel_23748eb706_2fc306f287.jpeg" alt="Assets panel" />
<p>
  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.
</p>
<p>
  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.
</p>
<p>
  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.
</p>
<img src="/uploads/Component_path_d7470218f5_78214a1467.jpeg" alt="Component path" />

<h3>Path to a Component</h3>

<p>
  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.
</p>
<p><strong>list64+icon/1-1</strong>— list element with one title and amount.</p>
<p><strong>list64+icon/2-2</strong>— with a title, subtitle, and amount with a subline.</p>
<p>
  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.
</p>
<p>
  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.
</p>
<img src="/uploads/123_b4474790c4_4fc0ab8ff9.gif" alt="Assets" />
<p>
  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:
</p>
<p>componentsAndroid/lists/elements/circle40&times;40/dark</p>
<p>componentsAndroid/lists/elements/circle40&times;40/white</p>
<p>componentsAndroid/lists/elements/circle40&times;40/white15</p>
<p>componentsAndroid/lists/elements/circle40&times;40/blue</p>
<p>componentsAndroid/lists/elements/circle40&times;40/blue5</p>
<p>componentsAndroid/lists/elements/circle40&times;40/blue10</p>
<img
  src="/uploads/Background_components_for_icons_e051190aab_0ae1602c70.jpeg"
  alt="Background_components_for_icons_e051190aab.jpeg"
/>
<p>Now let’s look at what the full path to the components consists of.</p>
<img
  src="/uploads/full_path_to_components_0290658f98_85ce0e30d7.jpeg"
  alt="full path to components"
/>
<p><strong>componentsAndroid</strong>— file name.</p>
<p><strong>lists</strong>— frame name in the file.</p>
<p>
  Then comes the custom name, each element of which between “/” creates another nesting level.
  Finally, the name of the element itself.
</p>
<p>Another nesting level can be created by dividing the file into pages.</p>
<p>
  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.
</p>
<img src="/uploads/nesting_level_1adf7ec501_897dc65adc.jpeg" alt="nesting level" />
<p>
  Each designer decides the order of this path depending on the specifics of the project and
  convenience of use.
</p>
<p>
  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.
</p>
<p>
  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
</p>
<p><strong>Path to a Component</strong></p>
<p>We organized the library into three files:</p>
<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" />
<p>
  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.
</p>

<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

Frame 1171274527.png

One day, our Middle Developer Vitalik decided to rewatch Spider-Man and realized that the main character’s journey was remarkably similar to his own. The next day, he excitedly told us about it, and we asked him to write an article. So, why are IT specialists a kind of Spider-Man too?

<h3>
  Perhaps we could have chosen another superhero movie, but let’s break it down using this one as an
  example.
</h3>
<p><strong>Any movie of this genre follows the same structure:</strong></p>
<ul>
  <li>The main character is basically a loser and doesn’t know what they want to be.</li>
  <li>Their life is falling apart, and they realize they need to do something about it.</li>
  <li>
    They turn to a mentor and learn an important lesson (with great power comes great
    responsibility).
  </li>
  <li>An event gives them superpowers. The hero enjoys their newfound strength.</li>
  <li>
    A critical situation occurs (death or injury of a loved one, for example); the character
    initially gives up but then realizes it’s time to take control.
  </li>
  <li>
    The hero grows and becomes who they wanted to be, thanks to self-belief and support from loved
    ones.
  </li>
</ul>
<p>
  Doesn’t this resemble the path into IT before landing your first job? If you don’t see the
  similarities, let’s dive in deeper.
</p>
<img src="/uploads/Bez_nazvaniya_6effda991f_a5feb5351b.png" alt="Bez_nazvaniya_6effda991f.png" />

<h3>Step One: Life “Before”</h3>
<p>
  So, you’re an ordinary person, studying in school or university, and in your free time, you’re
  glued to your computer. People around you constantly ask what you want to do in the future and
  what you want from life. You don’t know exactly, given your age, but you suspect it will involve
  computers. Computers are interesting: there are web browsers, games, videos, and all kinds of fun
  stuff — you want to work in this world, but you don’t know in what role.
</p>
<p>
  Time passes, but you can’t make a choice. You try video editing, making music, writing articles,
  and other cool stuff, but nothing feels right. However, by learning new skills, you learn how to
  learn. You don’t have money for courses, so all information comes from Google, YouTube, and other
  open sources. You figure some things out on your own. Each day, your confidence that you should
  work with computers grows.
</p>
<p>
  Or imagine a different scenario: you’re already an adult, but your life isn’t satisfying. You
  don’t like your job, the pay is low, your professionalism isn’t appreciated, and your colleagues
  only talk about kids and household chores. It all starts to feel frustrating. You want a different
  life and feel capable of more.
</p>
<img
  src="/uploads/Bez_nazvaniya_1_79aeb3fdd0_e1b49e4458.png"
  alt="Bez_nazvaniya_1_79aeb3fdd0.png"
/>

<h3>Step Two: Crisis</h3>
<p>
  You reach the end of school or your first year at university, and the skills you’ve accumulated
  weigh on you: with so many possibilities, you don’t know what you want. You face choices:
</p>
<ul>
  <li>Videomaker</li>
  <li>Journalist</li>
  <li>System administrator</li>
  <li>IT support</li>
  <li>Designer</li>
</ul>
<p>
  Perhaps you make a mistake and choose one of these paths, hoping that university will help you
  grow and become a professional.
</p>
<p>
  Or you give up on that and become a programmer because you’ve heard they earn huge salaries and
  are generally awesome — but it’s completely unfamiliar to you; maybe math has always been your
  enemy.
</p>
<p>
  At university, you’re taught some really strange basics: data structures, algorithms, binary
  systems, lots of theory about memory and how computers process data — all supposedly important. In
  practice, though, this knowledge is mostly useless. How to create your own Facebook, write a
  cookie clicker, or build a new Tinder? University doesn’t tell you.
</p>
<p>
  As an adult, it’s unclear how you could leave a comfortable job for vague prospects. You feel
  anxious about failing because information is harder to absorb, risks seem scary, and it’s tough to
  decide what to retrain in. Diving into a new field from scratch is intimidating. On top of that,
  balancing work is difficult: studying takes time and effort, and with a full-time job, you barely
  have a couple of hours a day for learning (forget about family). So time passes, you’re stuck in
  anxiety, blame yourself for indecision, but are too scared to act.
</p>
<img
  src="/uploads/Bez_nazvaniya_2_7f32aac4fc_69f1651210.png"
  alt="Bez_nazvaniya_2_7f32aac4fc.png"
/>

<h3>Step Three: Mentor</h3>
<p>
  At university, you meet an interesting guy who really works as a programmer and earns a lot of
  money. He shares his experience and tells you how he got there. Maybe he’s a geeky overachiever
  who’s been learning Pascal since childhood. Or maybe he’s a 200 IQ genius who just watched YouTube
  courses and now codes like a pro in any language.
</p>
<p>
  Or, while searching for a homework solution, you come across an article about getting into
  programming, get hooked, and decide to try. A programmer friend gives you advice on what to focus
  on and how to pass interviews.
</p>
<p>
  If you’re an adult, you might reconnect with a school friend who used to tinker with computers and
  is now earning a huge salary as a programmer. Inspired by their example, you see an ad for a
  course and finally decide: it’s time.
</p>
<img
  src="/uploads/Bez_nazvaniya_3_0717eb5919_3b99a15965.png"
  alt="Bez_nazvaniya_3_0717eb5919.png"
/>

<h3>Step Four: Gaining Power</h3>
<p>
  You start diving into the subject, and the more information you absorb, the more confident you
  feel: everything works, tasks rarely require deep knowledge, and new skills come easily. You just
  do interesting work in the evenings after studying or work. This is the moment of gaining
  superpowers — for you, there are no obstacles. You realize you can Google anything, solve any
  problem, and enjoy it. People ask you for advice, even to fix minor issues, and you start
  understanding IT humor. Your new profession feels like a blessing.
</p>
<p>
  <img
    src="/uploads/Bez_nazvaniya_4_d1a86fa449_d10cffd6ef.png"
    alt="Bez_nazvaniya_4_d1a86fa449.png"
  />
</p>
<p>
  Energized by success, you’re determined to get a job. But first, you need to organize your
  knowledge, see what interviewers ask, and understand requirements for test assignments — all
  tedious. You also notice that you keep using the same techniques from project to project, no real
  growth. But it seems minor: if all lines and methods are similar, why reinvent the wheel?
</p>
<p>
  Putting doubts aside, you go to your first interview, thinking they’ll snatch up a talent like you
  right away.
</p>
<img
  src="/uploads/Bez_nazvaniya_5_abf89e1c7e_6328e77648.png"
  alt="Bez_nazvaniya_5_abf89e1c7e.png"
/>

<h3>Step Five: Failure</h3>
<p>Your first interview is a complete failure.</p>
<p>
  You discover your knowledge is useless; you should have studied based on job requirements, not
  online articles. You lack real skills or have only the basics. You get rejected repeatedly, and no
  one hires you. Beaten and desperate, you crawl back to your “den,” unsure of how to move forward.
</p>
<p>
  Now comes reflection. What’s next? Neither YouTube, Google, nor courses help anymore. The
  situation seems hopeless.
</p>
<p>
  Then you remember the person who inspired you to become a programmer. Or a friend who’s been in IT
  for three years. You reach out, and they kindly tell you it’s not time to give up — here’s a plan.
  You improve the necessary skills, ask for detailed feedback after interviews, complain to your
  loved ones about how hard it is, and they support you and celebrate every success with you.
  Gradually, you regain confidence that you can achieve your goal.
</p>
<img src="/uploads/Bez_nazvaniya_4734f2bbde_3406a77cfc.png" alt="Bez_nazvaniya_4734f2bbde.png" />

<h3>Step Six: Success</h3>
<p>
  Your old code now seems terrible, projects become more meaningful, you build an impressive
  portfolio, and after thirty interviews, finally — the thirty-first is a success! Pop the
  champagne: our hero has finally landed the desired job. A happy ending worthy of a superhero
  movie.
</p>
<img
  src="/uploads/Bez_nazvaniya_2_0237efb417_43d7d5cfba.png"
  alt="Bez_nazvaniya_2_0237efb417.png"
/>

<p><strong>Key Takeaways</strong></p>
<p>
  Trying to see if you have what it takes to be Spider-Man? My answer: yes, you are Spider-Man. Why?
  Because you fell a hundred times and got back up a hundred times. You faced difficult problems and
  solved them repeatedly. You learned not to give up and to fight to the end.
</p>
<p>
  Who will pick up production after a junior drops it? Who will configure servers so clients can see
  results? Who will repaint that button red on the homepage if not you? Exactly — no one. You took
  responsibility for your employer, client, and yourself. That’s why you cannot fail at the next
  challenge; every project must be more complex, implementation simpler, algorithms shorter, and
  memory usage smaller.
</p>
<p>
  Each of us is a Spider-Man who, despite challenges, handles them and learns to live with them.
  You’ve struggled a hundred times over a hundred years, yet you never think of quitting because the
  feeling of swinging on your web (solving a problem) is why you became a developer.
</p>


“Spider-Man: Across the Spider-Verse” as a Path to IT

Шушкевич Виталий

tower4.png

A story about how we created a GOST-compliant version of a website in collaboration with Goose Gaming. All for a competition by the presidential platform "Russia — Land of Opportunities" for gaming industry talents. We share the pitfalls that arise when adapting a website for people with disabilities.

<h3>How We Built a GOST-Compliant Website with Goose Gaming</h3>

<img src="/uploads/prevyu_5a1c594efd.png" alt="превью.png" />

<p>
  When Goose Gaming approached us to create an accessible version of their gaming website for a
  talent competition hosted by Russia's presidential platform "Russia — Land of Opportunities," we
  knew we were taking on something special.
</p>
<p>
  We won't bore you with the official GOST requirements—Russia's state standards for web
  accessibility. Here's a quick list: we needed to work on settings for the visually impaired —
  develop speech synthesis, change font size, increase contrast. At the same time, ensure the site
  can be navigated via keyboard and that there are no time limits for properly perceiving and using
  the content.
</p>
<blockquote>
  We're happy to participate in a socially significant project, as companies rarely think about
  special versions of websites. Because of this, people even with common conditions cannot use
  products without assistance.
</blockquote>
<p>Julia Semenchuk, Head of Development and Product Management at Mish.</p>

<h3>We Created the Problem — We Solved It</h3>

<p>
  Interface accessibility depends on design. Initially, it consisted of broken, intersecting
  elements and we liked it. But when we started adapting the site to GOST standards, the beauty
  broke. Tabs and buttons stopped highlighting from the keyboard. This is because the broken design
  was achieved by cutting off the excess part of the element, and the focus outline fell under the
  cut-off element. A unique experience for us, but not for our frontend developers. They complained
  a lot since they had to redo everything, so consider requirements at the design development stage.
</p>
<img
  src="/uploads/Sami_problemu_sdelali_sami_reshili_46105ccc40.png"
  alt="Сами проблему сделали — сами решили.png"
/>

<h3>How We Coded It</h3>

<p>
  First, we needed to work out the order of elements. On tablets, mobile versions, and desktop, they
  should be arranged in the same order, not shift or blur. Therefore, we used responsive layout and
  designed several mockups for main device resolutions.
</p>
<p>
  After that, we concentrated on creating ARIA attributes, which allow explicitly indicating what
  state the menu is in and adding readable text to graphic elements. In general, they help screen
  readers more accurately read the site, context, quotes, buttons, links, describe images, icons,
  etc. However, ARIA attributes need to be used consciously and not overdone, so as not to
  complicate screen readers' work.
</p>
<p>
  <em>
    Screen reader is a program that converts interface content into speech or Braille. They are
    needed by people with blindness and visual impairments, as well as users with cognitive features
    who find it easier to perceive information by ear. For example, people with dyslexia.
  </em>
</p>
<p>
  Of course, we couldn’t skip using semantic tags — they’re essential for proper SEO optimization.
</p>

<h3>Set Up and Save</h3>

<p>
  It's very convenient when special version settings are saved when revisiting the site, but there
  are cases when several people use one computer. Therefore, during development, such a scenario
  appeared: when a user enables the special version of the site, they see it in the state they
  configured it. Font size, line and letter spacing, color scheme are saved. But when revisiting the
  site or reloading the page, the special version is disabled so the current user can decide whether
  they need the special version or not.
</p>

<img src="/uploads/Nastroj_i_sohrani_59d509911c.png" alt="Настрой и сохрани.png" />

<h3>What About Images?</h3>

<p>
  GOST requires that the site has a function to disable images while preserving text content and
  voice-over. This way, users with impaired perception of small and bright images will find it
  easier to use the site.
</p>
<p>To describe how we did this, we'll tell you a bit of technical details, get ready:</p>
<ul>
  <li>
    Using a custom hook, we set default parameters for the special version and placed them in local
    storage by key.
  </li>
  <li>
    Then, thanks to a wrapper component in which we place the entire application. We passed
    parameters and a handler for changing them through context.
  </li>
  <li>
    We implemented the logic for finding all DOM elements corresponding to required conditions and
    assigning them necessary CSS properties in a separate custom hook.
  </li>
</ul>
<p>Ultimately, we simply call the hook on all application pages where images need to be hidden.</p>
<img src="/uploads/Kak_byt_s_kartinkami_97cc4ec4d2.png" alt="Как быть с картинками.png" />
<p>
  To pull off this scenario, we had to work through all possible cases of image usage on the site's
  pages, which took quite a bit of time. We handled each case in a specific way in terms of
  assigning or removing CSS properties. Additionally, we needed to designate some images as
  exceptions, as they should always remain visible to the user to keep the interface convenient and
  readable. For such cases, we added a special data-attribute to the images, which made them ignored
  when the "No Images" mode is enabled
</p>

<h3>Monochrome and Its Companions</h3>

<p>
  When creating the design for the accessibility version, it's crucial to adapt it for the most
  common vision problems. To achieve this, we developed monochrome variants, the ability to change
  font sizes, toggle images and sound on/off, and more. We also paid significant attention to hover
  effects and highlighting active tabs. We didn't forget about the order of elements either,
  ensuring it remains consistent across different resolutions—failing to do this would inevitably
  create difficulties when using screen readers and keyboard navigation.
</p>

<img src="/uploads/Monohrom_i_ego_druzya_37b53d239f.png" alt="Монохром и его друзья .png" />

<p>
  All browsers have built-in solutions for keyboard navigation, and we wanted to use them. However,
  over time we realized that standard libraries incorrectly displayed the broken design; the outline
  was crooked or didn't display at all. So we had to get a bit creative.
</p>
<p>
  To create complex object shapes, we used a CSS property called Clip-Path. It allows you to hide
  part of an element by creating a clipping region around it. But when it came to creating the
  accessibility version, another problem emerged. When trying to highlight an element using the Tab
  key, the outline still wouldn't display. To solve this issue, we created pseudo-elements and
  placed them over the elements that needed to be highlighted.
</p>
<blockquote>
  It's generally a good practice for any website, not just accessibility versions, to be keyboard
  accessible. If semantic tags are written correctly, 95% of this work pays off.
</blockquote>
<p>Maria, frontend developer at Mish</p>

<h3>How We Optimized the Workflow</h3>

<p>
  At our agency, we like everything organized; it simplifies work. Therefore, it made sense to
  organize the process when configuring site parameters so we wouldn't have to run around the entire
  project. For example, if we had developed all buttons from scratch, we would have had to make
  changes to each one when configuring the site.
</p>
<p>
  So we extracted the button into a component and added a special state. In it, we specified
  conditions and embedded all the information about how the element should look when the
  accessibility version is enabled. This allowed us to write all requirements in just one file
  without having to go through all the others. But this is standard practice: we create components
  on all projects and extract them into a separate library. It is convenient and speeds up the
  process.
</p>
<p>
  The site contains a lot of text that changes when the accessibility version is enabled, font size
  and letter spacing increase. Therefore, we handled text blocks the same way as buttons—we created
  a component that specifies all necessary parameters. Now, when switching to the accessibility
  version of the site, the component automatically commands all files. As a bonus, this feature
  makes it easy to add site narration.
</p>

<img
  src="/uploads/Kak_my_optimizirovali_rabotu_e014821f1e.png"
  alt="Как мы оптимизировали работу .png"
/>

<h3>What Conclusion Can We Draw?</h3>

<p>
  Challenges make you stronger, for example unusual requirements you're not prepared for, short
  implementation deadlines, and limited budgets. In such situations, you can only rely on experience
  and your team. Therefore, read requirements carefully and don't be afraid to improvise and add
  useful functionality that will improve user experience.
</p>
<p>
  Meanwhile, the first season of the "Start the Game" project has already ended. The finalists went
  to Kazan, predented their projects, and received financial support. The creators are preparing for
  a new stage of the competition so that those who didn't have time to participate in the first
  round or didn't pass the selection can try their luck in the second. We're adding new mechanics
  and tasks to ensure nothing prevents participants from reaching the finals.
</p>


GOST Busters: How We Developed a Custom Version of “Start the Game”

Силаев Герман

Семенчук Юлия

Скосырская Мария

mish_server.png

Hello, my name is Andrey Goncharov, and I’m a Frontend Developer at Mish Product Lab. Today we’ll take a close look at what Server/Backend-Driven UI is, how it works, and why it matters.

<h3>What Is a Backend-Driven UI?</h3>
<p>
  Backend-Driven UI (also called Server-Driven UI) is an approach to building applications where the
  backend controls not only the data but also how the interface looks. For example, in a frontend
  app, BDUI defines the layout.
</p>
<p>
  There are different levels of how deeply this concept can be integrated into a frontend
  application. Think of it as a spectrum.
</p>
<img src="/uploads/1644796358_69c744440a.png" alt="enter image description here" />
<p>Yes, it feels like everyone has written an article about this topic already.</p>

<h3>Our Cases</h3>
<p>The easiest way to understand this concept is through real examples.</p>
<p><strong>Case #1: Checkout Page</strong></p>
<p>
  A checkout usually goes through several steps: delivery method, payment method, contact details,
  and payment itself. Businesses have different requirements, so the steps vary. Essentially, these
  steps are formed with input fields. On the frontend side, we need to render the forms, handle
  navigation between steps, and send data back. The backend handles the rest of the logic.
</p>
<p>A vivid example: CS-Cart</p>
<img src="/uploads/1644796359_09b35c4805.png" alt="enter image description here" />
<p>This is roughly how checkout steps are organized in online stores.</p>

<p><strong>Case #2: Blog Post</strong></p>
<p>
  Blog posts are usually created in an admin panel with a WYSIWYG editor. Modern editors allow
  multiple columns, custom components, SEO settings, tags, and more. The backend stores the entries,
  manages access, and provides structure. The frontend renders the content based on that structure.
</p>
<p>A good example: Strapi.</p>
<p><strong>Case #3: UI Updates Without Releasing a New App</strong></p>
<p>
  Imagine you’re a bank hit by sanctions: your app is removed from app stores, and you can’t ship
  updates. But you still have an option — the entire interface comes from the server as JSON!
</p>
<p>A strong example — <a href="https://habr.com/ru/company/yandex/blog/683886/">DivKit.</a></p>

<h3>Why Use This Approach?</h3>
<p>Because it allows you to:</p>
<ul>
  <li>Change the layout of a frontend app significantly (Case #3).</li>
  <li>Restructure an existing screen (Case #3).</li>
  <li>
    Run A/B tests easily (Case #1 and #3). Normally, this requires coding, deploying new bundles,
    and lots of manual work.
  </li>
  <li>Quickly add promotional content from the marketing team.</li>
  <li>Create new content pages on the fly.</li>
</ul>

<h3>What Happens If You Don’t Use BDUI?</h3>
<p>Different roles in the team face different problems.</p>
<ul>
  <li>
    <strong>Project managers: </strong>
    need to consider the complexity of changing page structures. What if the team lead is
    inexperienced and can’t guide them well?
  </li>
  <li>
    <strong>Testers: </strong>
    global changes to a hardcoded structure usually trigger full regression testing, which can delay
    the release by days.
  </li>
  <li><strong>Developers:</strong></li>
  <ol>
    <li>Must hardcode layout changes in code.</li>
    <li>Have to integrate external data sources for new blocks.</li>
    <li>Need to remove unused sources when blocks are deleted.</li>
    <li>Must adapt layouts when blocks are added or removed.</li>
  </ol>
</ul>

<h3>A Timeline Problem: Negative Case</h3>
<p>
  Imagine building a small hostel booking service. You have designs, contracts, and deadlines. Right
  before the release, the client asks to swap a promo block with a “bed selector” component.
</p>
<p>It looks simple: just switch two blocks. But technical issues can appear:</p>
<ul>
  <li>The page may have been hardcoded with fixed sizes and margins.</li>
  <li>Data sources may require a specific request order.</li>
  <li>The code may be messy, and the only developer who fully understands it is on vacation.</li>
</ul>
<p>
  Another hidden issue: a hardcoded UI has no “contract” for structure or data. You only know what
  to expect after reading the code.
</p>
<p>What about adding a new page with text content?</p>
<ul>
  <li>
    You need to dive into the code and copy a typical page with its layout, essentially copy-pasting
    boilerplate code.
  </li>
  <li>
    You might need to register the page in the application router and put it behind authentication.
  </li>
  <li>You need to hook up the data source.</li>
</ul>
<p>This makes it very hard to:</p>
<ul>
  <li>Run A/B tests.</li>
  <li>Add content without developer involvement.</li>
</ul>
<p>In other words, the frontend becomes a rigid program, disconnected from any external scheme.</p>
<p>
  At its core, Backend-Driven UI is about receiving a screen schema from the backend, processing it,
  and rendering the layout. Sometimes it includes the entire site map.
</p>

<h3>Building a Good BDUI</h3>
<p>What do we need to make Backend-Driven UI convenient?</p>
<ul>
  <li>
    <p><strong>A backend contract.</strong></p>
    The format of the screen layout must be clear.
  </li>
  <li>
    <p><strong>Initial component state </strong></p>
    If needed, it should be encapsulated properly.
  </li>
  <li>
    <p><strong>Layout description level</strong></p>
    Block nesting, vertical/horizontal placement, block sizes.
  </li>
  <li>
    <p><strong>Page parameters</strong></p>
    For example, page number or filters
  </li>
</ul>

<h3>How to Implement It</h3>
<p>
  The best way is to put the layout generation logic into a separate microservice, that is a Backend
  for Frontend (BFF). Don’t bury polymorphic layout logic inside your main backend.
</p>

<h3>Who uses BDUI in the industry and how?</h3>
<p><strong>Example #1: BigTech, Ozon</strong></p>
<p>Ozon’s mobile app uses BDUI for:</p>
<ul>
  <li>A/B testing</li>
  <li>Extract business logic from Web/Android/iOS apps</li>
  <li>Delivering changes faster to users</li>
</ul>
<p>
  Here's a great article where they explain how they prepared the logic for interface formation:
  <a href="https://habr.com/ru/company/ozontech/blog/661941/">
    How Backend-Driven UI Works on Mobile Client
  </a>
</p>

<img src="/uploads/1644796391_10708cecac.png" alt="enter image description here" />
<p>
  Screenshot of the application with widget explanations on the page, screenshot from the Ozon
  article.
</p>
<p><strong>Example #2: BigTech, Alfa-Bank</strong></p>
<p>
  A good article on Habr where Alfa-Bank engineers share their experience: Evolution of
  Server-Driven UI:
  <a href="https://habr.com/ru/company/alfa/blog/668754/">
    dynamic fields, handlers and multi-step flows
  </a>
</p>
<p>
  I should note that they discuss not so much the layout aspects, but rather everything else: event
  handling, business logic in complex forms.
</p>
<img src="/uploads/1644796364_56d3f6c927.png" alt="enter image description here" />
<p>Screenshot from an article with an example of event handling.</p>
<p><strong>Example #3: BigTech, Airbnb</strong></p>
<p>
  The booking service Airbnb, no longer operating in Russia, also built its mobile app on the BDUI
  concept. They use it mainly for A/B testing. Here’s a code-rich article with their approac
  <a
    href="https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5"
  >
    A Deep Dive into Airbnb’s Server-Driven UI System
  </a>
</p>
<img src="/uploads/1644796365_14325dbba4.png" alt="enter image description here" />
<p>This is how Airbnb transforms data into a user interface (screenshot from their article).</p>
<p><strong>Example #4: No-Code, Unflow</strong></p>
<p>
  The popular no-code trend often makes its way into client applications through BDUI. For instance,
  <a href="https://github.com/unflowhq">Unflow</a> allows customization freedom and provides SDKs
  for mobile platforms.
</p>
<img src="/uploads/1644796390_d19c4778ca.png" alt="enter image description here" />
<p>Here’s what the screen editor in Unflow looks like.</p>
<p><strong>Example #5: No-Code, Strapi</strong></p>
<p>
  An interesting implementation is Strapi, a headless CMS. It provides an interface for editing
  content but doesn’t generate the site or the final display. For example, you can create a “page
  layout” entity and add blocks to it. However, this approach is inconvenient and doesn’t allow
  seamless integration with other data sources.
</p>
<img src="/uploads/1644796387_5342ec13ae.png" alt="enter image description here" />
<p>Strapi Admin Panel</p>
<p><strong>Example #6: Implementing the Concept in CS-Cart CMS</strong></p>
<p>
  Another implementation is the so-called Block Manager. Essentially, it’s a simplified visual page
  layout editor. It lets you build or rebuild a page without writing any code at all. The
  block/widget settings are a whole universe of their own.
</p>
<img src="/uploads/1644796360_9f4491f533.png" alt="enter image description here" />
<p>Page Layout Editor</p>

<h3>Conclusions</h3>
<p>
  Backend/Server-Driven UI is still a niche concept. Building a full interface with this approach is
  expensive, but it works well for two cases:
</p>
<ul>
  <li>
    <strong> Large enterprises </strong>
    need to test hypotheses, deliver features and fixes quickly, avoid drowning in duplicated logic
    across multiple client applications.
  </li>
  <li>
    <strong>Small businesses </strong>
    don’t have the resources to build custom solutions. Instead, they use no-code platforms — which
    are often based on BDUI — assemble screens, connect an open-source client to their instance on
    the platform, and everything just works.
  </li>
</ul>
<p>
  Used wisely, BDUI is powerful. Applying it to the right parts of a system (like complex forms) is
  the right choice. The more business logic you keep on the server and the less on the client, the
  more stable your app will be.
</p>


Convincing the Team Lead: The Power of Server-Driven UI

Гончаров Андрей

выбор пользователя2.png

Research, data analysis, processing results, and integrating insights into workflows — all of it can turn into a waste of time and money if you start with the wrong respondents. So how do you make the right choice? Who should you talk to, when, and how do you build rapport? Let’s figure it out together with Mish’s research experts.

<img src="/uploads/1_e77eee4493.webp" />

<h3>1. The Perfect Respondent Profile</h3>
<p>
  Looking for “someone” in general is hard. It gets much easier once you know exactly who you need.
  At the very beginning of your research, create a profile of your ideal respondent. Define the
  factors that will guide your search, put them into a clear list, and make sure everyone involved
  has access to it. At Mish, when selecting respondents, we focus on:
</p>
<ul>
  <li>Product usage</li>
  <li>Gender balance</li>
  <li>Age range</li>
  <li>Geographic location</li>
</ul>
<p>
  When a company’s target audience is broad, we make sure every segment is represented in our
  research sample.
</p>

<img src="/uploads/2_e0a551c83b.webp" />

<h3>2. Quantity Matters</h3>
<p>
  The more respondents you find, the more data you’ll get — but… time and budget still come first.
  For qualitative studies, it’s better to keep each interview under an hour. After that, attention
  drops, fatigue kicks in, and the data quality suffers. We also limit the number of questions per
  interview — and with each new participant, that list gets shorter, because much of the information
  starts repeating.
</p>

<img src="/uploads/3_7ffc0fd580.webp" />

<h3>3. Rewards Are Essential</h3>
<p>
  A respondent’s time and opinion are their main assets — and you’re essentially buying them. In
  most cases, financial or material incentives are what guarantee participation. We pay for the
  knowledge and experience we don’t have. That doesn’t always mean cash. It could be points,
  coupons, or discounts. Sometimes people agree to an interview for free, if they’re genuinely
  interested in influencing the product. Ideally, your sample should include both types of
  respondents.
</p>

<img src="/uploads/4_f17cc8f53e.webp" />

<h3>4. Where to Find Them</h3>
<p>
  Don’t limit yourself to the obvious channels. Sure, social media and job platforms like LinkedIn
  or HeadHunter are classics — but unconventional methods can bring unexpected insights. For
  example, you can use local marketplaces like Avito to find people interested in specific products
  in specific regions. Finding respondents is a structured, logical process — it takes time, but it
  always pays off.
</p>

<img src="/uploads/5_df1b077038.webp" />

<h3>5. Trust, but Sometimes Verify</h3>
<p>
  Sometimes, it’s worth double-checking the information you get from respondents. If the research
  doesn’t rely on specific skills or expertise, you can skip verification. But if it does — assess
  those skills first. Here’s how we handle it at Mish:
</p>
<ul>
  <li>
    Test: a short set of questions on the research topic (Google Form, separate file, or a quick
    message in chat).
  </li>
  <li>Intro call: the first voice contact and confirmation of the upcoming interview.</li>
  <li>Interview: the actual conversation on the research topic.</li>
</ul>

<img src="/uploads/6_6e1516bfc8.webp" />

<h3>6. Not All Respondents Are Equal</h3>
<p>
  Even if someone perfectly matches your ideal profile, if they feel uncomfortable during the
  interview, your data will lose value. So first, make sure the interview time works for everyone.
  Before the call, build a little rapport — make the person feel at ease. If during the session your
  respondent reacts with aggression or total indifference, don’t be surprised if the data turns out
  useless.
</p>

<img src="/uploads/7_7c257d6451.webp" />

<h3>7. One Respondent — One Research Direction</h3>
<p>
  No matter how universal your respondent seems, don’t reuse the same person across multiple
  studies. It leads to biased, repetitive data and narrows your perspective. That said, keep their
  contact info, you might want to reach out again later once the problem you discussed has evolved.
</p>

<img src="/uploads/8_08eae798b9.webp" />

<p>
  Hopefully, this “golden seven” gave you something to think about. Follow these tips, and your
  research will deliver valuable insights that help your product and your company grow.
</p>


How to Choose the Right Respondent for Digital Research

баги конь.png

Hi, my name is Vladimir Serov, and I'm a QA engineer at Mish. I'm sharing with you the testing principles that we use in our work.

<h3>1. Testing shows the presence of defects, not their absence.</h3>
<p>
  Testing can reveal errors, but it can never prove that a system is completely free of them. No
  matter how many tests pass, there may always be a case that exposes a hidden defect.
</p>

<h3>2. Exhaustive testing is impossible..</h3>
<p>
  No matter how thorough testing may be, it's impossible to account for all possible scenarios,
  which means we cannot anticipate all possible errors.
</p>

<h3>3. The absence-of-errors fallacy.</h3>
<p>
  Finding many bugs — or even reaching a point where no new bugs appear — doesn’t mean the product
  is flawless or ready for release. The truth is simple: no software is entirely free of defects.
</p>

<h3>4. Early testing saves time and money.</h3>
<p>
  Defects get more expensive to fix the later they’re found in the development cycle. Identifying
  issues early makes them faster, easier, and cheaper to resolve.
</p>

<h3>5. Defect clustering.</h3>
<p>
  In most systems, a small number of modules contain the majority of bugs. This follows the Pareto
  principle: 20% of modules can hold 80% of the defects.
</p>

<h3>6. Testing depends on context.</h3>
<p>
  The right methods, techniques, and types of testing depend on the nature of the system. For
  example, testing medical software requires stricter checks than testing a game.
</p>

<h3>7. The pesticide paradox.</h3>
<p>
  If you run the same tests over and over, their effectiveness decreases — just like pests develop
  resistance to a pesticide. To keep finding new defects, tests need to be reviewed and updated
  regularly.
</p>


7 Principles for Effective Testing

Серов Владимир

large_site (3).png

medium_site (3).png

small_site (3).png

thumbnail_site (3).png

site (3).png

Это новое пространство для вашего творчества: здесь лучшие ИИ-модели на одном холсте. Сочетайте разные нейросети, чтобы генерировать реалистичные изображения и 3D-иллюстрации, создавать персонажей и сложные композиции, стилизовать и оживлять статику. В общем, дайте волю фантазии.

Так что мы больше не страдаем и вам не советуем. Потестить платформу можно бесплатно. А если когда станет ясно, что вам всё нравится — выбирайте тариф под свои задачи, индивидуальные или командные.

Strophe - новое пространство для ИИ-творчества

large_site.png

medium_site.png

small_site.png

thumbnail_site.png

site.png

Мы тут молодцы вообще-то)

Проект, в который мы вложили космическое количество любви, экспериментов и нейромагии, получил своё заслуженное место на пьедестале. «Нейроастро» взял бронзу на фестивале нового дизайна «СРЕДА».

Если вы не видели этот кейс, сходите на сайт, посмотрите. Ну и поздравьте, конечно, это всегда очень приятно. 

«Нейроастро» взял бронзу на фестивале нового дизайна «СРЕДА»

large_site (2).png

medium_site (2).png

small_site (2).png

thumbnail_site (2).png

site (2).png

Мы с АНО «Горький Тех» заключили соглашение о получении возмещения затрат на оплату труда ИТ-специалистов, привлеченных из других субъектов Российской Федерации и иностранных государств. 

Mish и «Горький Тех» 

large_Group 10.png

medium_Group 10.png

small_Group 10.png

thumbnail_Group 10.png

Group 10.png

В гостях хорошо 🙂

Неделю гостили у Ozon Design, теперь дома — и делимся, что там устроили.

1) Миша Пименова, СЕО — как сделать так, чтобы твоя творческая команда не послала тебя туда, куда сами знаете. (https://t.me/ozondesign/4972)
2) Денис Каменков, Creative Game Producer — зачем бизнесу эта ваша геймификация и как ее запустить.
3 (https://t.me/ozondesign/4983)) Сергей Макаров, дизайн-директор продуктового юнита — из личного опыта: как проектировать проекты для госсектора. (https://t.me/ozondesign/4984)
4) Глеб Неижко, арт-директор 3D-направления — как мы организовали безотходный продакшн и перестали тратить рендеры зря. (https://t.me/ozondesign/4991)

Читайте, лайкайте, комментируйте — всё, что вы так любите.

Визит команды Mish в Ozon Design

large_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

medium_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

small_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

thumbnail_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

Сегодня наш СТО Алексей Авдеев — ведущий FrontendConf. Смотрите, что там, как там в реальном времени 😎

Алексей Авдеев ведущий FrontendConf

large_Group 9.png

medium_Group 9.png

small_Group 9.png

thumbnail_Group 9.png

Group 9.png

Как не поехать кукухой, если ты дизайнер? 😐 Мы точно не знаем, но у нашего дизайн-директора Артёма
Кожевникова есть какая-то тактика, и он её придерживается. Своим опытом и советами он поделился в
подкасте Ozon Design. Говорили о креативе и выгорании, о том, где заканчивается искусство и
начинается интерфейс. И, внезапно, о том, почему стоит съездить в Нижний Новгород.


Артём Кожевников в подкасте Ozon Design

large_photo_2025-10-22_11-20-43.jpg

medium_photo_2025-10-22_11-20-43.jpg

small_photo_2025-10-22_11-20-43.jpg

thumbnail_photo_2025-10-22_11-20-43.jpg

photo_2025-10-22_11-20-43.jpg

Забота с нейронками повышает продуктивность — говорили они. Скоро некоторые профессии не будут
нужны, а ИИ будет работать за нас — утверждали эти оптимисты. Но в реальности работа с внедрением ИИ
легче не стала, просто раньше приходилось исправлять свои косяки, а теперь — править за нейронкой.
Верх продуктивности. Или нет? Миша на конфе Сбера рассказала, как грамотно выбирать подходящие
нейронки. Показала, что и для чего используем в работе мы, каких результатов и провалов удалось
добиться. Мы вам запись принесли.


Миша Пименова на конференции Сбера

large_photo_2024-11-29_14-55-22.jpg

medium_photo_2024-11-29_14-55-22.jpg

small_photo_2024-11-29_14-55-22.jpg

thumbnail_photo_2024-11-29_14-55-22.jpg

photo_2024-11-29_14-55-22.jpg

Mish Let's Play — все! 

Спасибо, что были с нами эти три дня. 30000 уникальных зрителей — это сильно.

Потратьте 3 минутки на опрос по впечатлениям от мероприятия. И ставьте реакции, если хотите второй сезон. Будем знать, куда развиваться и двигаться

Провели мероприятие на 30000 зрителей

medium_photo_2024-12-19_16-21-56.jpg

small_photo_2024-12-19_16-21-56.jpg

thumbnail_photo_2024-12-19_16-21-56.jpg

photo_2024-12-19_16-21-56.jpg

Золото:
Вертикаль  — лучший сайт некоммерческий или благотворительной организации
Вертикаль — развлекательный ресурс, медиапортал
Начни игру — инклюзивный дизайн сайта
Бронза:
ОТР  — сайт СМИ
ОТР  — развлекательный ресурс, медиапортал
Вертикаль  — лучший сайт созданный на конструкторах/платформах
PanClub  — сайт магазина розничной торговли 
Вместе с друзьями из Globus IT  взяли бронзу с сайтом GP Days, полюбуемся дипломом на полочке у глобуса

Поставили на полочку семь дипломов «Золотого сайта» 

large_IMG_5283.PNG

medium_IMG_5283.PNG

small_IMG_5283.PNG

thumbnail_IMG_5283.PNG

IMG_5283.PNG

Так мы согласовывали дизайн для «Цифрового диктанта». Оформление их подкаста «Digital Утро» — тоже наша работа. А в гостях нового выпуска побывал наш дизайн-директор коммуникационного направления, Артем Кожевников. Он рассказал о связи графического дизайна и digital-грамотности. А еще ответил на вопрос, выходить ли замуж за дизайнера — девочки, это нам надо!

Blog

hello@mish.design

Moscow

Nizhny Novgorod