Эффект металла в фигме

Обновлено: 11.05.2024

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

Статья будет полезна как новичкам, так и уже опытным пользователям.

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

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

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

Ниже несколько примеров такой структуры.

С помощью эмодзи 🟢 или 🟠 можно отмечать степень готовности раздела для передачи в разработку.

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

Мы меняем пустое состояние инпута на состояние фокуса, лейбл «Address» переезжает на верх инпута и сохраняет название, а не сбрасывает его на дефолтное

Чтобы так работало, слои текстовых элементов должны быть названы одинаково, например, Title и Title, как в примере ниже.

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

Можно в два клика найти на странице все элементы с похожими свойствами, например, заливкой, обводкой или шрифтом. Для этого нужно выделить элемент, нажать системный Edit > Select All with the Same… и выбрать, с каким конкретно свойством выделить элементы.

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

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

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

Для этого нужно:

  1. скопировать мастер-компонент в нужный файл;
  2. присоединить этот файл в качестве библиотеки к текущему;
  3. выбрать любой экземпляр старого мастер-компонента;
  4. нажать Edit > Select All with the Same Instance;
  5. через меню Instance на панели инструментов заменить выделенные экземпляры на новый компонент;
  6. Готово! Осталось просмотреть все экземпляры на предмет слетевших текстов и стилей, а чтобы тексты при замене компонента сохранялись, называйте одинаково слои на двух связанных компонентах (об этом мы писали выше).

По такому же принципу можно перенести из одного файла в другой цветовые и текстовые стили. Для цветовых стилей также можно использовать плагин Style Organizer или его аналог.

Если список сделать автолейаутом, то работать с ним становится гораздо удобнее: можно быстро увеличить количество строк через Cmd+D или удалить строки из середины списка, при этом отступы между элементами сохранятся.

10 хитростей Figma, которые я хотел бы знать раньше

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

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

1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни

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

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

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

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

3. Перетаскивайте объекты за пределы фрейма, удерживая их внутри контейнера

Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.

4. Приведите сетку в порядок

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

5. Продублируйте последнее действие

Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.

6. Предварительно просмотрите цвет с помощью пипетки

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

7. CMD + / разблокировать все объекты

Сочетание клавиш СMD + / имеет массу полезных быстрых действий, которые помогут в рабочем процессе и позволят сэкономить массу времени. Если вы еще не используете его, я настоятельно рекомендую посмотреть, какие действия доступны в меню. Действие, которое я часто использую – это быстрая разблокировка всех объектов и изменение шрифтов.

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

Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.

9. Другие приемы с пробелом

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

Если вы рисуете фигуру, вы также можете удерживать пробел, чтобы переместить объект во время его создания.

А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!

10. Content Reel + Unsplash

Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.

Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!

10 топовых плагинов Figma, о которых вы не знали

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

Волны в СВГ

Get Waves - это бесплатный генератор уникальных волн SVG для вашего дизайна. Эти волны легко настраиваются и кастомизируются в пару кликов, поэтому, создавать их будет достаточно просто.

Графики по вашим данным

Chart - это плагин для Figma, который использует реальные или случайные данные для создания самых популярных диаграмм. Chart поддерживает копирование и вставку из таких редакторов, как Excel, Numbers, Google Sheets, прямое соединение с Google Sheets и удаленный JSON (REST API), локальные файлы CSV и JSON.

Картинки в изометрии

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

Делает из любых объектов и даже фото палитру цветов

Palette поможет вам создать идеальную цветовую палитру с помощью машинного обучения от Colormind.

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

Онлайн мокапы

С этим плагином вы сможете создавать мокапы прямо в Figma. В библиотеке есть тысячи качественных макетов Artboard Studio. С легкостью сможете преобразовать кадры Figma в макеты реальных продуктов одним нажатием кнопки. Каждый день библиотека пополняется новыми элементами.

Делает паттерны по сетке из ваших элементов

Pattern Hero позволяет размещать выбранные элементы или кадры в сетке для создания узоров. Такая фишка может помочь при создании паттерна для брендинга компании. Можно поэкспериментировать с различными комбинациями и сделать свой уникальный паттерн.

Проверка орфографии

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

Добавляет разные стили к объектам

С помощью этого плагина вы сможете создавать классные эффекты, такие как Skeuomorph, Neon, Glitch, Reflection, Glass и т.д. Настраивается это все достаточно просто, прямо в Figma.

Рандомные кляксы

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

Направляет текст в различные линии и формы

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

Кстати, есть Телеграм-канал, где можно найти дизайн-плюшки 👇🏻

❤ Если тебе понравилась статья то поддержи ее лайком, а я продолжу делиться полезным о дизайне :)

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

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

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

Если запретить людям так себя монетизировать, то в будущем мы будем видеть посты:
1. От любителей, которым все равно на то, что они пишут
2. От Бизнесов, которые будут писать предвзятые статьи, чтобы продвигать бренд
3. От штатных журналистов vc, либо журналистов других изданий, чьё мнение можно купить

БОльшую часть пользы на vc я получаю от независимых писателей/блогеров, которые оставляют ссылки на свой телеграм. Если мне пост не понравился, то я не подписываюсь, если понравился, то я подпишусь на его канал и буду за ним следить. У меня есть выбор. При этом такая реклама ненавязчива, как на Инстаграм или ютуб.

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