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

Крестов Иван

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

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

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

medium_Бажанов сайт.png

small_Бажанов сайт.png

thumbnail_Бажанов сайт.png

Бажанов сайт.png

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Бажанов Максим

Product Design

UI/UX

Product Analytics

Product Audit

medium_Lisunova_sajt_7e20fe8848.png

small_Lisunova_sajt_7e20fe8848.png

thumbnail_Lisunova_sajt_7e20fe8848.png

Lisunova_sajt_7e20fe8848.png

Лисунова Карина

Website

Dashboard

small_Makarov_sajt_2464aa949f.png

thumbnail_Makarov_sajt_2464aa949f.png

Makarov_sajt_2464aa949f.png

Макаров Сергей

Product Management

Product Support

medium_Nikitina_sajt_e014295862.png

small_Nikitina_sajt_e014295862.png

thumbnail_Nikitina_sajt_e014295862.png

Nikitina_sajt_e014295862.png

Трушникова Ирина

medium_Savriko_sajt_foto_c45f3dbb2d.png

small_Savriko_sajt_foto_c45f3dbb2d.png

thumbnail_Savriko_sajt_foto_c45f3dbb2d.png

Savriko_sajt_foto_c45f3dbb2d.png

Воронова Мария

small_Krestov_sajt_f656ac90f2.jpeg

thumbnail_Krestov_sajt_f656ac90f2.jpeg

Krestov_sajt_f656ac90f2.jpeg

medium_Mazaev_sajt_a506cef75f.jpg

small_Mazaev_sajt_a506cef75f.jpg

thumbnail_Mazaev_sajt_a506cef75f.jpg

Mazaev_sajt_a506cef75f.jpg

Мазаев Денис

No-code

small_2023_04_03_16_09_56_627d7dc2b6.jpg

thumbnail_2023_04_03_16_09_56_627d7dc2b6.jpg

2023_04_03_16_09_56_627d7dc2b6.jpg

Management

Business Needs

medium_Bogdan_sajt_bfca441c4c.png

small_Bogdan_sajt_bfca441c4c.png

thumbnail_Bogdan_sajt_bfca441c4c.png

Bogdan_sajt_bfca441c4c.png

Гончаренко Богдан

Project Management

large_Kris_sajt_5517380b06.jpeg

medium_Kris_sajt_5517380b06.jpeg

small_Kris_sajt_5517380b06.jpeg

thumbnail_Kris_sajt_5517380b06.jpeg

Kris_sajt_5517380b06.jpeg

Толстых Кристина

large_Vevericza_sajt_65d68d90b6.jpg

medium_Vevericza_sajt_65d68d90b6.jpg

small_Vevericza_sajt_65d68d90b6.jpg

thumbnail_Vevericza_sajt_65d68d90b6.jpg

Vevericza_sajt_65d68d90b6.jpg

Веверица Карина

Fintech

Usability Testing

medium_Olehn_sajt_d927031442.png

small_Olehn_sajt_d927031442.png

thumbnail_Olehn_sajt_d927031442.png

Olehn_sajt_d927031442.png

Олехнович Артем

Interfaces 

Зеленцов Константин

Graphic Design

Дронова Любовь

Дудин Дмитрий

Хамзин Эдуард

Сычева Софья

Цаголов Владимир

Левчук Дарья

Колнобрицкая Анна

small_photo_2021_02_02_22_52_32_ecf9303ab0.jpg

thumbnail_photo_2021_02_02_22_52_32_ecf9303ab0.jpg

photo_2021_02_02_22_52_32_ecf9303ab0.jpg

Цветнов Виктор

small_photo_2023_08_19_22_40_34_9baac96fe6.jpg

thumbnail_photo_2023_08_19_22_40_34_9baac96fe6.jpg

photo_2023_08_19_22_40_34_9baac96fe6.jpg

Чернояров Никита

small_photo_2024-02-13_18-43-34 (2).jpg

thumbnail_photo_2024-02-13_18-43-34 (2).jpg

photo_2024-02-13_18-43-34 (2).jpg

Иванов Алексей

large_IMG_2627_6e73a52f84.JPG

medium_IMG_2627_6e73a52f84.JPG

small_IMG_2627_6e73a52f84.JPG

thumbnail_IMG_2627_6e73a52f84.JPG

IMG_2627_6e73a52f84.JPG

Ионин Максим 

Web Design

medium_photo_2024-02-13_18-43-36 (2).jpg

small_photo_2024-02-13_18-43-36 (2).jpg

thumbnail_photo_2024-02-13_18-43-36 (2).jpg

photo_2024-02-13_18-43-36 (2).jpg

Титов Денис 

╨Ю╨▒╨╗╨╛╨╢╨║╨░-2.webp

Created a turnkey vibrant portal for the Youth Policy Department of the Voronezh Region. It is for active young people to find current events, participate in competitions and festivals, learn new things about the city and its life. At first look, you’d hardly say this is administrative.

<div>
<h3>Запрос: технологичный дизайн для астроприложения</h3>
<p>К&nbsp;нам обратился клиент NeuroAstro с&nbsp;запросом&nbsp;&mdash; сделать дизайн приложения со&nbsp;всеми популярными эзотерическими практиками и&nbsp;усиленным ИИ-помощником. Начать решили с&nbsp;MVP&nbsp;&mdash; сонника с&nbsp;нейротрактовками сновидений. У&nbsp;клиента&nbsp;уже&nbsp;был&nbsp;разработан собственный алгоритм на&nbsp;основе нейросети, который учитывал и&nbsp;комплексно анализировал информацию для составления максимально точных и&nbsp;персонализированных прогнозов. Пользователю было достаточно просто описать свой сон в&nbsp;чате, а&nbsp;ИИ проводил анализ и&nbsp;объяснял сновидения.</p>
</div>

<img src="/uploads/T_G_1_df72a038b3.png"> 

<div>
<h3>Передаём ДНК бренда через дизайн</h3>
<p>Нам было важно показать, что в&nbsp;руках пользователя не&nbsp;просто астрологический инструмент, а&nbsp;в&nbsp;первую очередь технологический продукт, и&nbsp;таким образом задать весь имидж бренда.
В&nbsp;визуальном&nbsp;языке&nbsp;нам&nbsp;хотелось совсем уйти от&nbsp;привычных паттернов магической тематики: никаких свечей, волшебных палочек и&nbsp;мантий. 
При&nbsp;этом сохранили стиль и&nbsp;концепцию, которая мэтчится с&nbsp;нейросетевыми моделями.</p>
</div>

<img src="/uploads/T_G_2_67b58e275d.webp"> 

<div>
<h3>Переход к расширенной версии приложения</h3>
<p>После релиза сонника мы продолжили работу над&nbsp;расширенной версией приложения, в которой пользователям будут доступны все популярные эзотерические практики: таро, натальные карты, гороскопы, личный календарь благоприятных и&nbsp;неблагоприятных дней, а также консультации астрологов/тарологов. Чтобы&nbsp;совместить&nbsp;все&nbsp;инструменты в одном сервисе и&nbsp;сделать их доступными, мы занялись разработкой всей логики и навигации внутри приложения.</p>
</div>

<img src="/uploads/T_G_5_2af81aa265.webp"> 

<div>
<h3>Главная цель&nbsp;&mdash; удобство пользователя</h3>
<p>Поэтому мы&nbsp;сделали так, чтобы уже начиная с&nbsp;главного экрана он&nbsp;мог кастомизировать приложение под себя. Для начала: озвучить свой основной запрос&nbsp;&mdash; а&nbsp;если он&nbsp;еще не&nbsp;сформулирован, то&nbsp;пройти короткое интервью от&nbsp;нейросети. Визуал&nbsp;главного&nbsp;экрана тут&nbsp;же адаптируется под&nbsp;основные для пользователя темы. Для этого мы&nbsp;сделали отзывчивую и&nbsp;динамичную анимацию, которая может меняться вместе с&nbsp;запросами. Таким&nbsp;образом,&nbsp;пользователю не&nbsp;нужно листать километры меню&nbsp;&mdash; необходимые для решения его&nbsp;вопроса инструменты сами выносятся на&nbsp;главный экран.</p>
</div>

<video
src="/uploads/prognosis_295223ffec.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Как работает кастомизация?</h3>
<p>На&nbsp;основе ответов приложение предлагает решения из&nbsp;разных сервисов. Пользователь может выбрать, к&nbsp;какой именно практике обратиться: натальной карте, картам Таро или гороскопу, или запросить консультацию у&nbsp;астролога-человека в&nbsp;отдельном чате.</p>
</div>

<img src="/uploads/T_G_4_3a1c5c99ab.webp">

<div>
<h3>Результат</h3>
<p>Нам удалось создать современное решение, которое объединяет консервативные астрологические практики с&nbsp;цифровыми технологиями, отстраивая имидж бренда.</p>
</div>

<video
src="/uploads/Astro_f6ce2a0d11.webm"
loop
autoplay
muted
playsinline></video>

Product Design

hello@mish.design

Moscow

Nizhny Novgorod