30+ полезных плагинов для Figma необходимых UX дизайнеру

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

  • К конструктору написали Гайд с правилами использования.
  • Их возможности позволяют создать прототип сайта без излишних подробностей для стартовой презентации клиенту.
  • Чуть позже Adobe представили свой редактор интерфейсов XD, чтобы занять место в конкурентной нише, а в 2016 году появилась Figma.
  • В Фигме можно отрисовать элементы интерфейса, создать интерактивный прототип сайта и приложения, иллюстрации, векторную графику.
  • Вы легко сможете восстановить резервную копию вашей работы.

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

Хотели когда-нибудь повторно использовать те же компоненты (не меняя оригинал) или сделать несколько их вариантов? В Component Cloner можно выбрать экземпляры, которые хотите переиспользовать, и они будут привязаны к новой копии оригинального компонента. Предлагает большой список цветовых палитр, которые можно вставить в дизайн-проект. Также плагин будет полезен, если нужно найти код любимого цвета, номер или название палитры. Able помогает дизайнерам позаботиться о доступности и требует минимум усилий. Откройте плагин и он автоматически сравнит контраст между двумя выбранными слоями.

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

Наш ТОП-15 простых и полезных плагинов Figma

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

лайфхаки в Figma для дизайнера

Чтобы не терять целую минуту на такое простое действие, пользуйтесь клавишами с цифрами от 1 до 0. Чтобы задать точное значение, быстро нажмите две любые цифры. Например, если нажать на 4 и 9, то непрозрачность слоя будет 49%.

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

Свернуть вложенные фреймы и группы

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

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

лайфхаки в Figma для дизайнера

Графический редактор сам всё посчитает, и свойства объекта тут же изменятся. При работе с цветом иногда важно подобрать очень точные настройки каналов RGB. В таком случае приходится использовать ручной перебор значений, а это не очень продуктивно. Чтобы ускорить эту работу, выберите нужное значение цвета, нажимайте стрелку вверх или вниз, и выбранное значение будет меняться на1, а если при этом зажать Shift— то на10. Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Figma проигрывает редакторам Adobe по количеству функций, поэтому иногда стоит совмещать в работе несколько программ. Например, если вы привыкли создавать векторные объекты в Adobe Illustrator, их можно легко импортировать в Figma. Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе.

Бесплатный курс «Figma: лайфхаки быстрой работы дизайнера» от Нетологии

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

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

плагинов Figma, которые должны быть у каждого дизайнера

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

Легко вставляйте изображения внутрь фигур-плейсхолдеров

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

Нарисовать симметричные иконки в два раза быстрее

Такие тарифы выгодны большим командам, но для начала карьеры в дизайне или индивидуальной работы подписка зачастую не нужна. В 2010 году, за несколько лет до Figma, на рынке появился Sketch. Этот редактор создали специально для проектирования интерфейсов, и в нем не было лишних инструментов и перегруженности. Установить его могли только пользователи macOS, но, тем не менее, Sketch очень быстро стал отраслевым трендом. Figma – это онлайн-редактор с функциями для командной работы.

Удобно, если в проекте нужны картинки, а авторского контента нет. И экономит время в несколько раз, когда нет даже лишней минуты на поиски, сохранение и загрузку фото в проект. Colour compass – подбор цветовой палитры к определенному цвету, очень удобно для новичков в вопросах колористики.

Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width). Иногда эту проблему можно решить, выбрав элемент отсчета, а затем с зажатой клавишей Alt нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.

Плагины Chart и Charts позволяют генерировать диаграммы по заданным значениям. Мы часто используем на стадии прототипирования, когда нужно быстро показать https://deveducation.com/ экран с графиком клиенту или команде для лучшего понимания работы интерфейса. Крутой плагин, который позволяет быстро удалить фон у изображения.

Если бы каждого персонажа отрисовывал вручную дизайнер, это занимало бы от получаса до нескольких часов. Если не залипнет в подборе причесок, нарядов, выражений лица. Помните, каждый новый фрагмент должен совпадать по расположению с предыдущими. Лично мне удобнее рисовать новые элементы прямо Figma для дизайнера на месте их будущего расположения, заимствуя размеры фрейма у уже имеющегося элемента. Если макет готов уже наполовину, а вы вдруг поняли, что не используете стили, это можно быстро исправить. Для этого нажмите на иконку и в выпадающем меню перейдите в пункт Edit → Select all with same.

В подборке — 6 уроков, которые рассчитаны на дизайнеров, которые уже не первый раз открывают Figma. Вы узнаете, как работать с инструментом Auto Layout, удалять плагины и виджеты. Автор расскажет, как создается микроанимация карт и какие инструменты могут понадобится для секций и разметки текста. Проверьте, как адаптируется ваш дизайн для мобильных телефонов.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.