Ошибка разработчиков привела к созданию приложения figma

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

Причина 1. В одном файле расположено слишком много макетов

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

Причина 2. Основные компоненты собраны с большим количеством скрытых слоев

Процесс работы

Кстати, если ваш файл займет 2GB, он может перестать открываться, так что не доводите до такого и вовремя проводите оптимизацию. Следить за показателями тут View > Resource use.

Выводы

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

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

Статья поможет избежать фундаментальных ошибок при разработке дизайн-систем. Материал будет особенно полезен дизайнерам, разработчикам и бизнесу, которые работают над проектами, где свыше пятисот макетов в дизайне.

Мы студия Mish, преимущественно сфокусированы на дизайне сайтов и мобильных приложений. За время работы мы много сталкивались с крупными проектами, в частности, в банковской сфере. В рассматриваемом случае клиент поставил нам задачу разработать дизайн двух мобильных приложений для SBI: банкинг «для взрослых» и отдельное банковское приложение «для детей», в котором есть полноценный счет, можно выполнять задания родителей, получать награды и копить на мечты. Разработка приложений осуществлялась для двух платформ.

Через полгода работы только во «взрослом» приложении появилось свыше шести сотен экранов для каждой платформы. Тогда мы столкнулись с проблемой: люди, задействованные на проекте, — разработчики, аналитики, тестировщики, заметили, что файлы Figma стали работать медленнее. А именно: долго открывались, тормозили при зуме и порой даже вылетали. Даже дизайнеры, работающие на MacBook Pro, испытывали трудности. Например, десять фреймов могли копироваться около минуты: к примеру, выделил их, нажал Cmd+C и ждешь — Figma все это время не двигается. Потом, если не повезет, выскакивало сообщение «You run out of memory». После этого приходилось перезапускать Figma и копировать фреймы по одному.

Поискав информацию в Интернете и на сайте Figma, мы нашли причину и поняли, как решить проблему. Статья, которая нам помогла🇬🇧.

Две основные причины тормозов:

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

Расскажем подробнее о каждом пункте:

Причина 1. В одном файле расположено слишком много макетов

Дизайн в«взрослого» приложения состоит из трех файлов:

Есть еще два файла с «детским» приложением, но мы не стали их оптимизировать, так как эти файлы работают быстро: в них меньше пяти сотен макетов.

Мастер-компоненты мы хранили в одном файле с макетами. На момент старта проекта это не казалось нам чем-то неправильным. Это достаточно удобно, так как не нужно переходить в другой файл, чтобы сдвинуть иконку на два пикселя. Мы думали, что при необходимости можно легко поделить этот файл на несколько: мастер-компоненты оставить в одном файле, а макеты с дочерними компонентами вынести в отдельный. Но на тот момент мы не подозревали об одной фундаментальной баге программы Figma, о которой напишем чуть позже. А пока расскажем о двух известных нам способах, которыми можно поделить один большой файл на несколько маленьких:

Способ 1. Продублировать файл нужное количество раз и в каждом дубликате удалить лишние макеты или страницы.

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

Способ 2. Создать несколько новых файлов, подключить к ним командную библиотеку и скопировать в них нужные макеты из исходного файла. В исходном же оставить только мастер-компоненты, так как их, в отличие от дочерних, перенести в другой файл нельзя — это печальное ограничение Figma, о котором мы знали.

Данный способ выглядит вполне жизнеспособным. Во всяком случае, не противоречит каким-либо очевидным правилам поведения программы. Но мы не знали о том, что в Figma есть серьезная скрытая проблема: при переносе макета в новый файл многие дочерние компоненты, находящиеся в нем, теряют связь с мастер-компонентом, т.е. часть скопированных дочерних компонентов при вставке превращается в обычные фреймы. Это та самая фундаментальная бага, о которой ребята из Figma в курсе и с которой они воюют уже года два. Подробнее о проблеме тут 🇬🇧.

Подобные баги могут происходить даже при копировании и вставке макета внутри одного файла, если делать это через «Cmd+C ⟶ Cmd+V» или «Копировать ⟶ Вставить». Нам показалось, что часто это происходит на сложных компонентах, а также если компонент уже копировался и вставлялся неоднократно. Чтобы избежать этого бага, нужно сложные многосоставные компоненты копировать через зажатый Opt или Alt. Если вы сталкивались с подобной проблемой, поделитесь в комментариях своими наблюдениями.

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

Причина 2. Основные компоненты собраны с большим количеством скрытых слоев

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

К примеру, вариаций блока списка высотой 64px в нашем приложении получилось свыше тридцати. Плюс в каждом состоянии может быть еще около ста разных иконок на обложке.

Когда мы создавали первые компоненты на проекте, мы обсуждали два варианта создания дизайн-системы, учитывающих все подобные состояния:

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

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

Но оказалось, что в Figma дочерний компонент является не просто ссылкой на мастер-компонент, а полноценным его экземпляром, занимает столько же памяти и тянет за собой все скрытые слои. Получилось, что один экземпляр элемента «тащил» за собой все тридцать скрытых и увеличивал размер файла.

Вариант 2. Создать отдельный мастер-компонент под каждый случай.

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

Изначально мы пошли по первому варианту — сделали «супер-компоненты», внутри которых учитывались все возможные состояния в виде скрытых слоев. Это привело к увеличению количества слоев и размера файла. Лучшим решением оказался второй вариант, при котором для каждого состояния элемента создается отдельный компонент.

Далее мы решили оптимизировать проект: вынести мастер-компоненты в отдельный от макетов файл и оптимизировать их структуру — убрать лишние слои, а все состояния сделать отдельными компонентами. Это должно было решить несколько проблем: общий вес проекта сократился бы, и мы получили бы систему файлов, с помощью которой было бы удобно в будущем их делить.

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

Процесс работы

Работали на «живом» проекте, на котором параллельно присутствовали разработчики, аналитики, тестировщики и представители заказчика. Задачей занимался один дизайнер, параллельно разрабатывая новые фичи и занимаясь поддержкой разработки. На переработку двух платформ ушло около месяца. Мы вели лог основных показателей файла и скринили табличку используемых Figma ресурсов (View > Resource use) при закрытии каждого раздела. Итак, что получилось?

Объективные показатели по платформам

iOS:

Android:

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

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

Выводы:

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

Я всегда говорил, что нет лучшего способа изучить инструмент дизайна, чем просто погрузиться в него и что-то создать.

И угадайте, что?

Именно этим мы и займемся в этой статье, я покажу, как создать в Figma простой экран мобильного приложения.

Самое замечательное в Figma – это чистый и интуитивно понятный интерфейс.

Я использовал практически все существующие инструменты дизайна, и со временем интерфейс многих из них начал казаться немного раздутым. Интерфейс Figma плотный и компактный, и его приятно использовать каждый день.

Позвольте мне провести быстрый обзор интерфейса Figma…

Панель инструментов

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

Вот краткий список инструментов (с соответствующими сочетаниями клавиш), которые вы будете использовать чаще всего…

• Move (V)
• Scale (K)
• Frame (Aили F)
• Rectangle (R)
• Line (L)
• Arrow (Shift + L)
• Ellipse (O)
• Place Image (Shift + Ctrl + Kили Shift + Cmd + K)
• Pen (P)
• Text (T)
• Hand (Нажмитеили удерживайте SPACE)

Панель слоев (Layers Panel)

В левой части экрана находится панель слоев.

Она дает вам легкий доступ к слоям, компонентам и страницам, используемым внутри вашего текущего файла Figma.

Любые фреймы, группы или объекты, которые вы добавляете на холст, будут отображаться на панели слоев.

Панель компонентов (Assets Panel)

Внутри панели компонентов у вас будет легкий доступ ко всем вашим компонентам.

Компоненты – это повторно используемые элементы дизайна, такие как кнопки или иконки, а также более сложные элементы интерфейса, такие как меню или модальные окна.

Чтобы ускорить рабочий процесс, вы можете быстро выбрать компонент на панели активов и перетащить его на холст, чтобы создать экземпляр.

Холст (Canvas)

Холст.

Здесь представлены ваши проекты.

Все просто, поэтому двигаемся дальше…

Панель свойств (Properties Panel)

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

Вкладка «Дизайн» (Design)

Вкладка «Дизайн» позволяет легко просматривать, добавлять, удалять или изменять свойства элементов вашего дизайна.

Слой, который вы в настоящее время выбрали, будет определять, какие настройки доступны вам на вкладке «Дизайн».

Вкладка «Прототип» (Prototype)

Вкладка «Прототип» дает доступ ко всем функциям прототипирования, которые может предложить Figma, и позволяет применять переходы между фреймами, оживляя ваши статичные дизайны.

Вкладка «Inspect»

Вкладка «Inspect» на панели свойств позволяет увидеть элементы вашего дизайна в коде, в следующих доступных форматах:

CSS

iOS

Android

А теперь о хорошем …

Проектирование экрана мобильного приложения

Обратите внимание: прежде чем мы углубимся в этот раздел, убедитесь, что вы загрузили элементы дизайна, необходимые для выполнения заданий в этой статье здесь. (Там также есть готовый файл, на который вы можете ссылаться).

Открыв Figma, создайте новый документ, щелкнув значок плюса (+) в правом верхнем углу экрана.

На появившемся экране выберите вариант iPhone 11 Pro / X и нажмите Create File.

Затем, когда фрейм не выбран, щелкните имя файла на панели инструментов и переименуйте его в «Mobile App Screen».

Миниатюра карточки

Выберите инструмент «Прямоугольник» (R), нарисуйте фигуру примерно 375px в ширину и 406px в высоту и поместите ее в верхней части фрейма. Вы также можете дважды проверить ее правильность, убедившись, что для нее установлено значение 0 по осям X и Y на панели свойств.

На панели свойств кликните по иконке Independent Corners и выберите 30 для радиусов скругления левого нижнего и правого нижнего углов прямоугольника.

Теперь давайте поместим изображение внутри нашей фигуры, используя очень полезную функцию «Place Image».

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, выберите файл preview.jpg из папки Images, а затем кликните по фигуре, чтобы вставить изображение прямо в нее.

Давайте применим цветное наложение к нашему изображению, чтобы добавить немного контраста между ним и элементами, которые мы вскоре разместим поверх него.

На панели «Заливка» (Fill) щелкните значок «Плюс» (+), чтобы добавить новую заливку. Убедитесь, что выбран параметр Solid.

Во всплывающем меню введите следующее Hex-значение (#): 303030 и установите непрозрачность (opacity) на 50%.

Наконец, давайте добавим легкую тень (drop shadow) к миниатюре и придадим глубины нашему дизайну.

На панели «Effects» щелкните значок плюс (+), выберите «Drop Shadow» в меню выбора, а затем настройте следующие параметры эффекта…

• X — 0
• Y — 4
• Размытие (Blur) — 4
• Цвет (Color) — #303030
• Непрозрачность (Opacity) — 20%

Панель навигации (Navigation Bar)

Для панели навигации мы вставим пару иконок. Одну для возврата к предыдущему экрану, а другую для добавления статьи в закладки.

Открыв папку Icons, просто перетащите на фрейм следующие иконки, по одной…

• стрелка назад (arrow back)
• закладка (bookmark)

Выделив обе иконки, перейдите на панель «Selection Colors» и измените Hex-значение цвета на белый (FFFFFF).

Удерживая нажатой клавишу Alt, чтобы измерить расстояние между элементами дизайна, поместите каждую иконку на 32px от левого и правого краев фрейма.

Затем, выбрав обе иконки, перейдите на панель свойств и выберите «Align Vertical Centers» (Alt + V).

Когда обе иконки все еще выделены, используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать. Это просто придаст аккуратный и организованный вид на панели слоев.

Всегда переименовывайте и группируйте по ходу дела. Это экономит кучу времени.

Теперь, удерживая Alt, поместите эту новую группу в 56px от верхнего края основного фрейма.

Уведомление

Как видите, для иконки закладки мы выбрали версию с заливкой, как если бы пользователь только что добавил публикацию в закладки.

Давайте добавим простое уведомление, которое может отображаться пользователю при нажатии на иконку закладки. Ненавязчивый визуальный сигнал, показывающий, что действие (нажатие на иконку) было распознано и выполнено.

Инструментом «Прямоугольник» (R) нарисуйте фигуру размером 131px x 33px, а затем закруглите углы до 24.

На панели «Заливка» (Fill) задайте Hex-значение (#) 303030 и уменьшите его непрозрачность до 60%.

На панель «Эффекты» (Effects) добавим этому маленькому уведомлению легкое размытие фона, чтобы добавить визуальный интерес и немного большего контраста между изображением и текстом, который мы скоро разместим в нем.

На панели «Эффекты» щелкните значок плюс (+) и в меню выбора выберите Background Blur (Размытие фона).

Щелкните значок настроек эффекта (Effect Settings) и измените силу размытия (Blur Strength) на 6.

Пришло время написать немного текста и настроить еще несколько свойств, не так ли?

Используя инструмент «Текст» (T), добавьте новый текстовый элемент и напечатайте слово «Bookmarked» (добавлено в закладки).

Затем на панели свойств текста (Text Properties) примените следующее…

• Шрифт (Font) — Lato
• Вес (Weight) — Regular
• Размер (Size) — 14
• Выравнивание текста (Text Align) — Center
• Выравнивание (Align) — Middle
• Заливка (Fill) — #FFFFFF

Выбрав текст, и слой фигуры, используйте параметры выравнивания (Alignment) в верхней части панели свойств, чтобы выровнять элементы как по горизонтали, так и по вертикали относительно друг друга.

Используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать.

Затем, наконец, используйте Ctrl + Click или Cmd + Click, чтобы выбрать группу уведомлений и изображение, а затем используйте параметры выравнивания, чтобы выровнять уведомление по горизонтали и вертикали внутри изображения.

Аватар + иконки социальных сетей

Давайте разместим аватар, имя автора и иконки социальных сетей на свои места.

Выберите инструмент Эллипс (O) и нарисуйте фигуру размером 48 x 48px. Вы также можете удерживать клавишу Shift, чтобы сохранить пропорции.

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, чтобы использовать инструмент «Поместить изображение» (Place Image), выберите avatar.png из папки «Images» и поместите его внутри фигуры.

Выделив фигуру, перейдите на панель свойств и добавьте следующее…

Stroke –

• Цвет (Color) — #FFFFFF
• Ширина (Width) — 2
• Положение (Position) — Inside

Drop Shadow –

• X — 0
• Y — 2
• Размытие (Blur) — 4
• Цвет (Color) — #303030
• Непрозрачность (Opacity) — 25%

Давайте добавим еще несколько текстовых слоев как для имени автора, так и для даты публикации статьи …

Используя инструмент «Текст» (T), создайте 2 новых текстовых слоя, отредактируйте текст соответствующим образом, а затем примените к имени автора следующие свойства…

• Шрифт (Font) — Lato
• Вес (Weight) — Bold
• Размер (Size) — 16
• Выравнивание текста (Text Align) — Left
• Заливка (Fill) — #212121

А для Даты публикации используйте следующее…

• Шрифт (Font) — Open Sans
• Вес (Weight) — Regular
• Размер (Size) — 12
• Выравнивание текста (Text Align) — Left
• Заливка (Fill) — #7D7D7D

Используя клавишу Alt, расположите текстовые слои относительно друг друга, давая им небольшое пространство.

Затем используйте инструменты выравнивания, чтобы они были выровнены по левому краю относительно друг друга, и, наконец, сгруппируйте их (Ctrl + G или Cmd + G).

Выровняйте эту новую группу на 16px справа от аватара, а затем, выбрав новую группу и аватар, нажмите Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Давайте добавим пару иконок социальных сетей …

Как и раньше, просто перетащите по одной иконки Instagram и Twitter в свой дизайн и, используя комбинацию инструментов выравнивания и клавиши Alt, выровняйте их по вертикали относительно друг друга (Alt + V) и разместите их. На расстоянии 16px.

Сгруппируйте иконки (Ctrl + G или Cmd + G) и переименуйте (Ctrl + R или Cmd + R).

Выделив группу иконок социальных сетей, группу текстовых слоев и аватар, используйте Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Сгруппируйте (Ctrl + G или Cmd + G) все эти элементы вместе, а затем поместите эту новую группу на 32px от левого и правого края фрейма и на 32px от нижнего края изображения.

Заголовок + контент

Давайте добавим небольшой заголовок и фрагмент контента, чтобы еще немного дополнить наш дизайн …

Используя инструмент «Текст» (T), создайте простой заголовок, а затем на панели свойств примените следующее…

• Шрифт (Font) — Lato
• Вес (Weight) — Bold
• Размер (Size) — 21
• Высота строки (Line Height) — 32
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Top
• Заливка (Fill) — #212121

Затем, используя инструмент «Текст» (T) еще раз, создайте абзац контента, который будет отображаться под заголовком со следующими свойствами …

• Шрифт (Font) — Open Sans
• Вес (Weight) — Regular
• Ращмер (Size) — 16
• Высота строки (Line Height) — 28
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Top
• Заливка (Fill) — #7D7D7D

Мы установили цвет этого блока текста на темно-серый (#7D7D7D), чтобы он красиво контрастировал с заголовком, добавлял немного визуального интереса, но все еще был доступен на белом фоне для пользователей с ослабленным зрением.

Удерживая клавишу Alt, наведите курсор на два слоя, чтобы увидеть расстояние между ними, и разместите их на расстоянии 8px друг от друга.

Не забудьте сгруппировать (Ctrl + G или Cmd + G) и переименовать (Ctrl + R или Cmd + R), а затем разместите эту новую группу на 32px от левого края фрейма и на 32px от нижней части аватара группы.

Форма комментария

ОК. Давайте подведем итоги и добавим в наш дизайн небольшую форму / поле комментария.

Снова вызвав инструмент «Прямоугольник» (R), нарисуйте фигуру размером 263 x 40px, задайте ей радиус скругления углов 24 и заливку #E4E4E4.

Вставьте текстовый слой (T), измените формулировку (например, «Добавить комментарий…»), а затем добавьте следующие свойства…

• Шрифт (Font) — Lato
• Вес (Weight) — Regular
• Размер (Size) — 16
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Middle
• Заливка (Fill) — #707070

Выделив и фигуру, и текстовый слой, выровняйте их по вертикали относительно друг друга (Alt + V), а затем сгруппируйте (Ctrl + G или Cmd + G) их и переименуйте (Ctrl + R или Cmd + R).

Перетащите в свой дизайн кружок со стрелкой вправо, а затем с помощью инструмента «Scale» (K) измените его размер пропорционально до 40 x 40px , чтобы он имел те же размеры по высоте, что и поле, которое мы только что создали.

Поместите иконку на 8px справа от поля комментария, а затем, выбрав группу полей и иконку, выровняйте их по вертикали относительно друг друга (Alt + V).

Ну, наконец-то. Сгруппируйте 2 элемента (поле комментария и иконку). И поместите эту новую группу на 32px от нижней части текста, а также от левого и правого краев фрейма.

Вот и все, наш маленький экран мобильного приложения готов.

Я уже много раз говорил: начинайте проектировать, а потом проектируйте еще. Это лучший способ изучить новый инструмент и одновременно улучшить свои дизайнерские навыки.

Спасибо, за прочтение статьи.

---

Перевод статьи marcandrew.me

Figma — облачный сервис для дизайнеров, с помощью которого над одним проектом может трудиться сразу несколько человек. Он приобрел широкую популярность во всем мире благодаря удобству и обширному функционалу. 9 марта 2022 года компания объявила, что закрывает доступ к Figma отдельным российским пользователям, попавшим под санкции США, Великобритании и Евросоюза, а также блокирует возможность оплаты для российских пользователей.

Опасения, что Figma может полностью уйти с российского рынка, к счастью, не подтвердились (бесплатный тариф доступен по-прежнему, но у него есть ограничение — 3 файла Figma и 3 файла FigJam).

Но одно из преимуществ сервиса — командная работа — к сожалению, стало недоступно для официального использования на территории России. Однако проблему можно решить, если платный тариф оплатить картой другой страны (например, через знакомых за границей) и заходить через VPN. Кстати, услуги по оплате в нынешней ситуации предлагают и многие сервисы, например, i2pay

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

Как установить Figma и плагины в России в 2023 году

Сайт Фигмы по прежнему русифицирован, чего не скажешь о самом сервисе — он доступен только на английском и китайском языках.

Тем не менее, его можно установить на компьютер или телефон без VPN и других ухищрений и использовать на бесплатном тарифе.

На какие плагины стоит обратить внимание в 2023 году

Плагины для Фигмы устанавливаются без ограничений и без необходимости включения VPN. Посмотреть список доступных и установить можно здесь.

Важно! После установки плагина (кнопка Try it out), для запуска нужно нажать кнопку Run. Но чтобы сохранить плагин в своей коллекции, необходимо нажать кнопку Save. Об этом часто забывают новые пользователи сервиса и теряют понравившиеся дополнения!

Евгений Карелин, дизайнер TexTerra:

«Есть много плагинов, которые я использую по необходимости при разработке графического дизайна для наших заказчиков, например, дизайна сайтов. Так обложки для одного из наших заказчиков я делаю при помощи Imagetracer. Это крутой плагин, который может создавать креативы в единой стилистике и подходящие под любую тематику.

Плагин Unsplash используем для подготовки презентаций или шаблонов, а Mockup — когда необходимо показать пример, как логотип будет смотреться на фирменной продукции. Вот здесь можно найти плагины для Фигмы для различных задач».

1. Remove Bg

Плагин для Figma позволяет удалять фон, оставляя только основное изображение. Особенности:

• Работает с помощью искусственного интеллекта, что позволяет более качественно удалять фон.
• Бесплатно можно обработать не более 50 изображений.

Установить Remove Bg.

2. Image Tracer

Плагин предназначен для перевода растровых изображений в векторные, улучшая их четкость. Особенности:

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

Установить Image Tracer.

3. Blobs

В переводе с английского Blob, это «капля», «клякса». Плагин позволяет делать абстрактные капли разной формы, цвета и размера для фонов изображений. Особенность:

• Создает только 2D-объекты.

Установить Blobs.

4. Get Waves

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

Создает только 2D-объекты.

Установить Get Waves.

5. Wireframe

Очень полезный плагин для создания прототипов. Позволяет избежать ошибок перед тем, как приступить к непосредственному дизайну сайта или какого-либо другого макета. Особенность:

• Такие плагины очень удобны при работе в команде, но так как в данный момент в России тарифы совместного использования недоступны, придется показывать прототип со своего компьютера или скриншотами.

Установить Wireframe.

6. Image Palette

Этот плагин полезен, когда стоит задача сделать дизайн в едином стиле. Например, при создании посадочных страниц или рекламных макетов, когда важно, чтобы цвета логотипа нашли отражение в цветовой гамме проекта. А еще Image Palette поможет при создании брендбука, когда цветовая гамма также основывается на имеющихся корпоративных элементах.

Особенности:

• Составляет схемы только из пяти цветов.
• Может сбоить при работе с векторными файлами и неяркими изображениями.

Установить Image Palette.

7. Figmotion

Плагин, используемый для создания анимированных объектов. Удобен тем, что имеет достаточно продвинутый функционал для web-анимации и нет необходимости использовать сторонние программы. Готовые объекты можно выгружать в форматах GIF, MP4 and WEBM.

Особенности:

• Плагин развитый, но для создания полноценной анимации, к сожалению, не подойдет.
• Работа с анимированным объектом ведется в отдельном окне, что удобно, если вы работаете с использованием нескольких экранов.

Установить Figmamotion.

Заключение

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

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

Читайте также:

Как сделать градиент в «Фигме»? Инструменты и полезные плагины

Как сделать анимацию в Фигме – простая инструкция

Figma или Photoshop? – выбор объясняют веб-дизайнеры

Прототип приложения, в отличие от дизайн-концепции, дает возможность выполнить основные действия, увидеть связи между элементами интерфейса и их разные состояния. В самых продвинутых прототипах можно протестировать почти весь функционал. Вместе с Моисеем Любарским, автором модуля по Figma для курсов Contented, в том числе для курса «UX/UI-дизайнер с нуля до PRO», разбираемся, из каких этапов состоит работа над прототипом и какие для этого есть инструменты.

Для чего нужен прототип?

Прототипы помогают креативным командам решить несколько задач:

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

• Дизайнер и арт-директор понимают, над какими UX- и UI-задачами работать.
• Разработчики оценивают продукт с точки зрения технической реализации.
• Стейкхолдеры в целом оценивают продукт с точки зрения рынка.

Составить roadmap (дорожную карту) продукта, то есть визуализацию плана работы на временной линии. Весь дальнейший процесс работы опирается на созданный прототип, и основные задачи команды тоже распределяются на этой стадии.

Согласовать цели и задачи с заказчиком, чтобы утвердить объем работы и застраховать команду от неожиданных требований. Прототип становится частью ТЗ, и если заказчик просит добавить в приложение новый функционал, который не был утвержден, то обсуждается дополнительная оплата работы.

Создание прототипа состоит из трех основных этапов, на каждом из которых прорабатывается определенный аспект: 

• Нулевой прототип — это эскиз, в котором быстро фиксируются идеи.
• Базовый прототип — это проработка основных механик работы приложения.
• Маркетинговый прототип — версия приложения с готовым дизайном.

Посмотрим, что происходит на каждом этапе.

Начало работы и эскиз 

На этой стадии формируется идея, которую UX-дизайнер оформляет самостоятельно или вместе с командой. Эскиз нужен, чтобы перенести концепцию приложения из головы на бумагу и выделить важные этапы работы:

• Прописать логику взаимодействия пользователя с интерфейсом. С логикой дизайнеру обычно помогают UX-исследователь и продакт-менеджер. Они прописывают маршруты пользователей, то есть последовательность элементов, с которыми люди взаимодействуют, и экранов, на которые они переходят. Такие маршруты называют Customer Journey Map (CJM), и дизайнеру важно уметь с ними работать.
• Выбрать подходящие решения и механики взаимодействия. Для этого можно почитать дайджесты с трендами в сфере UX/UI, посмотреть уже существующие аналоги приложений, выписать идеи и UX-решения, которые могут быть удачными для нового проекта.
• Рассчитать примерное количество экранов. Например, в стандартном приложении для записи на услуги основными экранами будут welcome-экран со спецпредложениями, экран регистрации, главная страница, карточки услуг, календарь для выбора удобной даты, а также экран для подтверждения успешной регистрации и экран ошибки:

Для создания эскизов UX-дизайнеру даже не обязательно уметь рисовать от руки. Ему важнее понимать, как ведет себя пользователь, что для него будет удобно, а что нет. Эскизы можно рисовать от руки или даже в Paint; гораздо важнее делать понятные для себя и для остальной команды пометки. Или можно найти специальные скетчпады для UX/UI-дизайнеров:

Базовый прототип

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

Figma — это бесплатная онлайн-платформа, в которой можно создавать дизайн-проекты интерфейсов и прототипы, организовать совместную работу с командой в режиме реального времени и оставлять комментарии друг для друга прямо в макете. У Figma есть веб-версия, поэтому открывать проект и вносить в него комментарии могут в том числе заказчики, у которых не установлено десктопное приложение.

Adobe XD — это инструмент из пакета Adobe для создания интерфейсов веб-сайтов, приложений и других ресурсов. Его главное конкурентное преимущество — облачная интеграция с другими приложениями Creative Cloud: можно рисовать иллюстрации в Illustrator, создавать анимации в After Effects и редактировать фото в Photoshop. 

Sketch — это графический редактор для macOS, он не отстает по функциональности от Figma или Adobe XD, а дизайнеры отдают ему предпочтение за удобство использования. Но в отличие от других инструментов, он несовместим с другими оперативными системами, поэтому коллегам на Windows и Linux для совместной работы потребуются программы Avocode или Zeplin, которые позволят открывать файлы Sketch.

Мобильные приложения должны решать проблему пользователя точно и оперативно, а для этого ему необходимо почти интуитивно ориентироваться в том, что и как работает. Поэтому Apple и Google, разработчики основных операционных систем для мобильных устройств, создали гайдлайны для разработчиков и UX/UI-дизайнеров, то есть набор рекомендаций и принципов разработки, которые помогают сделать приложения более единообразными.

Сориентироваться в правилах прототипирования мобильных приложений новичкам поможет Figma Community, где можно вбить в поисковой строке запрос prototype app и найти большое количество шаблонов разного уровня проработки:

Работу лучше выстраивать в несколько этапов:

• Шаг 1. Сначала реализовать основной флоу (flow) — то есть главный маршрут пользователя, то действие, ради которого он открывает приложение: пройти урок, купить товар, заказать услугу.
• Шаг 2. Дальше можно добавлять сопутствующие экраны: блок «О нас», «Афиша» и другие возможности, которые дополняют приложение.
• Шаг 3. После создания экранов и размещения элементов управления создаются связи между элементами и переходы между экранами.

Базовый прототип может не соответствовать дизайн-концепции готового продукта, в нем делается упор на функциональность, поэтому вместо контента используются заглушки вместо иллюстраций, шаблонные тексты и заголовки Lorem Ipsum, чтобы показать шрифты, не имея реального текста.

Добавляем детали

Дизайн-концепция формируется заранее, еще на этапе исследования аудитории. 

Дизайнер создает визуал, который должен решить две задачи:

1. Поможет пользователю наиболее эффективно использовать приложение.
2. Задаст нужную эстетику и вызовет эмоциональный отклик.

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

Признаком хорошего тона в современном UX/UI-дизайне является максимально детальная проработка прототипа, то есть в нем прорисованы все элементы и не должно быть заглушек. В том числе можно:

• добавить анимацию: загрузка контента, переходы между экранами, всплывающие окна;
• указать все состояния элементов: как будет выглядеть иконка после добавления элемента в избранное или кнопка после нажатия;

• показать путь пользователя: как работают жесты, кнопки навигации и так далее.

В итоге получится примерно такой прототип, в котором продуманы все пользовательские сценарии от регистрации и восстановления пароля до выбора локации и анкетирования. Его уже можно передавать разработчикам, и на практике у них почти не возникает вопросов по механике работы приложения, если прототип детально проработан. Также на нем можно проводить исследования с реальными пользователями и собирать отзывы.

{«id»:13958,»url»:»/distributions/13958/click?bit=1&hash=1653c54cdbeec930ff9a7c615ae67978f3e6ecc3d631904994eebf6038843032″,»title»:»u041bu0438u0447u043du044bu0439 u043eu043fu044bu0442: u00abu041cu044b u043eu0431u0440u0430u0431u0430u0442u044bu0432u0430u0435u043c u0437u0430u043au0430u0437u044b u0441 u201eu041cu0430u0440u043au0435u0442u0430u201c u043du0430 u0442u0435u043bu0435u0444u043eu043du0435u00bb»,»buttonText»:»u041au0430u043a u044du0442u043e?»,»imageUuid»:»691462d6-61d9-5119-8edb-356852492b15″}

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

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

---

---

“Переосмысление дизайна и разработки” — с таким лозунгом было представлено свежее обновление Figma 21 июня 2023 года на конференции Config 2023.

Hello, Dev Mode!

Dev Mode или режим разработчика позволяет по щелчку тумблера включить пространство, которое упрощает переход от проектирования к разработке.

Обновленный режим Inspect

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

При помощи таких плагинов как Anima и Figma to Code появилась возможность сразу получить код в разных вариациях:

• Стандартный HTML код;
• CSS стили;
• Код для TailwindCSS;
• Код для Flutter;
• Код для SwiftUI (среда для разработки на iOS, iPadOS, watchOS, tvOS и macOS от Apple);
• Код React (JSX);
• Код TypeScript (TSX)

Более того, готовый код можно сразу открыть в песочнице или скачать к себе на компьютер в виде архива, внутри которого лежит готовый темплейт. Нужно просто открыть его в своем редакторе кода.

Область применения и потенциал функции поражает, но не стоит поддаваться излишней радости (хотя и очень хочется), ведь Dev Mode находится в бете и работает не всегда корректно. Результат зачастую нужно редактировать, если не переделывать заново. Но потенциал огромен.

Функционал Dev Mode уже доступен всем желающим. Пощупать его можно в демо-файле.

Статусы

Статус показывает, какие кадры «готовы к разработке». Вдобавок появилась система контроля версий, благодаря которой можно видеть различия между измененными компонентами, а также кто и когда внес изменения.

Новый Auto Layout

Появились две функции: Wrap и Max/Min. Их принцип довольно прост. Wrap позволяет переносить элементы списка на следующую строку. Max/Min позволяет устанавливать максимальное/минимальное значение ширины/высоты родительского блока, а дочерние элементы будут подстраиваться автоматически. Пощупать функцию можно также в демке.

Наконец-то! Превью шрифтов!

Отсутствие превью бесило до коликов, но наконец-то появился предварительный просмотр шрифтов, улучшенный поиск и фильтры. Аллилуйя!

Плагин для VSCode

Figma для VS Code позволяет перемещаться по файлам дизайн-макета, просматривать их и отслеживать изменения — и все это, не выходя из текстового редактора.

Искусственный интеллект

Figma купила компанию Diaram и пообещала в ближайшее время поведать, как же все-таки AI будет интегрирован в программу. Но уже сейчас известно, что взаимодействие с нейросетью будет осуществляться посредством промптов.

Читайте также:

Как работает нейросеть Firefly в Photoshop? Фантастически!

«Туту.ру» сменил логотип: дизайнеры оценили и удивились

Все о типографике: откуда берутся шрифты и как их используют бренды

15 Дек 2022

6572

0

Далее текст от лица автора

Ошибка 1. Группы вместо фреймов

Я не разрешаю своим студентам* использовать группы. Почему? Фреймы лучше в 99% случаев, потому что в отличие от групп они позволяют применять такие функции Figma как автолейауты, привязки (constraints), компоненты, сетки и другие

*Примечание переводчика. Молли — создатель проекта UI Prep, в рамках которого она обучает UX/UI дизайну

Ошибка 2. Супер-пупер наборы компонентов

Дизайнерам нравится создавать универсальный набор компонентов со множеством вариантов и свойств. Но при работе над проектом разделение компонентов на типы/подтипы облегчает их поиск и использование. Например, вместо одного суперкомпонента для всех типов кнопок разбейте их на подтипы. Вы с лёгкостью найдёте их на панели Assets и быстро настроите.

Ошибка 3. Слишком большое количество цветовых стилей

Десять оттенков и тонов для каждого цвета — это излишество почти для любой дизайн-системы. Такое количество цветов может привести к путанице и их неправильному использованию. Вместо этого присвойте всем десяти оттенкам и тонам числовое обозначение. Затем создайте от одного до пяти стилей для самых важных из них.

Например, присвойте номера десяти оттенкам/тонам вашего основного цвета. Затем создайте стили для разных состояний этого цвета: 50 (фон), 600 (базовый/по умолчанию), 700 (при наведении), 800 (при нажатии).

Ошибка 4. Неправильное использование иконок

У иконок обманчивый вид. Они выглядят как безобидные маленькие компоненты, но при неправильной настройке могут создать проблемы.

Правила для иконок:

• Держите все векторные фигуры иконок в стандартных квадратных фреймах
• Убедитесь, что одна иконка — это один вектор
• Никогда не вращайте иконки для создания новых версий (например, стрелка влево/вправо)
• Объединяйте в варианты только те иконки, которые тесно связаны между собой

Ошибка 5. Видимость всех компонентов на панели Assets

Скройте некоторые компоненты на панели Assets. Для этого нужно добавить «.» или «_» в начало их названия. Это полезно только в случае атомарных компонентов, из которых состоят другие компоненты. Например, присвойте вложенным иконкам статуса для аватара наименование «.status», чтобы они не были видны на панели Assets и не загромождали её. И только полный компонент аватара отобразите на панели.

Ошибка 6. Использование жёлтого цвета в дизайне

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

Ошибка 7. Отсутствие описаний для стилей и компонентов

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

• знать, когда или где элемент должен использоваться (например, для основного цвета/700 напишите пояснение: «при наведении»)
• ключевые слова для поиска помогали быстро находить нужную информацию на панели Assets (например, для иконки сердца добавьте описание: «нравится, избранное, сохранить» («like, love, favorite, save»)).

Ошибка 8. Ориентация на размеры устройств, а не на брейкпоинты*

Figma предлагает размеры фреймов на основе общепринятой ширины устройств. Это нормально… но с точки зрения дизайна гораздо практичнее опираться на брейкпоинты! Используйте следующую ширину фреймов в макетах:

• Маленький: 375px
• Средний: 600px
• Большой: 900px
• Очень большой: 1200px

Подробнее читайте здесь.

*Примечание переводчика. Брейкпоинты — контрольные точки дизайна, которые дают возможность дизайнерам и разработчикам контролировать макет дизайна при его масштабировании из мобильной версии в десктопную. Они помогают адаптировать дизайн к устройствам любого размера без ущерба для UX

Ошибка 9. Использование автоматической высоты строки (интерлиньяжа) для текста

Автоматическая высота строки в Figma хорошо работает для многих текстовых стилей. Но вам не помешает немного её настроить.

Следуйте следующим рекомендациям по настройке интерлиньяжа:

1. Увеличьте расстояние между абзацами — задайте значение высоты строки, равное 150%
2. Уменьшите расстояние между заголовками и текстом — задайте значение высоты строки, равное 120%
3. Округлите все значения интерлиньяжа до ближайшего числа в 8px или в 4px. Это улучшит восприятие текста

Ошибка 10. Хранение стилей и компонентов в одном файле

Вы можете хранить стили и компоненты в одном файле, но это сделает вашу дизайн-систему менее гибкой. Такой подход затруднит работу над дизайном в нескольких направлениях (продукт + маркетинг) или процесс разработки нескольких тем (светлая + темная). Вместо этого храните все стили в одном файле, а все компоненты — в другом. Вы можете пойти ещё дальше и создать третий файл для хранения всех иконок.