16_9.jpg

Расскажем, как мы провели оптимизацию и ускорили работу больших файлов Figma в три раза. Подтолкнули нас к этому тормозящие и не открывающиеся файлы у команды на проекте. Особенно это ощутили ребята с не самым мощным железом: файлы загружались по пять-десять минут.

<h3>Расскажем, как мы&nbsp;провели оптимизацию и&nbsp;ускорили работу больших файлов Figma в&nbsp;три раза. Подтолкнули нас к&nbsp;этому тормозящие и&nbsp;не&nbsp;открывающиеся файлы у&nbsp;команды на&nbsp;проекте. Особенно это ощутили ребята с&nbsp;не&nbsp;самым мощным железом: файлы загружались по&nbsp;пять-десять минут.</h3>
<p>В&nbsp;процессе поиска решения мы&nbsp;столкнулись с&nbsp;некоторыми ограничениями и&nbsp;багами в&nbsp;Figma, о&nbsp;которых полезно знать заранее и&nbsp;которые мы&nbsp;подробно изложим ниже.</p>
<p>Статья поможет избежать фундаментальных ошибок при разработке дизайн-систем. Материал будет особенно полезен дизайнерам, разработчикам и&nbsp;бизнесу, которые работают над проектами, где свыше пятисот макетов в&nbsp;дизайне.</p>
<p>Мы&nbsp;студия Mish, преимущественно сфокусированы на&nbsp;дизайне сайтов и&nbsp;мобильных приложений. За&nbsp;время работы мы&nbsp;много сталкивались с&nbsp;крупными проектами, в&nbsp;частности, в&nbsp;банковской сфере. В&nbsp;рассматриваемом случае клиент поставил нам задачу разработать дизайн двух мобильных приложений для SBI: банкинг &laquo;для взрослых&raquo; и&nbsp;отдельное банковское приложение &laquo;для детей&raquo;, в&nbsp;котором есть полноценный счет, можно выполнять задания родителей, получать награды и&nbsp;копить на&nbsp;мечты. Разработка приложений осуществлялась для двух платформ.</p>
<p>Через полгода работы только во&nbsp;&laquo;взрослом&raquo; приложении появилось свыше шести сотен экранов для каждой платформы. Тогда мы&nbsp;столкнулись с&nbsp;проблемой: люди, задействованные на&nbsp;проекте,&nbsp;&mdash; разработчики, аналитики, тестировщики, заметили, что файлы Figma стали работать медленнее. А&nbsp;именно: долго открывались, тормозили при зуме и&nbsp;порой даже вылетали. Даже дизайнеры, работающие на&nbsp;MacBook Pro, испытывали трудности. Например, десять фреймов могли копироваться около минуты: к&nbsp;примеру, выделил&nbsp;их, нажал ⌘+C и&nbsp;ждешь&nbsp;&mdash; Figma все это время не&nbsp;двигается. Потом, если не&nbsp;повезет, выскакивало сообщение &laquo;You run out of&nbsp;memory&raquo;. После этого приходилось перезапускать Figma и&nbsp;копировать фреймы по&nbsp;одному.</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>Поискав информацию в&nbsp;Интернете и&nbsp;на&nbsp;сайте Figma, мы&nbsp;нашли причину и&nbsp;поняли, как решить проблему. <a href="https://help.figma.com/hc/en-us/articles/360040528173">Статья, которая нам помогла.</a></p>
</blockquote>
<p><strong>Две основные причины тормозов:</strong></p>
<ul>
 <li>В&nbsp;одном файле расположено слишком много макетов.</li>
 <li>Основные мастер-компоненты собраны с&nbsp;большим количеством скрытых слоев.</li>
</ul>
<p>И&nbsp;то, и&nbsp;другое существенно снижало основные жизненные показатели файла: занимаемую память и&nbsp;общее количество слоев. Расскажем подробнее о&nbsp;каждом пункте.</p>
<p><img src="/uploads/stat_Figma_6c131a2528.jpg" alt="enter image description here"></p>


<h3>Причина&nbsp;1. В&nbsp;одном файле расположено слишком много макетов</h3>
<p><strong>Дизайн &laquo;взрослого&raquo; приложения состоит из&nbsp;трех файлов:</strong></p>
<ul>
<li>Файл с&nbsp;макетами и&nbsp;компонентами iOS.</li>
<li>Файл с&nbsp;макетами и&nbsp;компонентами Android.</li>
<li>Файл с&nbsp;компонентами общих для платформ иконок и&nbsp;графики.</li>
    </ul>
<p>Есть еще два файла с&nbsp;&laquo;детским&raquo; приложением, но&nbsp;мы&nbsp;не&nbsp;стали их&nbsp;оптимизировать, так как эти файлы работают быстро: в&nbsp;них меньше пяти сотен макетов.</p>
<p><img src="/uploads/arrow_Figma_f23a51acaf.jpg" alt="enter image description here"></p>
<p>Мастер-компоненты мы&nbsp;хранили в&nbsp;одном файле с&nbsp;макетами. На&nbsp;момент старта проекта это не&nbsp;казалось нам чем-то неправильным. Это достаточно удобно, так как не&nbsp;нужно переходить в&nbsp;другой файл, чтобы сдвинуть иконку на&nbsp;два пикселя. Мы&nbsp;думали, что при необходимости можно легко поделить этот файл на&nbsp;несколько: мастер-компоненты оставить в&nbsp;одном файле, а&nbsp;макеты с&nbsp;дочерними компонентами вынести в&nbsp;отдельный.</p>
<p>Но&nbsp;на&nbsp;тот момент мы&nbsp;не&nbsp;подозревали об&nbsp;одной фундаментальной баге программы Figma, о&nbsp;которой напишем чуть позже. А&nbsp;пока расскажем о&nbsp;двух известных нам способах, которыми можно поделить один большой файл на&nbsp;несколько маленьких.</p>


<h4>Способ №1</h4>
<p>Продублировать файл нужное количество раз и&nbsp;в&nbsp;каждом дубликате удалить лишние макеты или страницы.</p>
<p><img src="/uploads/tablet_Figma_00c6d3ce66.jpg" alt="enter image description here"></p>
<p>Нам это способ не&nbsp;подходил, потому что мастер-компоненты хранились в&nbsp;одном файле с&nbsp;макетами и&nbsp;при дублировании потеряли&nbsp;бы связь с&nbsp;дочерними компонентами в&nbsp;новых файлах.</p>


<h4>Способ №2</h4>
<p>Создать несколько новых файлов, подключить к&nbsp;ним командную библиотеку и&nbsp;скопировать в&nbsp;них нужные макеты из&nbsp;исходного файла. В&nbsp;исходном&nbsp;же оставить только мастер-компоненты, так как&nbsp;их, в&nbsp;отличие от&nbsp;дочерних, перенести в&nbsp;другой файл нельзя&nbsp;&mdash; это печальное ограничение Figma, о&nbsp;котором мы&nbsp;знали.</p>
<p><img src="/uploads/arrow2_Figma_8df4ce0640.jpg" alt="enter image description here"></p>
<p>Данный способ выглядит вполне жизнеспособным. Во&nbsp;всяком случае, не&nbsp;противоречит каким-либо очевидным правилам поведения программы.</p>
<p>Но&nbsp;мы&nbsp;не&nbsp;знали о&nbsp;том, что в&nbsp;Figma есть серьезная скрытая проблема: при переносе макета в&nbsp;новый файл многие дочерние компоненты, находящиеся в&nbsp;нем, теряют связь с&nbsp;мастер-компонентом, т.е. часть скопированных дочерних компонентов при вставке превращается в&nbsp;обычные фреймы. Это та&nbsp;самая фундаментальная бага, о&nbsp;которой ребята из&nbsp;Figma в&nbsp;курсе и&nbsp;с&nbsp;которой они воюют уже года два. <a href="https://spectrum.chat/figma/help/components-turning-into-frames~f758bd95-2a65-4c83-a1cd-d4838b40440e">Подробнее о проблеме</a>.</p>
<p>Подобные баги могут происходить даже при копировании и&nbsp;вставке макета внутри одного файла, если делать это через &laquo;<strong>⌘</strong>+C &rarr; <strong>⌘</strong>+V&raquo; или &laquo;Копировать &rarr; Вставить&raquo;. Нам показалось, что часто это происходит на&nbsp;сложных компонентах, а&nbsp;также если компонент уже копировался и&nbsp;вставлялся неоднократно.</p>
<p>Чтобы избежать этого бага, нужно сложные многосоставные компоненты копировать через зажатый Opt или Alt.</p>
<p>Быстро поделить файл на&nbsp;несколько и&nbsp;избавиться от&nbsp;первой причины тормозов у&nbsp;нас не&nbsp;получилось, поэтому переходим ко&nbsp;второй причине.</p>


 <h3>Причина&nbsp;2. Основные компоненты собраны с&nbsp;большим количеством скрытых слоев</h3>
 <p>Есть такие элементы, которые используются почти на&nbsp;каждом макете и&nbsp;отличаются лишь деталями. Например, списки. Список может быть с&nbsp;иконкой или без, с&nbsp;одним заголовком или с&nbsp;заголовком и&nbsp;подстрочником, с&nbsp;суммой и&nbsp;подстрочником или с&nbsp;суммой без подстрочника, с&nbsp;кнопкой вместо суммы или стрелкой вместо кнопки.</p>
<p>Не&nbsp;забываем еще про состояние загрузки, а&nbsp;также все те&nbsp;же самые состояния на&nbsp;темном фоне. Выходит, что высота элемента одна, набор основных элементов примерно тот&nbsp;же, но&nbsp;их&nbsp;комбинация и&nbsp;расположение отличаются.</p>
<p><img src="/uploads/tablet2_Figma_2f24b265c7.jpg" alt="enter image description here"></p>
<p>К&nbsp;примеру, вариаций блока списка высотой 64px в&nbsp;нашем приложении получилось свыше тридцати. Плюс в&nbsp;каждом состоянии может быть еще около ста разных иконок на&nbsp;обложке.</p>
<p>Когда мы&nbsp;создавали первые компоненты на&nbsp;проекте, мы&nbsp;обсуждали два варианта создания дизайн-системы, учитывающих все подобные состояния.</p>


<h4>Способ №1</h4>
<p><strong>Создать один компонент и&nbsp;расположить в&nbsp;нем все состояния в&nbsp;виде скрытых слоев.</strong></p>
<p>Мы&nbsp;так и&nbsp;сделали. В&nbsp;тот момент нам казалось, что это достаточно удобно: не&nbsp;нужно плодить кучу макетов в&nbsp;библиотеке, а&nbsp;переключать состояния проще в&nbsp;панели слоев, выключая видимость текущего слоя и&nbsp;включая видимость нужного.</p>
<p>Главное понятно называть слои и&nbsp;группы слоев. Первое время это действительно казалось удобным всем дизайнерам.</p>
<p>Но&nbsp;оказалось, что в&nbsp;Figma дочерний компонент является не&nbsp;просто ссылкой на&nbsp;мастер-компонент, а&nbsp;полноценным его экземпляром, занимает столько&nbsp;же памяти и&nbsp;тянет за&nbsp;собой все скрытые слои. Получилось, что один экземпляр элемента &laquo;тащил&raquo; за&nbsp;собой все тридцать скрытых и&nbsp;увеличивал размер файла.</p>


<h4>Способ №2</h4>
<p><strong>Создать отдельный мастер-компонент под каждый случай.</strong></p>
<p>При этом стоит учитывать только вариации верстки: если при одной и&nbsp;той&nbsp;же верстке есть еще пятьдесят состояний, в&nbsp;которых отличается только иконка, то&nbsp;эта иконка вставляется в&nbsp;виде вложенного компонента по&nbsp;принципу матрешки.</p>
<p>Замена иконки занимает пару кликов в&nbsp;панели компонентов. По&nbsp;такому&nbsp;же принципу можно подменять любые другие блоки, например вкл/выкл свитчер, активный/неактивный чекбокс, радио-кнопка и&nbsp;проч.</p>
<p><img src="/uploads/111_73406d3a50_217e45fbe5.gif" alt="enter image description here"></p>
<p>Изначально мы&nbsp;пошли по&nbsp;первому варианту&nbsp;&mdash; сделали &laquo;супер-компоненты&raquo;, внутри которых учитывались все возможные состояния в&nbsp;виде скрытых слоев. Это привело к&nbsp;увеличению количества слоев и&nbsp;размера файла. Лучшим решением оказался второй вариант, при котором для каждого состояния элемента создается отдельный компонент.</p>
<p>Далее мы&nbsp;решили оптимизировать проект: вынести мастер-компоненты в&nbsp;отдельный от&nbsp;макетов файл и&nbsp;оптимизировать их&nbsp;структуру&nbsp;&mdash; убрать лишние слои, а&nbsp;все состояния сделать отдельными компонентами. Это должно было решить несколько проблем: общий вес проекта сократился&nbsp;бы, и&nbsp;мы&nbsp;получили&nbsp;бы систему файлов, с&nbsp;помощью которой было&nbsp;бы удобно в&nbsp;будущем их&nbsp;делить.</p>
<p>При этом решили не&nbsp;переделывать существующие компоненты, а&nbsp;сделать все с&nbsp;нуля и&nbsp;последовательно, экран за&nbsp;экраном, целиком обновить проект. Помимо решения основной задачи мы&nbsp;также могли почистить макеты от&nbsp;ненужных слоев и&nbsp;артефактов.</p>
 
 
<h3>Процесс работы</h3>
<p>Работали на&nbsp;&laquo;живом&raquo; проекте, на&nbsp;котором параллельно присутствовали разработчики, аналитики, тестировщики и&nbsp;представители заказчика. Задачей занимался один дизайнер, параллельно разрабатывая новые фичи и&nbsp;занимаясь поддержкой разработки.</p>
<p>На&nbsp;переработку двух платформ ушло около месяца. Мы&nbsp;вели лог основных показателей файла и&nbsp;скринили табличку используемых Figma ресурсов (View &gt; Resource use) при закрытии каждого раздела. Итак, что получилось?</p>

Оптимизация проекта Figma на примере банковского приложения

article_components copy.jpg

В предыдущей статье мы рассказали о нашем опыте оптимизации проекта Figma на примере большого банковского приложения: файл начал сильно тормозить, и мы со временем пришли к пониманию, как решить эту проблему.


<p><strong><a href="/projectview?type=blogs&id=3">В&nbsp;предыдущей статье</a> мы&nbsp;рассказали о&nbsp;нашем опыте оптимизации проекта Figma на&nbsp;примере большого банковского приложения: файл начал сильно тормозить, и&nbsp;мы&nbsp;со&nbsp;временем пришли к&nbsp;пониманию, как решить эту проблему.</strong></p>
 
<p>В&nbsp;данной&nbsp;же статье уделим внимание тому, как мы&nbsp;организовали библиотеку компонентов по&nbsp;итогам оптимизации: поговорим о&nbsp;структуре, о&nbsp;логике названий, а&nbsp;также об&nbsp;особенностях расположения элементов.</p><p>Мы, дизайн-студия Mish, продолжительное время занимались дизайном двух мобильных приложений для SBI банка: классического банкинга для взрослых и&nbsp;отдельного банковского приложения для детей.</p>
<p>Через полгода работы файлы проекта начали сильно тормозить, поэтому мы&nbsp;взялись за&nbsp;капитальную оптимизацию. Решили организовать библиотеку так, чтобы сложные компоненты состояли из&nbsp;простых, где при этом уровней вложенности компонентов может быть несколько: самые маленькие составляющие&nbsp;&mdash; иконки, шрифты, геометрические фигуры; самые большие&nbsp;&mdash; списки, карточки, экраны.</p>
<img src="/uploads/Component_structure_a9fdecec39_67873e680d.jpeg" alt="Component structure">


<h3>Строение компонента</h3>
  
<p>Покажем, из&nbsp;чего состоит компонент, на&nbsp;примере строки списка высотой 64px, одного из&nbsp;самых распространенных элементов в&nbsp;проекте.</p>
<p>Вариаций верстки такого блока списка получилось свыше тридцати: с&nbsp;иконкой и&nbsp;без, с&nbsp;одним заголовком и&nbsp;с&nbsp;заголовком и&nbsp;подстрочником, с&nbsp;суммой и&nbsp;подстрочником и&nbsp;с&nbsp;суммой без подстрочника, с&nbsp;кнопкой вместо суммы и&nbsp;со&nbsp;стрелкой вместо кнопки. Плюс для каждой вариации есть состояния загрузки и&nbsp;состояния на&nbsp;темном фоне. Все эти вариации мы&nbsp;выделили отдельными компонентами. Почему так, мы&nbsp;описали&nbsp;в <a href="https://vc.ru/design/120754-optimizaciya-proekta-figma-na-primere-bolshogo-bankovskogo-prilozheniya">предыдущей статье</a>.</p>
<img src="/uploads/Typical_List_Component_8bfee335ef_cff3fba4cd.jpeg" alt="Typical list component">
<p>Типовой компонент списка состоит из&nbsp;фона, текста, суммы и&nbsp;нескольких вложенных компонентов. Последние, в&nbsp;свою очередь, содержат в&nbsp;себе еще один уровень компонентов: компонент обложки в&nbsp;списке состоит из&nbsp;компонента круга и&nbsp;компонента иконки доллара.</p>
<p>На&nbsp;месте иконки доллара может стоять любая другая: иконка рубля, иконка категории операции или логотип закусочной. Компонент иконки&nbsp;&mdash; наименьший объект в&nbsp;структуре, а&nbsp;иконок схожего размера в&nbsp;проекте около сотни. Такая верстка списка используется во&nbsp;всех разделах приложения: на&nbsp;главном, в&nbsp;истории, в&nbsp;профиле и&nbsp;на&nbsp;внутренних экранах.</p>
<img src="/uploads/Assets_panel_23748eb706_2fc306f287.jpeg" alt="Assets panel">
<p>Чтобы вместо значка доллара поставить на&nbsp;обложку другую иконку, нужно перетащить ее&nbsp;с&nbsp;зажатым Opt+Cmd из&nbsp;панели Assets. Панель Assets&nbsp;&mdash; это второй таб левой панели слоев. Шорткат для быстрого вызова Assets&nbsp;&mdash; Opt+2. Важно, чтобы новая иконка была такого&nbsp;же размера, например, 24&times;24, иначе при замене она сожмется или растянется.</p>
<p>Фон круга под иконкой удобнее менять из&nbsp;Related components на&nbsp;правой панели инструментов. Другой&nbsp;же способ изменения фона&nbsp;&mdash; поменять его цвет через стиль или палитру. Но&nbsp;мы&nbsp;решили по&nbsp;максимуму упаковать все в&nbsp;компоненты и&nbsp;создали шесть компонентов обложек для разных цветов. Так, если понадобится изменить цвет фона на&nbsp;всем проекте, мы&nbsp;сможем сделать это быстрее.</p>
<p>Также есть отдельные случаи, когда на&nbsp;обложку списка нужно поставить логотип компании, например, сотового оператора. Для этого нужно на&nbsp;дочернем компоненте отключить видимость иконки и&nbsp;через стили изменить заливку фона на&nbsp;нужный логотип. Предварительно нужно все логотипы и&nbsp;аватарки занести в&nbsp;цветовые стили.</p>
<img src="/uploads/Component_path_d7470218f5_78214a1467.jpeg" alt="Component path">


  <h3>Путь к&nbsp;компоненту</h3>

<p>Выше мы&nbsp;упоминали, что у&nbsp;блока со&nbsp;строкой списка есть несколько вариантов верстки, и&nbsp;каждый из&nbsp;них является отдельным компонентом. На&nbsp;картинке два схожих компонента. Они немного отличаются в&nbsp;верстке.</p>
<p><strong>list64+icon/1-1</strong>&nbsp;&mdash; элемент списка с&nbsp;одним заголовком и&nbsp;суммой;</p>
<p><strong>list64+icon/2-2</strong>&nbsp;&mdash; с&nbsp;заголовком, подзаголовком и&nbsp;суммой с&nbsp;подстрочником.</p>
<p>Подобных вариаций еще около тридцати, но&nbsp;не&nbsp;будем их&nbsp;все показывать. Важно лишь отметить, что если эти элементы названы правильно, то&nbsp;ими можно легко жонглировать и&nbsp;менять один блок на&nbsp;другой. Делать это можно любым удобным способом: перетаскивать из&nbsp;панели Assets или переключать на&nbsp;панели компонентов.</p>
<p>Отличный лайфхак: чтобы при замене одного компонента на&nbsp;другой сохранялся текст заголовка и&nbsp;сумма, слои этих элементов должны быть названы одинаково. Это также очень полезно при изменении компонентов инпутов или кнопок.</p>
<img src="/uploads/123_b4474790c4_4fc0ab8ff9.gif" alt="Assets">
<p>Чтобы в&nbsp;Related components находились нужные компоненты, их&nbsp;важно правильно назвать. Например, компоненты фонов для иконок в&nbsp;нашем проекте названы примерно так:</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>Теперь&nbsp;же рассмотрим, из&nbsp;чего состоит полный путь к&nbsp;компонентам.</p>
<img src="/uploads/full_path_to_components_0290658f98_85ce0e30d7.jpeg" alt="full path to components">
<p><strong>componentsAndroid</strong>&nbsp;&mdash; название файла.</p>
<p><strong>lists</strong>&nbsp;&mdash; название фрейма в&nbsp;файле.</p>
<p>Дальше уже идет рукописное имя, каждый элемент которого между знаками &laquo;/&raquo; создает еще один уровень вложенности. И&nbsp;в&nbsp;конце имя самого элемента.</p>
<p>Также еще один уровень вложенности можно создать, поделив файл на&nbsp;страницы.</p>
<p>Если у&nbsp;нескольких компонентов названия всех уровней, расположенных до&nbsp;имени конечного элемента, совпадают, то&nbsp;Figma считает, что эти компоненты находятся в&nbsp;одной группе и&nbsp;предлагает в&nbsp;один клик менять один компонент на&nbsp;другой, а&nbsp;также хранит эти компоненты рядом в&nbsp;панели Assets.</p>
<img src="/uploads/nesting_level_1adf7ec501_897dc65adc.jpeg" alt="nesting level">
<p>В&nbsp;какой последовательности организовать этот путь, каждый дизайнер решает сам исходя из&nbsp;специфики проекта и&nbsp;удобства использования.</p>
<p>В&nbsp;некоторых случаях удобно сделать последним пунктом признак цвета, что, как в&nbsp;примере выше, позволяет быстро менять цвет подложки под иконкой. В&nbsp;некоторых случаях удобнее называть элементы по&nbsp;иному принципу. Например, по&nbsp;принципу состояния элемента: Enable и&nbsp;Disable, Hover и&nbsp;Active.</p>
 <p>Чтобы избежать перепроектирования, важно в&nbsp;самом начале продумать&nbsp;то, как будет устроена ваша структура, и&nbsp;схематично ее&nbsp;набросать.Но даже если вы&nbsp;ошиблись в&nbsp;структуре, не&nbsp;переживайте&nbsp;&mdash; просто переименуйте мастер-компоненты так, как вам будет удобно. Figma позволяет это сделать в&nbsp;любой момент, что не&nbsp;займет много времени. Ускорить процесс переименования также можно с&nbsp;помощью плагинов.</p> <p><strong>Путь к&nbsp;компоненту</strong></p>
<p>Библиотеку мы&nbsp;расположили в&nbsp;трех файлах:</p>
 <ul>
 <li>Файл с&nbsp;компонентами иконок и&nbsp;иллюстраций, общих для двух платформ;</li>
 <li>Файл с&nbsp;компонентами элементов iOS;</li>
 <li>Файл с&nbsp;компонентами элементов Android.</li>
    </ul>
<img src="/uploads/Library_structure_e16d67f47b_d42dce378d.jpeg" alt="Library structure">
<p>Если в&nbsp;проекте предполагается свыше тысячи экранов, мы&nbsp;рекомендуем хранить компоненты в&nbsp;отдельных файлах. Что может случиться, если хранить компоненты в&nbsp;одном файле с&nbsp;макетами&nbsp;&mdash; читайте в&nbsp;нашей предыдущей статье.</p>


<h3>Выводы</h3>
<ul>
<li>Если в&nbsp;проекте предполагается свыше тысячи экранов, храните компоненты в&nbsp;отдельных файлах.</li>
 <li>Разные состояния элемента лучше делать отдельными компонентами, а&nbsp;не&nbsp;скрытыми слоями. Иконки&nbsp;же нужно переключать в&nbsp;панели компонентов.</li>
<li>Называйте компоненты и&nbsp;слои в&nbsp;них осмысленно, используйте вложенность с&nbsp;помощью слэша &laquo;/&raquo; и&nbsp;иерархии внутри файла: название файла/название страницы/название фрейма/внутренняя иерархия с &laquo;/&raquo;.</li>
<li>Продумывайте заранее структуру библиотеки, дабы сэкономить себе время в&nbsp;будущем.</li>
</ul>

Структура библиотеки компонентов в Figma на примере банковского приложения

Lifehack-figma.jpg

В прошлом году мы полностью перешли со Sketch на Figma, уже обжились в новом редакторе и очень его любим. Статья будет полезна как новичкам, так и уже опытным пользователям.

<h3>1. Делаем структуру страниц</h3>

<p>На небольших проектах мы всю работу ведем в одном файле: храним в нем черновики, концепты и чистовые макеты с компонентами. Чтобы разработчик и заказчик понимали, где лежит готовый для верстки макет, а где концептуальный черновик, мы делим файл на страницы.</p>
<p>Список страниц дробим на условные разделы. Для лучшего считывания используем эмодзи, а названия страниц отбиваем пробелами от начала строки. Получается что-то вроде структуры с вложенностью.</p>
<p>На самом деле эта структура лишь визуальное решение, так как Figma не позволяет создавать дополнительные уровни вложенности в станицах. В качестве названия раздела используется пустая страница</p>
<p>Ниже несколько примеров такой структуры.</p>

<p><img src="/uploads/2_0fcfc29644_c00e3265a4.png" alt="2_0fcfc29644.png"<em>С помощью эмодзи 🟢 или 🟠 можно отмечать степень готовности раздела для передачи в разработку.</em></p>


<h3>2. Называем одинаково слои на двух связанных компонентах</h3>
  
<p>Чтобы при смене состояний элемента сохранялись тексты, слои текстовых элементов должны быть названы одинаково. Это удобно при изменении состояний кнопок, элементов списка и инпутов.
<img src="/uploads/gif1_a31ffe4bfc_bdee87fc89.gif" alt="gif1_a31ffe4bfc.gif"></p>

<p>Мы меняем пустое состояние инпута на состояние фокуса, лейбл «Address» переезжает на верх инпута и сохраняет название, а не сбрасывает его на дефолтное.</p>
<p>Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.
<img src="/uploads/3_9b0b21b80a_4e427ea4f2.png" alt="3_9b0b21b80a.png"</p>



<h3>3. Все картинки заводим в цветовые стили</h3>
<p>Чтобы быстро сделать заливку фигуры логотипом, флагом или аватаром, удобно хранить эти картинки в качестве цветовых стилей.
<img src="/uploads/4_e0f12b6320_0f4e076a98.png" alt="4_e0f12b6320.png"> </p>


<h3>4. Быстро находим все элементы с похожими свойствами</h3>
 
 <p>Можно в два клика найти на странице все элементы с похожими свойствами, например, заливкой, обводкой или шрифтом. Для этого нужно выделить элемент, нажать системный Edit &gt; Select All with the Same… и выбрать, с каким конкретно свойством выделить элементы.</p>
 <p>Это удобно, если нужно найти и заменить неактуальный цвет, шрифт или заменить все экземпляры компонента на другие.
<img src="/uploads/5_d1867a25f9_ce947e319b.png" alt="5_d1867a25f9.png"></p>
<p>Также этот способ можно использовать, чтобы перенести мастер-компонент в другой файл. Как — читайте в следующем совете.</p>
  
  
  <h3>5. Переносим мастер-компонент в другой файл</h3>

<p>В Figma нет встроенной возможности перенести используемый мастер-компонент в другой файл, поэтому вам придется делать это вручную. Но есть надежный способ, как ускорить этот процесс.</p>
<p>Для этого нужно:</p>
    <ul>
      <li>Скопировать мастер-компонент в нужный файл;</li>
      <li>Присоединить этот файл в качестве библиотеки к текущему;</li>
      <li>Выбрать любой экземпляр старого мастер-компонента;</li>
      <li>Нажать Edit &gt; Select All with the Same Instance;</li>
      <li>Через меню Instance на панели инструментов заменить выделенные экземпляры на новый компонент;</li>
      <li>Готово! Осталось просмотреть все экземпляры на предмет слетевших текстов и стилей, а чтобы тексты при замене компонента сохранялись, называйте одинаково слои на двух связанных компонентах (об этом мы писали выше).</li>
    </ul>
<p><img src="/uploads/6_7fc92fed3f_fcb22460cb.png" alt="6_7fc92fed3f.png"</p>
<p>По такому же принципу можно перенести из одного файла в другой цветовые и текстовые стили. Для цветовых стилей также можно использовать плагин <ahref="https://www.figma.com/community/plugin/816627069580757929/Style-Organizer">Style Organizer</a> или его аналог.</p>


<h3>6. Делаем автолейауты из списков</h3>

<p>Если список сделать автолейаутом, то работать с ним становится гораздо удобнее: можно быстро увеличить количество строк через Cmd+D или удалить строки из середины списка, при этом отступы между элементами сохранятся </p>
<p><img src="/uploads/gif2_edaddde0b0_e210f9c736.gif?updated_at=2023-03-15T12:14:30.185Z" alt="gif2_edaddde0b0.gif"></p>
 
 
<h3>7. Делаем автолейауты из всего</h3>
 
<p>Знакомая ситуация? 👇</p>
<p><img src="/uploads/gif3_5b2c747874_d353e3d29c.gif?updated_at=2023-03-15T12:15:22.137Z" alt="gif3_5b2c747874.gif"></p>
<p>Все это очень просто решается созданием автолейаута из всех трех элементов.</p>
<p><img src="/uploads/gif4_d3a121f425_46f3b574e7.gif?updated_at=2023-03-15T12:16:14.830Z" alt="gif4_d3a121f425.gif"></p>
 <p>Еще пара примеров:</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>Такой прогресс-бар создается из автолейаута и невидимого текста. Такой способ пригодится, когда прогресс находится внутри компонента и нужно показать несколько состояний без детача.</p>
 
 
<h3>8. Растягиваем автолейауты</h3>
  
<p>Чтобы при растягивании блоков контент внутри них адаптировался под размер, нужно при настройке автолейаута использовать параметр «Strech Left &amp; Right» сверху на панели инструментов.</p>
<p><img src="/uploads/gif8_5129a53089_95559dd5ed.gif?updated_at=2023-03-15T12:20:40.099Z" alt="gif8_5129a53089.gif"></p>
 
 
<h3>9. Открываем больше одного окна в десктопном клиенте</h3>

<p>Не все знают, что можно открывать несколько окон десктопного приложения Figma. Делается это простым шорткатом Cmd+Shift+N.</p>
<p>Это удобно, если вы работаете одновременно с несколькими файлами, например, iOS, Android и библиотекой компонентов.</p>
<p>Кстати, почему большие проекты лучше держать в разных файлах, читайте в другой нашей <a href="https://mish.design/blog/2--optimizaciya-proekta-figma-na-primere-bolshogo-bankovskogo-prilozheniya">статье</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. Не считаем в уме</h3>

<p>Поля, в которых можно редактировать значения, понимают простейшие арифметические операции. Можно увеличить ширину элемента в два раза или прибавить к значению 50%. Это сильно ускорит процесс и поможет не ошибиться в устных подсчетах.</p>
<p><img src="/uploads/9_a349a438ba_92da5dec3b.png?updated_at=2023-03-15T12:22:10.224Z" alt="9_a349a438ba.png"></p>
<p>Мы ввели эти простые правила у себя в Mish. Результат превзошел сам себя: многие задачи стали выполняться сильно быстрее и эффективнее. Также введение единых правил и внутренних гайдлайнов позволили переключать дизайнеров с проекта на проект без потерь времени, что оценили не только коллеги внутри студии, но и клиенты.</p>


10 лайфхаков Figma, чтобы сделать работу эффективнее

NRJ case mocap web2.mp4

Редизайн сайта радио ENERGY, одной из крупнейших радиостанций России.

 <img src="/uploads/29_1dc7233e90.png">
<div>
<h3>Заряжающее радио</h3> 
<p>Радио ENERGY наши ребята слушают на постоянной основе, поэтому мы с большим воодушевлением приступили к работе над проектом. И прежде чем приступить к редизайну, начали с переосмысления подачи контента на сайте. А контента очень много: песни, тексты песен, информация об исполнителях, новости, передачи, информационные и развлекательные выпуски. Море информации, в которой нужно помочь слушателю сориентироваться.</p>
</div>

  <img src="/uploads/NRJ_Tagline_02_81951fff7c.jpg?updated_at=2023-03-31T14:19:36.024Z" alt="enter image description here">
  <img src="/uploads/NRJ_Tagline_03_b6c67272e3.jpg?updated_at=2023-03-31T14:19:36.803Z" alt="enter image description here">
<div>
<h3>Куда все это девать?</h3>
<div>
<p>Мы&nbsp;много работали над систематизацией огромного количество контента. Простая система тегов помогает найти исполнителя по&nbsp;жанру, список его треков, а&nbsp;также клипов. Все дополнили текстами песен с&nbsp;переводами, а&nbsp;также дополнительной интересной информацией. При этом пользователи могут помочь улучшить контент, предложив что-то редакции.</p>
</div>
</div>
  <img src="/uploads/NRJ_Tagline_04_80b795058c.jpg?updated_at=2023-03-31T14:19:34.328Z" alt="enter image description here">
  <img src="/uploads/NRJ_Tagline_05_3210874302.jpg?updated_at=2023-03-31T14:19:34.788Z" alt="enter image description here">
  <div>
<h3>Плеер</h3>
<div>
  <p>Самая главная фишка в&nbsp;плеере — ни&nbsp;у&nbsp;кого такого плеера нет. Звучит амбициозно? Да. Но если посмотреть, то на&nbsp;сайтах радиостанций вообще редко размещают полноценные плееры, а для ENERGY мы сделали историю прослушивания, тексты песен, переключения потоков. </p>
</div>
</div>
  <img src="/uploads/NRJ_Tagline_06_f3dbdc6c9d.jpg?updated_at=2023-03-31T14:19:34.774Z" alt="enter image description here">
  <img src="/uploads/NRJ_Tagline_07_f510b09f01.jpg?updated_at=2023-03-31T14:19:36.366Z" alt="enter image description here">
    <div>
<h3>Что же в итоге?</h3>
<div>
  <p>Над этим кейсом у нас работали самые основательные и вдумчивые ребята, потому что продумать логику такого количества контента было по-настоящему непросто. Но мы с задачей справились, ко всему прочему прикрутив еще полноценный плеер. Все это позволяет очень долго удерживать пользователя на сайте и вовлекать его в новые активности, получать обратную связь и постоянно совершенствовать контент. </p>

NRJ case mocap gor 2_00.png

Радио ENERGY

NRJ case mocap render_00.jpg

Kaspersky.png

Сайт с модульными решениями для всех продуктов и активностей, связанных с KasperskyOS.

<video
src="/uploads/behance_kaspersky_animacziya_1_abf35a75ca.mp4"
loop
autoplay
muted
playsinline></video>
</div>
<div>
<h3>Безопасное будущее</h3>
<p>Решения на&nbsp;основе операционной системы KasperskyOS предназначены для разных отраслей (умный город, транспортная инфраструктура, госучреждения, индустриальная автоматизация) и&nbsp;содержат в&nbsp;себе технологии KasperskyOS (кибериммунитет, микроядро, гибкая система безопасности). Эти решения используются повсеместно для построения надежных IT-инфраструктур: интернет вещей, управление виртуальными рабочими местами, ПО&nbsp;для умных автомобилей и&nbsp;т.д.</p></div>

  <img src="/uploads/2_54adf5e916.jpg?updated_at=2023-03-31T15:07:58.027Z" alt="enter image description here">
<div>
<h3>Переосмысление</h3>
<div>
<p>Мы&nbsp;предложили клиенту дизайн сайта в&nbsp;зелено-фиолетово-голубых тонах, поскольку основной цвет бренда — холодный зеленый. Здесь прямая ассоциация с высокими технологиями и будущим.</p>
<p>Так как сайт предназначен для b2b-аудитории и представителей гос. органов, важно было, чтобы ничто не&nbsp;отвлекало пользователей от&nbsp;чтения информации. Визуально сайт выглядит стильно, современно, но&nbsp;в&nbsp;то&nbsp;же время сдержанно, с&nbsp;большим количеством &laquo;воздуха.</p>
</div>
</div>

  <img src="/uploads/3_11269287f4.jpg?updated_at=2023-03-31T15:07:58.396Z" alt="enter image description here">
<div>
<h3>Главная страница</h3>
 <div><p>Главная страница сайта витринная. Она содержит основной промо-блок (с&nbsp;опциональным функционалом &laquo;карусели&raquo;) и&nbsp;опцию быстрой связи с&nbsp;командой по&nbsp;техническим вопросам.</p>
  <p>Решения на&nbsp;основе KasperskyOS можно приобрести только через партнеров, для чего и&nbsp;был создан отдельный раздел на&nbsp;сайте.</p>
  <p>Контент для сайта создавался параллельно с&nbsp;работой над версткой, а&nbsp;иногда и&nbsp;специально под дизайн.</p></div>
</div>

  <img src="/uploads/4_b8e9d56ee0.jpg?updated_at=2023-03-31T15:07:58.409Z" alt="enter image description here">
  <img src="/uploads/5_138f2823c8.jpg?updated_at=2023-03-31T15:07:57.426Z" alt="enter image description here">
  <img src="/uploads/6_f1d6590503.jpg?updated_at=2023-03-31T15:07:57.629Z" alt="enter image description here">
  
<div>
<h3>Модульность</h3>
<p>Так как разработчики KasperskyOS планируют выпускать в&nbsp;будущем новые решения, то&nbsp;модульность и&nbsp;простота в&nbsp;генерации новых страниц и&nbsp;разделов изначально была заложена при разработке дизайна сайта.</p>
</div>
  
  <img src="/uploads/7_e24cbee64e.jpg?updated_at=2023-03-31T15:07:58.561Z" alt="enter image description here">

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


KasperskyOS

RKP.png

Лендинг и личный кабинет объединенной российско-китайской платформы поиска оборудования

<img src="/uploads/00_RKP_99a3a9d2fc.jpg?updated_at=2023-04-02T18:00:44.464Z" alt="enter image description here">
<div>
<h3>Химическая платформа</h3>
<div>
  <p>Объединенная российско-китайская платформа химической промышленности — это большой проект для создания здоровой конкурентной среды на&nbsp;рынке импортного промышленного оборудования и&nbsp;материалов. </p>
  <p>Платформа полезна как физическим лицам, так и&nbsp;крупным промышленным корпорациям для поиска необходимого оборудования, проверки актуальных цен производителей и&nbsp;получения всех сопутствующих услуг. </p>
</div>
</div>

  <img src="/uploads/01_RKP_3240041c36.jpg?updated_at=2023-04-02T18:00:41.488Z" alt="enter image description here">
  <img src="/uploads/02_RKP_97972af8dc.jpg?updated_at=2023-04-02T18:00:43.288Z" alt="enter image description here">
<div>
<h3>Быстро и понятно</h3>
<p>Перед нами стояла задача создать лендинг и личный кабинет, которые помогали бы клиентам платформы создавать заявки на поиск оборудования. Дизайн информативный и понятный: пользователь должен в кратчайшие сроки ухватить цель проекта и принцип его работы.</p>
</div>

  <img src="/uploads/03_RKP_5f2138f0fe.jpg?updated_at=2023-04-02T18:00:42.368Z" alt="enter image description here">
<div>
<h3>Личный кабинет</h3>
<p>В личном кабинете нельзя дать пользователю потеряться в обилии полей и документов. И поскольку целевая аудитория проекта имеет слабый пользовательский опыт (ведь аналогичных проектов практически нет), мы потратили много усилий для грамотного структурирования информации, чтобы бережно провести пользователя по нужному пути.</p>
</div>
  <img src="/uploads/04_RKP_b008e64011.jpg?updated_at=2023-04-02T18:00:42.336Z" alt="enter image description here">
  <img src="/uploads/05_RKP_7c2301b0a3.jpg?updated_at=2023-04-02T18:00:42.839Z" alt="enter image description here">
<div>
<h3>Полноценная платформа</h3>
<p>Мы много работаем со сферой промышленности, поэтому уже имеем четкое понимание особенностей запросов клиентов. Данный проект не стал исключением и по итогу проделанная работа была высоко оценена клиентом, а платформа успешно функционирует. Также проект был отмечен несколькими дизайнерскими наградами за качественный интерфейс.</p>
</div>

РКП

Acra small.png

Сделали визуалку нового сайта для рейтингового агентства и помогли с современным юзабилити.


<img src="/uploads/1_ad22cdc68d.png" alt="enter image description here">

<div>
<h3>Кому делали</h3>
<p>Рейтинговому агентству АКРА с аккредитацией Банка России. АКРА присваивает кредитные рейтинги эмитентам по национальной и  международной шкалам, а значит должно отвечать зарубежным требованиям к функциональности платформы. </p>
</div>
 
  <img src="/uploads/2_d58c433869.png" alt="enter image description here">
  <img src="/uploads/3_c67f0838c4.png" alt="enter image description here">
<div>
<h3>Обновление для результата</h3>
<div>
<p>Обычно рабочие инструменты настраиваются под бизнес-процессы. В нашей истории все по-другому. Сайт АКРА базировался на нишевом языке, поэтому обслуживать софт было долго и дорого. Из-за этого приходилось плясать от неудобного функционала — а там и ошибки, и сложности, и риски. Агентство обратилось к нам, чтобы мы создали удобный портал для работы.<p>
</div>
</div>
  <img src="/uploads/4_40053c47a7.png" alt="enter image description here">

<div>
<h3>Погружение в процессы</h3>
<p>Одно дело — просто обновить визуал на сайте. Совсем другое — обновить его в соответствии с бизнес-процессами клиента, чтобы сайт был не просто красивый, но и удобный. Для этого мы погрузились в детали работы агентства и изучили процесс присвоения и поддержания рейтингов. Да, даже арт-директоры иногда занимаются такими задачами. Дальше пошло-поехало: построили архитектуру сервиса и навигацию, проработали UX, собрали UI-кит и обновили визуал сайта под утвержденный фирменный стиль. </p>
</div>
</div>
  <img src="/uploads/5_4dbe5a2fdd.png" alt="enter image description here">

  <div>
<h3>Проектная разведка</h3>
<div>
  <p>Вся работа совместная с клиентом — это про результат, а не разделение ответственности. Мы предложили оптимизировать рабочий флоу агентства и под него адаптировать сайт. В итоге разработали объектную модель сайта, взяли в руки и в реализацию перечень фичей проекта и поняли, куда копать дальше. </p>
</div>
</div>
 <img src="/uploads/6_dcd9330bbb.png" alt="enter image description here">

  <div>
<h3>Проработка UI</h3>
<div>
  <p>Второй этап — переработка юзабилити сайта. За основу взяли европейский стиль «чистого» дизайна и предложили минималистичный интерфейс и цифровой гайд с уникальными графическими элементами. Получилось, как там говорят, вкусно. </p>
</div>
</div>

 <img src="/uploads/7_d7a2678d4a.png" alt="enter image description here">

  <div>
<h3>Что в итоге</h3>
<div>
  <p>В итоге — новая визуалка сайта: современная, минималистичная, подходящая под образ клиента. А еще юзабилити, которое отвечает своим основным принципам — делать так, как удобно, и не делать так, как неудобно. В общем, конфетка. </p>
</div>
</div>

UI/UX

hello@mish.design

Москва

Нижний Новгород