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="/articles/3-optimizaciya-proekta-figma-na-primere-bankovskogo-prilozheniya">В&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, чтобы сделать работу эффективнее

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

medium_Bogdan_sajt_bfca441c4c.png

small_Bogdan_sajt_bfca441c4c.png

thumbnail_Bogdan_sajt_bfca441c4c.png

Bogdan_sajt_bfca441c4c.png

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

Management

Business Needs

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_Rykov_sajt_8f6c75b828.jpg

medium_Rykov_sajt_8f6c75b828.jpg

small_Rykov_sajt_8f6c75b828.jpg

thumbnail_Rykov_sajt_8f6c75b828.jpg

Rykov_sajt_8f6c75b828.jpg

Рыков Кирилл

Interfaces 

Sales

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

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

medium_Kostrom_sajt_cd16586cb8.jpg

small_Kostrom_sajt_cd16586cb8.jpg

thumbnail_Kostrom_sajt_cd16586cb8.jpg

Kostrom_sajt_cd16586cb8.jpg

Костромицкий Владимир

Business System

UX writing

E-commerce

Чикильдин Илья

medium_Kremneva_sajt_7a5c832494.jpg

small_Kremneva_sajt_7a5c832494.jpg

thumbnail_Kremneva_sajt_7a5c832494.jpg

Kremneva_sajt_7a5c832494.jpg

Кремнева Екатерина

Graphic Design

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

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

medium_lena_chulkova_8ab67dd01a.jpg

small_lena_chulkova_8ab67dd01a.jpg

thumbnail_lena_chulkova_8ab67dd01a.jpg

lena_chulkova_8ab67dd01a.jpg

Чулкова Елена

Клубков Иван

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

large_photo_2024-02-13_18-43-35.jpg

medium_photo_2024-02-13_18-43-35.jpg

small_photo_2024-02-13_18-43-35.jpg

thumbnail_photo_2024-02-13_18-43-35.jpg

photo_2024-02-13_18-43-35.jpg

Лозовский Павел 

game case mocap.mp4

Уникальный проект, объединивший юных дизайнеров, геймдевов и программистов, где проделана внушительная работа: фирменный стиль, дизайн веб-портала и админки, 3D-иллюстрации, веб-разработка. 

 <img src="/uploads/Tagline_01_Main_9d23fe5f58.jpg?updated_at=2023-03-30T07:29:22.748Z" alt="enter image description here">
<div>
<h3>Платформа</h3>
<div>
<p>&laquo;Начни игру&raquo; позволяет молодым разработчикам заявить о&nbsp;себе, выйти на&nbsp;новый уровень профессионального мастерства, создать уникальные игровые проекты и&nbsp;найти партнеров для поддержки своей инициативы. Обучение построено на&nbsp;геймификации, что отражено как в&nbsp;дизайне в&nbsp;целом, так и&nbsp;в&nbsp;особенностях разработки.</p>
<p>Дизайн&nbsp;&mdash; сочные цвета, ломаные формы, пересекающиеся элементы. Обилие 3D-иллюстраций и&nbsp;объема. Визуал буквально дышит творчеством и&nbsp;амбициями.</p>
</div>
</div>

  <img src="/uploads/Tagline_04_20de48777e.jpg?updated_at=2023-03-30T07:29:25.318Z" alt="enter image description here">
  <img src="/uploads/Tagline_06_adab1f4df3.jpg?updated_at=2023-03-30T07:29:21.195Z" alt="enter image description here">
  <img src="/uploads/Tagline_07_5c157a80b8.jpg?updated_at=2023-03-30T07:29:23.252Z" alt="enter image description here">
  
 <div>
<h3>Смело и ярко</h3>
<div>
<p>Кто ЦА проекта? Школьники, молодежь. Их нужно захватить ярким визуалом, необычными формами, смелым сочетанием цветов. Звучит очевидно, но на деле не самая простая задачка. Удивить визуалом молодых людей сложно. И начали мы с деркзой цветовой гаммы, которая даже внутри команды вызвала немало споров (однако по итогу очень зашла заказчику и аудитории). Также мы решили добавить объема привычным предметам, сделать упор на 3D, чтобы вдохнуть в них жизнь, но при этом оставить в рамках виртуального пространства. </p>
</div>
</div>

 <img src="/uploads/Tagline_08_d26b6eefcc.jpg?updated_at=2023-03-30T07:29:20.589Z" alt="enter image description here">
<div>
<h3>Родная разработка</h3>
<div>
<p>Этот проект стал большим испытанием для нашей команды разработки. Попробуем просто перечислить то, что было проделано, и ничего не забыть: html, css, js, typescript, react, spa, seo, devops, docker, kubernetes, ci/cd. Да, это и frontend, и backend, да еще и с собственной командой тестирования. Опыт колоссальный, результат стоящий. </p>
</div>
</div>

 <img src="/uploads/Tagline_09_da0340955a.jpg?updated_at=2023-03-30T07:29:23.871Z" alt="enter image description here">
<div>
<h3>Версия для людей с ограниченными возможностями</h3>
<div>
<p>Мы&nbsp;также адаптировали сайт в&nbsp;соответствии с&nbsp;ГОСТ Р&nbsp;52872-2019 &laquo;Национальный стандарт Российской Федерации&raquo;. Сайт подходит для пользования слабовидящими людьми&nbsp;&mdash; есть функционал синтеза речи, изменения размера шрифта, увеличения контрастности. И&nbsp;при этом функциональностью контента можно управлять через интерфейс клавиатуры без ограничений по&nbsp;времени нажатия на&nbsp;клавишу.</p>
</div>
</div>

 <img src="/uploads/Tagline_02_677e7d1c7a.jpg?updated_at=2023-03-30T07:29:23.956Z" alt="enter image description here">
<div>
<h3>Ачивки</h3>
<div>
<p>На проекте очень разветвленная система ачивок, все-таки нужно подбадривать юных творцов. Поэтому мы вложили немало сил в систему поощрения. Тут речь не только о визуале, но и об идеях. Каждая ачивка продумывалась исходя из текущих трендов, чтобы порадовать легким юмором и не отбить мотивацию пользоваться платформой дальше. </p>
</div>
</div>
 <img src="/uploads/Tagline_03_66799d233b.jpg?updated_at=2023-03-30T07:29:18.408Z" alt="enter image description here">
 <div>
 <h3>Иконки, куда же без них</h3>
<div>
<p>Иконок потребовалось много, поэтому мы их рисовали, рисовали и снова рисовали. Несколько иллюстраторов постоянно трудились, чтобы в едином стиле воспроизвести множество считываемых образов. </p>
</div>
</div>
<img src="/uploads/Tagline_05_e8e59dca6b.jpg?updated_at=2023-03-30T07:29:24.365Z" alt="enter image description here">
<div>
<h3>Как итог</h3>
<div>
<p>Это проект, которым мы гордимся от и до. Мы вложили в него очень много сил и задействовали в проработке все отделы Mish: продуктовый, коммуникационный, отдел разработки и тестирования. У него клёвый и самобытные брендинг, интерфейс внешний и внутренний, иллюстрации, разработка и тестирование. При этом мы продолжаем работать над следующим сезоном проекта, оказывая полную продуктовую поддержку и подкидывая новые идеи к реализации. </p>
</div>
<br>
<br>
<h4>Совместно с <a href="https://metacorp.gg/">Metacorp</a></h5>

Начни игру.jpg

Начни Игру

Начни Игру.jpg

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

Денисова Христина

Соколенко Владислав

Анпилов Алексей

Петров Сергей

PickselMocap.mp4

Веб-кабинет владельца магазина, приложение и сайт для покупателей сервиса покупок, работающего по стандартам Open Banking.

<img src="/uploads/Brend_1_b2c16f78d5.jpg?updated_at=2023-04-05T09:57:51.104Z" alt="enter image description here">
<video
src="/uploads/tagline_animation01_picksell_aca725850c.mp4"
loop
autoplay
muted
playsinline></video>
</div>
<div>
<h3>Единая корзина покупок</h3>
<p>Когда клиент пришел к нам с этим проектом, наши арт-директора прыгали от радости: сложный кейс, не имеющий аналогов, где одна только логика чего стоит. Грубо говоря, для покупателя это быстрый шопинг, а для магазина новый канал продаж. Сервис создает полный цикл магазин-клиент, где пользователи приложения сканируют QR-коды товаров различных магазинов, а приложение формируют для них единую корзину покупок. Пользователи платят напрямую со&nbsp;своего счета магазину, что позволяет экономить бизнесу на&nbsp;эквайринге и&nbsp;обеспечивает безопасность переводов по&nbsp;единому европейскому формату. </p>
</div>
<video
src="/uploads/tagline_animation02_picksell_d0b30c9b03.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/prilka_1_3db4c40648.jpg?updated_at=2023-04-05T09:58:28.785Z" alt="enter image description here">
  <img src="/uploads/prilka_2_14395fbc68.jpg?updated_at=2023-04-05T09:58:56.386Z" alt="enter image description here">

<div>
<h3>Онлайн-витрина</h3>
<p>Мы&nbsp;проработали функционал онлайн-витрины, предоставляющий бизнесу возможность создать собственную страницу магазина с&nbsp;товарами, что является отличным инструментом для малого бизнеса продвигать свою продукцию.</p>
</div>

  <img src="/uploads/Adminka_1_f5c9ba7351.jpg?updated_at=2023-04-05T09:55:22.412Z" alt="enter image description here">
  <img src="/uploads/Adminka_2_72de15d20c.jpg?updated_at=2023-04-05T09:54:59.867Z" alt="enter image description here">

<div>
<h3>Система QR-кодов</h3>
<div>
<p>Далее встроили в&nbsp;интерфейс канал коммуникации между клиентом и&nbsp;магазином, следуя стандартам безопасности и&nbsp;открытости: Picksell предоставляет все необходимые данные покупателя магазину, но бережно их хранит, а покупатель управляет своими персональными данными. В общем, всем сильно проще следовать директиве GDPR (без нее никуда).</p>
<p>Также создали систему QR-кодов, с&nbsp;помощью которой покупатели могут набирать единую корзину товаров из&nbsp;различных магазинов, чтобы быстро и&nbsp;легко оформить покупку. А еще это простой и&nbsp;удобный способ продажи товара с заранее заложенным агентским вознаграждением, например, для блогеров.</p>
</div>
</div>

  <img src="/uploads/veb_pokupatelya_1_257d05082b.jpg?updated_at=2023-04-05T09:57:51.128Z" alt="enter image description here">
  <img src="/uploads/veb_pokupatelya_2_1e2c28b857.jpg?updated_at=2023-04-05T09:55:40.777Z" alt="enter image description here">

 <div>
 <h3>Инструменты магазина</h3>
 <p>Мы&nbsp;продумали и&nbsp;отобразили в&nbsp;интерфейсе разные варианты доставки товаров покупателям, а&nbsp;также интегрировали полную аналитику продаж и&nbsp;информацию о&nbsp;складских остатках в&nbsp;личный кабинет магазина.</p>
 </div>
  <img src="/uploads/Lending_3_765ce761ec.jpg?updated_at=2023-04-05T09:59:34.716Z" alt="enter image description here">
<div>
<h3>Коммуникации</h3>
<div>
  <p>А что там по маркетинговой коммуникации? В ход пошли как классические инструменты (персональные скидки подписчикам магазинов, снижение цены на залежавшиеся корзинах товары), так и более современные и нетипичные для Европы — QR-коды.</p>
  <p>Для клиентов создали комфортное пространство, где они могут планировать свои покупки, делиться товарами, делать списки, дарить подарки в системе, а также видеть подробный анализ своих расходов.</p>
  <p>В качестве промоматериалов мы создали несколько лендингов, где доступно и наглядно объяснили суть платформы Picksell. </p>
  </div>
</div>

  <img src="/uploads/Lending_2_4bf729d939.jpg?updated_at=2023-04-05T09:54:59.860Z" alt="enter image description here">

<div>
<h3>Идеальная экосистема</h3>
<div>
<p>Всего за&nbsp;полгода мы&nbsp;разработали уникальную экосистему, предлагающую набор сервисов для работы с&nbsp;заказами, покупателями и&nbsp;логистикой, а также удобную платформу для покупок, переосмысляющую концепцию шопинга.</p>
<p>Самым сложным в&nbsp;нашей работе было абстрагироваться от&nbsp;существующих маркетплейсов и&nbsp;разработать по-настоящему работающий инструмент, не&nbsp;создающий конкуренции между магазинами. Но нам это удалось. Была проделана очень внушительная работа, которая стала для нас большим испытанием, но результат того стоит.</p>
</div>
</div>
<video controls src="/uploads/2203_2_043d79ac11.mp4"></video>

Picksell.jpg

Picksell

Пиксель.jpg

Мальцева Алина

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

Гайбарян Карина

nlmk mocap.mp4

Приложение Группы Компаний НЛМК для знакомства с товаром и оформления заказов

<img src="/uploads/1_e7d8f67a99.jpg?updated_at=2023-03-28T12:58:36.263Z" alt="enter image description here">

<div>
<h3>Стальное решение</h3>
<p>НЛМК — это крупный российский производитель стальной продукции. И от нас требовалось сделать максимально удобное и простое приложение, чтобы эту продукцию красиво и понятно показать и довести покупателя до совершения заказа. Ничего сложного на первый взгляд, но особенность товара накладывает свой отпечаток на дизайне всего приложения. </p>
</div>
 
  <img src="/uploads/3_cd2b9401b0.jpg?updated_at=2023-03-24T07:16:55.796Z" alt="enter image description here">

<div>
<h3>Максимальный комфорт</h3>
<div>
  <p>С помощью приложения можно:</p>
    <p>1) Найти и&nbsp;просмотреть информацию об&nbsp;интересующих товарах;</p></li>
   <p>2) Получить информацию о&nbsp;ценах, выгодных предложениях и&nbsp;наличии металлоизделий на&nbsp;складах в&nbsp;выбранном регионе.</p></li>
    <p>3) Заказать как готовую продукцию, так и под производство. Можно выбрать необходимые позиции с&nbsp;ближайшего к&nbsp;склада, задать параметры и&nbsp;указать тоннаж, после чего добавить товары в&nbsp;корзину и&nbsp;оформить заказ.</p>
</div>
</div>
  <img src="/uploads/2_c25c23fe2c.jpg?updated_at=2023-03-24T07:16:55.790Z" alt="enter image description here">

<div>
<h3>Идеальный фильтр</h3>
<p>Особое внимание мы&nbsp;уделили фильтрам продукции, чтобы эта функция отвечала запросам и&nbsp;нуждам клиентов НЛМК. </p>
</div>
  <img src="/uploads/4_c278e8f39b.jpg?updated_at=2023-03-24T07:16:55.740Z" alt="enter image description here">

  <img src="/uploads/5_741555daa1.jpg?updated_at=2023-03-24T07:16:54.284Z" alt="enter image description here">
  <div>
<h3>А что в итоге?</h3>
<div>
  <p>Получилось целостное и хорошо продуманное приложение с минималистичными иллюстрациями и строгим дизайном. Внимание к деталям и прекрасно отстроенная логика делают это приложение незаменимым инструментом бизнеса. </p>
</div>
</div>

НЛМК.jpg

НЛМК

Закиров Арсений

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>

РКП

kcentr.png

Редизайн маркетплейса с учетом текущих потребностей потребителей и бизнеса

<img src="/uploads/Kcentr_Tagline_01_Main_6a67df1029.jpg?updated_at=2023-04-02T18:16:39.546Z" alt="enter image description here">
<div>
<h3>Маркетплейс</h3>
<p>kcentr.ru&nbsp;&mdash; официальный интернет-магазин Корпорации &laquo;Центр&raquo;&nbsp;&mdash; российской розничной торговой сети по&nbsp;продаже бытовой техники и&nbsp;электроники известных мировых производителей. Иными словами — это амбициозный маркетплейс, которому требовался актуальный дизайн. </p>
</div>

  <img src="/uploads/Kcentr_Tagline_02_855fc57622.jpg?updated_at=2023-04-02T18:16:40.938Z" alt="enter image description here">
<div>
<h3>Карточка товара</h3>
<p>Карточка товара — это чуть ли не самое главное. Здесь важна каждая деталь, поэтому наши ребята тщательно продумали дизайн с учетом всех возможных опций, которые могут быть у продукта. Отображение товара стало максимально информативным, но при этом без лишнего шума и отвлекающих элементов. </p>
</div>
  <img src="/uploads/Kcentr_Tagline_03_fc3ab502c2.jpg?updated_at=2023-04-02T18:16:40.647Z" alt="enter image description here">
  <img src="/uploads/Kcentr_Tagline_04_93319da9f8.jpg?updated_at=2023-04-02T18:16:40.034Z" alt="enter image description here">
<div>
<h3>Оформление заказа</h3>
<p>Именно на этапе оформления заказа значительное число потенциальных покупателей покидают маркетплейс. Что тому виной? Слабый дизайн, шумные элементы, нарушение логики расположения кнопок, неправильные акценты. Мы проработали все ошибки, чтобы пользователь все же успешно купил себе ноутбук.</p>
</div>
  <img src="/uploads/Kcentr_Tagline_05_449d94350b.jpg?updated_at=2023-04-02T18:16:38.972Z" alt="enter image description here">
  <img src="/uploads/Kcentr_Tagline_06_e43adb4e7f.jpg?updated_at=2023-04-02T18:16:40.017Z" alt="enter image description here">
<div>
<h3>Что в итоге?</h3>
<p>Во главе угла этого проекта стоит сильный UX. Это основополагающая любого интернет-магазина, а тем более маркетплейса. Клиент высоко оценил работу с деталями и логику отображения элементов. Маркетплейс успешно функционирует с текущим дизайном и демонстрирует высокие показатели после ребрендинга. </p>
</div>

Корпорация «‎Центр»‎

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

SBI mocap.mp4

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

<img src="/uploads/001_0d8c7a6365.jpg?updated_at=2023-04-02T18:29:50.048Z" alt="enter image description here">
<div>
<h3>Семейный банкинг</h3>
<p>Мы&nbsp;отразили новую для рынка идею, family banking&rsquo;а, в&nbsp;виде детского и&nbsp;взрослого приложений, которые помогают вместе копить на&nbsp;общую мечту, вместе тратить и&nbsp;вместе зарабатывать кэшбэк.</p>
</div>

 <img src="/uploads/002_dcabe32094.jpg?updated_at=2023-04-02T18:29:49.955Z" alt="enter image description here">

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

  <img src="/uploads/004_1c73d338ba.jpg?updated_at=2023-04-02T18:29:49.990Z" alt="enter image description here">
  
<div>
<h3>Детское приложение</h3>
<div>
<p>Стиль детского приложения не&nbsp;такой строгий, как у&nbsp;взрослого: обращение на&nbsp;&laquo;ты&raquo;, яркие иллюстрации, возможность поставить на&nbsp;фон картинку из&nbsp;мультика или фото супергероя, но&nbsp;в&nbsp;то&nbsp;же время оно похоже на&nbsp;взрослое и&nbsp;выглядит как серьезный финансовый сервис.</p>
 <p>Такое решение позволяет формировать финансовую грамотность у&nbsp;подрастающего поколения. Приложение позволяет младшим членам семьи планировать свои накопления, расходы и&nbsp;получать переводы от&nbsp;родителей в&nbsp;интерактивной форме.</p>
</div>
</div>

  <img src="/uploads/006_f63ec80210.jpg?updated_at=2023-04-02T18:29:49.975Z" alt="enter image description here">
  <div>
  <h3>Элемент игры</h3>
  <p>Внутри приложения родители могут назначать задания детям и&nbsp;назначать им&nbsp;награду. Средства автоматически перечисляются в&nbsp;копилку ребенка после подтверждения родителем.</p>
  </div>
<video
src="/uploads/sbi_budget_abe241ab65.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/007_9ee6f66a1c.jpg?updated_at=2023-04-02T18:29:49.870Z" alt="enter image description here">
 
 <div>
 <h3>Комплексный сервис</h3>
<p>Мы&nbsp;реализовали все основные функции платежей: переводы между своими счетами, клиентам других банков, платежи за&nbsp;ЖКХ, интернет, телефон, по&nbsp;реквизитам и&nbsp;другие финансовые возможности.</p>
 </div> 

  <img src="/uploads/003_05939f2545.jpg?updated_at=2023-04-02T18:29:48.727Z" alt="enter image description here">
  <img src="/uploads/005_e8473fac76.jpg?updated_at=2023-04-02T18:29:49.501Z" alt="enter image description here">

<div>
<h3>Результат</h3>
<p>В&nbsp;процессе работы мы&nbsp;разработали большую дизайн-систему, отрисовали более 1500 экранов и&nbsp;выпустили MVP-версии взрослого и&nbsp;детского приложений для iOS и&nbsp;Android.</p>
</div>

SBI Bank.jpg

SBI Bank

SBI.jpg

МСТ.png

Редизайн для Fenix+ 3 — универсального программного обеспечения для расчета пожарных рисков на гражданских и производственных объектах.

  <img src="/uploads/001_a85af274f3.jpeg?updated_at=2023-04-03T11:47:49.306Z" alt="enter image description here">
<div>
<h3>ПО для прогнозирования рисков</h3>
<p>Fenix+ 3 — это универсальное программное обеспечение для расчета пожарных рисков на гражданских и производственных объектах, а также для расчета противопожарных расстояний между зданиями и сооружениями. Это очень важное для организаций ПО, которое позволяет независимо провести моделирование эвакуации людей и динамики развития пожара.</p>
</div>

  <img src="/uploads/002_22601a4fd7.jpg?updated_at=2023-04-03T11:47:52.238Z" alt="enter image description here">
  <div>
<h3>Интерфейс</h3>
<p>Изначально у&nbsp;клиента уже была первая версия проекта на&nbsp;стандартных Windows компонентах, уже был работающий продукт и&nbsp;люди, которые им&nbsp;пользовались. Клиент хотел сделать проект более современным и&nbsp;попробовать взглянуть на&nbsp;него не&nbsp;внутренней командой, а&nbsp;свежим взглядом. Поэтому изначальной задачей было подправить визуал. Но&nbsp;в&nbsp;ходе работы мы&nbsp;постепенно находили новые проблемные места и&nbsp;начали предлагать перепроектирование рабочей области так, чтобы ключевые элементы с&nbsp;одной стороны оставались на&nbsp;тех&nbsp;же местах, но&nbsp;с&nbsp;обновленной логикой и&nbsp;поведением.</p>
</div>
  <img src="/uploads/003_9a6c566e01.jpg?updated_at=2023-04-03T11:47:51.631Z" alt="enter image description here">
<div>
<h3>Глубокий анализ</h3>
  <p>Мы&nbsp;предложили клиенту несколько вариантов перепланировки основной рабочей области главного экрана так, чтобы функционал можно было дополнять и&nbsp;безболезненно расширять без последующего редизайна. В&nbsp;ходе работы мы&nbsp;подробно анализировали интерфейсы профессионального&nbsp;ПО как для 3D&nbsp;моделирования, так и&nbsp;привычные программы для дизайнеров, чтобы понять подходы к&nbsp;расположению управляющих элементов на&nbsp;экране. Благодаря этому анализу нам удалось расположить рабочие панели, чтобы пользователь мог быстрее и&nbsp;эффективнее решать нужные ему задачи. При этом основные разделы остались на&nbsp;своих прежних местах, что позволило сохранить привычки текущих пользователей, но&nbsp;упростило новичкам освоение программы и&nbsp;использование отдельных модулей. </p>
</div>
  <img src="/uploads/004_12b42564ca.jpg?updated_at=2023-04-03T11:47:52.181Z" alt="enter image description here">
  <img src="/uploads/005_18aeb90891.jpg?updated_at=2023-04-03T11:47:51.765Z" alt="enter image description here">
<div>
<h3>Что в итоге?</h3>
  <p>В итоге был полностью переомыслен подход к дизайну и расположению элементов. Создали большой UI-Kit. Разработали более ста узкоспециализированных иконок, чтобы даже на&nbsp;компактных дисплеях их&nbsp;назначение было понятно без подписей. При этом переиспользовали наработки и в дальнейшем над редизайном связанных с Fenix+ 3 программ. </p>
</div>

МСТ.jpg

МСТ

UI/UX

hello@mish.design

Москва

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