Как сделать скрин в фигме
Обновлено: 29.06.2024
Figma — программа, используемая дизайнерами для совместной работы над проектом.
Ещё некоторое время назад в Figma отсутствовали плагины (дополнительные инструменты), с помощью которых можно было бы оптимизировать работу. Но так было раньше. Сейчас можно выбрать наиболее полезные и популярные плагины. О них мы сегодня и поговорим.
Топ-64 популярных плагинов для Figma
Content Reel
Плагин, который входит в первую тройку полезности. Он закрывает все потребности, связанные с контентом. С его помощью можно наполнять текстовыми данными свой макет. Содержит более 100 видов текста, 100 вариантов заливки, библиотеки со значками Microsoft. А если не нашли нужных данных, то можно загрузить свой текст или изображение.
Wireframe
Autoflow
Плагин, который визуализирует связи между объектами. С его помощью можно соединить стрелками картинки, тем самым показать последовательность действий. Очень удобно, что в Autoflow при перемещении кадров перемещаются и сами стрелки. Все происходит автоматически.
Clay Mockups 3D
Плагин позволяет вставлять фреймы в мокапы устройств. Можно настроить цвет, угол камеры и модель девайса. Для работы необходимо поместить дизайн в макет устройства, чтобы он отобразился в нужном месте (сайте, портфолио и т.п).
Morph
С его помощью можно создавать оригинальные эффекты, что украсит ваш проект. Действия уже заложены в программе и ими можно пользоваться сразу же. Эффекты можно использовать по одному или в комбинации с другими. Morph поможет сэкономить ваше время.
Ваш Путь в IT начинается здесь
Подробнее
Image Tracer
Умеет переводить растр в вектор, создавать точную копию изображения в векторном виде. Отличный вариант, если нужно быстро удалить фон, отредактировать очертания, поменять цвет, задать обводку. Плагин выручит при создании иллюстраций, работы с логотипами и значками.
Datavizer
Плагин для создания гистограмм, линейных и точечных графиков. Для создания дашбордов — Datavizer просто незаменимая вещь. Если нужен точный график, то данные можно загрузить при помощи файлов CSV или JSON. Для демонстрационного графика, используемого как визуал, подойдет функция Use random data.
Blend
Плагин расставляет выбранный шейп по выбранному пути, т.е. размножает фигуру.
Coda for Figma
Этот плагин работает с Сoda — инструментом для создания документов. Возможно загружать данные с Gmail, Spotify, Wikipedia и т.д.
Хотите больше зарабатывать или работать удалённо? Запутались в разнообразии профессий и не знаете, куда двигаться?
Команда GeekBrains вместе с экспертами по построению карьеры подготовили документы, которые помогут найти и выбрать востребованную высокооплачиваемую профессию.
Скачивайте и используйте уже сегодня:
Каналы для поиска работы
Список из 26 ресурсов и 34 Telegram-каналов
Топ-30 самых востребованных и высокооплачиваемых профессий 2022
Рейтинг наиболее актуальных специальностей в 9 направлениях
Color Kit
Плагин позволяет генерировать различные оттенки выбранного цвета. Если раньше для этого использовали другие программы, то теперь получить десятки оттенков определенного цвета можно сразу в Figma.
Design Lint
Модуль находит недостающие стили на всех слоях проекта. Многие дизайнеры сталкиваются с такой проблемой, когда при сдаче макета обнаруживаются расхождения: не тот цвет, шрифт и т.п. Design Lint решит эту задачу, автоматически убрав несоответствия. При этом плагин учитывает исправления, внесенные дизайнером.
Figmotion
Инструмент для анимации, который выведет ваш проект на порядок выше. Можно создавать расширенные анимации непосредственно в Figma, не прибегая к сторонним программам. Плагином Figmotion легко пользоваться. Сделать картинку анимированной можно с помощью mp4, gif или экспортировать как CSS или JSON.
Table Generator
Плагин автоматизирует добавление различных табличных данных. Реальная помощь дизайнеру при работе с таблицами. Имеются стилевые настройки для ячеек.
Isometric
Простой, но функциональный плагин. Он создает изометрические слои. Пользоваться просто и легко: нужно выбрать слой, запустить плагин, указать угол и сторону вращения.
LilGrid
Модуль организует элементы в нужной сетке. Другими словами, наводит порядок в интерфейсе. Отличный инструмент для организации пространства. Он не меняет дизайн, только систематизирует элементы.
Color Blind
GIF Export
Плагин экспортирует гифку из фрейма. Удобно, когда редактор не поддерживает gif. Установив GIF Export, анимированные картинки можно экспортировать в гиф-файлы внутри Figma.
Dot Grid
Хороший помощник для создания красивых точечных сеток. Преобразить сетку можно различными инструментами: изменить цвет заливки и обводки, размеры, разрывы. Плагин заполнит пустоту внутри сетки.
Мы вместе с экспертами по построению карьеры подготовили документы, которые помогут не ошибиться с выбором и определить, какая профессия в IT подходит именно вам.
Благодаря этим гайдам 76% наших студентов смогли найти востребованную профессию своей мечты!
Скоро мы уберем их из открытого доступа, успейте скачать бесплатно:
Гайд по профессиям в IT
5 профессий с данными о навыках и средней заработной плате
100 тыс. руб за 100 дней с новой профессией
Список из 6 востребованных профессий с заработком от 100 тыс. руб
Все профессии, которые есть в IT-сфере
63 профессии и необходимые для них навыки
Критические ошибки, которые могут разрушить карьеру
Собрали 7 типичных ошибок. Их нужно избегать каждому!
Get Waves
Плагин генерирует SVG-волны, с его помощью вы можете создавать свои кривые и рандомизировать их.
Map Maker
Map Maker позволяет быстро создавать индивидуальную карту. На данный момент поддерживает Google Maps и Mapbox. Чтобы сгенерировать карту местности, достаточно ввести адрес в программе с предварительно установленным расширением Maker.
Motion
Ещё один плагин для создания анимации. Позволяет экспортировать свою анимацию любым способом: GIF, кадры, sprite 24/60 кадров в секунду.
BeatFlyer Lite
Плагин имеет платные варианты, но его бесплатной версии вполне достаточно, если умело использовать настройки. BeatFlyer Lite помогает анимировать изображение в несколько кликов. Движения можно добавлять независимыми слоями или комбинировать нужные эффекты.
TinyImage Compressor
С помощью программного модуля можно экспортировать ZIP-файл сжатых изображений JPG и PNG напрямую из Figma. Размер изображения уменьшается до 90% без потери качества. Однако TinyImage Compressor имеет ограничение на бесплатное сжатие файлов — до 15 штук. Но продвинутые дизайнеры отмечают отличную работу плагина, за которую не жалко заплатить.
Image tracer
Переводит черно-белые растровые картинки в вектор. Про иллюстратор теперь можно забыть. Плагин берет все выбранные слои и объединяет их в одно изображение, затем преобразует их в черно-белый векторный формат.
Oblique
Плагин дополняет векторные объекты третьим измерением. С помощью Oblique можно создать объемные сложные предметы (псевдо 3d, изометрия), в том числе и текст.
Halftones
Приложение добавляет точечные или полутоновые фильтры на изображение. Очень простой в использовании плагин.
Flipbook Animator GIF
Интересный плагин для анимации, который улучшит любой дизайн. Имеет множество функций, в том числе предварительный просмотр, изменение скорости анимации, инверсию, экспорт анимации в gif.
Chroma Colors
Создает стили цвета. Для работы нужно выбрать объект с заливкой и запустить плагин. Цветовые стили создаются автоматически. Нет нужды искать определенный цвет, можно просто выбрать из предложенных.
Movie Posters
Модуль добавляет случайный постер фильма, мультфильма, сериала, популярных на сегодняшний день. Плагин понравится тем, кто создает сайты и аналогичные площадки по кино.
Tumble
Spellchecker
Это плагин для работы с текстом. Распознает орфографические ошибки в тексте на русском, украинском и английском языках. В наличии сотни миллионов слов и готовых фраз. В этом ему помогает сервис Yandex API.Speller.
Tracking
С помощью плагина вы можете создавать, обновлять, добавлять аннотации отслеживания непосредственно из файла Figma.
Geometric
Модуль создаёт математические фигуры, кривые, различные элементы. С Geometric с лёгкость можно создать сложные узоры, например, спирали, астероиды, тригонометрические объекты и т.д. Математические фигуры периодически обновляются, разработчики планируют расширить их список.
Able – Friction free accessibility
Плагин сравнивает контраст между двумя слоями — минимизирует время и усилия дизайнера. Приложение можно оставить открытым и пользоваться по мере надобности, не нужно каждый раз его запускать.
Remove BG
Плагин в один клик поможет удалить фон у изображения. Быстрая и четкая работа Remove BG заменит необходимость пользоваться другими программами.
Contrast
Tailwind Color Generator
Программный модуль создает палитру стилей Tailwind-like из выбранного цвета. Обычно такая процедура занимает много времени, но благодаря Tailwind Color Generator основная часть работы делается автоматически. Из одного цвета плагин генерирует 10 оттенков (включая изначальный цвет). Полученные цветовые решения можно распределить на панели стилей.
Figmoji
Данный плагин добавляет эмодзи в формате svg. Пока поддерживается только Twitter Emojis.
Nisa Text Splitter
Очередной плагин-помощник для работы с текстами и списками. Он помогает разделить их на мелкие фрагменты (строки, столбцы, отдельные буквы). Сохраняет стиль после разделения текста.
Brandfetch
Плагин Brandfetch экономит время на поиски логотипа. Просто укажите ссылку на сайт и нужный логотип сразу подгрузится на Figma.
Unsplash
С помощью плагина можно вставить случайную картинку в свой проект или найти конкретную. Лицензия позволяет использовать изображения для коммерческих и личных целей.
Figma to HTML, CSS, React & more!
Данный программный модуль помогает конвертировать figma-дизайн в высококачественный адаптивный HTML, CSS, React, Vue и др., сохраняя все цвета.
Image Palette
Плагин извлекает пять самых ярких цветов из всей палитры выбранного изображения. Для этого используется специальный алгоритм, но он может показать необычные результаты: извлеченные цвета могут не соответствовать шестнадцатеричным кодам на картинке. Но, возможно, такой цвет вам и нужен.
Batch Styler
Когда нужно настроить одинаковый стиль для нескольких проектов, то данный плагин выручит. Он изменяет несколько текстовых стилей за раз, избавляя дизайнера редактировать каждый отдельно взятый текст.
Split Shape
Плагин разделяет текстовые слои, фреймы, фигуры на несколько составляющих. Полезная вещь для тех, кому нужно сгенерировать данные в определенном контейнере. Размер вычисляется автоматически.
Similayer
Font Scale
Плагин подойдет для новичков и тех дизайнеров, которые только нарабатывают навыки. Инструмент поможет быстро создать последовательную гармоничную иерархию типографики.
Avatars
Плагин добавляет случайные аватарки пользователей в заданную вами область. Форма может быть любая: квадрат, звезда, круг. Изображение будет выглядеть в виде заливки.
QR Code Generator
QR-коды часто используются в дизайне. Название плагина говорит само за себя — он помогает быстро создать или вставить векторный QR-код.
Change Text
Hidden Kitten
Котята давно в тренде, и данный плагин может вставить случайного котика в ваш проект, придав ему эмоциональности. Эти милые животные знают толк в дизайне, запустив плагин они будут появляться в случайном месте выбранного вами фрейма.
Blobs
Нужны уникальные каплевидные формы или абстрактные обтекаемые элементы? Blobs поможет вам их создать.
Appearance
С этим плагином вы можете сделать темную/светлую тему.
Icon Resizer
Делает иконки одного размера в квадратной рамке. Нужно выбрать один или несколько фреймов, затем настроить картинку и размер рамки. Благодаря Icon Resizer не нужно вручную настраивать размеры иконок, приводить все к единому стилю, выравнивать изображение по центру. Пара движений мышкой и все готово!
Style Organizer
TinyImage Compressor
Данный плагин понадобится для того, чтобы экспортировать готовый проект из Figma. Если объемы файлов достаточно большие, то они увеличивают время экспорта, а TinyImage Compressor сжимает размеры до 90 %, сохраняя исходное качество. Плагин поддерживает файлы jpg, png, gif и другие.
Iconify
Импортировать иконки в Figma поможет плагин Iconify. Возможно, кому-то он не очень подходит, но это оптимальный бесплатный ресурс. Он содержит более 40000 различных иконок из Material-design, Jam Icons, EmojiOne, Twitter Emoji и других библиотек. Импорт идет в виде векторных фигур.
Status Annotations
Плагин облегчает взаимодействие с командой. Он помогает быстро отобразить статус вашего проекта.
Notepad
Это своего рода блокнот для заметок. В Notepad можно делать записи и просматривать их по ходу работы над макетами. Заметки сохраняются автоматически и их можно смотреть везде, где вы используете Figma.
Charts
Если нужно создать графики и диаграммы, то вам поможет этот плагин. Он использует случайные или реальные данные, поддерживает копирование-вставку из Excel, Numbers, Google Sheets.
Если вы работаете на относительно новом Маке, вы возможно замечали, что Фигма не всегда правильно показывает цвета. Давайте это исправим.
У владельцев старых Маков такой проблемы нет, но прочитать пост все равно стоит — рано или поздно с переходом на новый компьютер вас это тоже коснется :)
Какие устройства это затрагивает:
- MacBook Pro 2016 года и новее…
- iMac конца 2015 года и новее…
Если раньше в Фигме с расхождением цветов ничего нельзя было поделать, то весной 2019 года в десктопном приложении Фигмы появился выбор цветового пространства.
- Графика в Фигме отображается по большей части перенасыщенной.
- Вставленные картинки из интернета тоже слишком цветастые (для интернета, программ и операционных систем дефолтная среда — sRGB).
- У всех участников команды и между устройствами цвета будут различаться. Ребята на Windows и старых Маках (и даже на новых MacBook Air) не оценят ваши сочные цвета, ведь подавляющая часть экранов расчитана именно на отображение sRGB.
- Фигма все равно экспортирует картинки только в sRGB (пруф из справки Фигмы).
- Фигма все равно в браузере работает только в sRGB, и когда заказчик откроет ваш дизайн в браузере, он увидет не те цвета, что вы задумывали.
Фигма при вставке картинок с отличающимся цветовым профилем никак не отрабатывает этот момент, хотя могла бы (серьезные графические редакторы предупреждают и могут конвертировать вставляемые картинки под нужное цветовое пространство).
Есть несколько вариантов, как решить эту проблему.
Самый быстрый и удобный способ. Я сделал скрипт в Автоматоре, который конвертирует картинки в sRGB в два клика силами самой macOS.
Разархивируйте файлик и кликните по нему для установки.
Активируется через правый клик по картинке → Быстрые действия (Quick Actions) → sRGB.
Что самое крутое — можно выделить пачку скриншотов и все разом сконвертировать в sRGB.
О завершении конвертации можно понять по мигнувшей шестеренке в верхней панели рядом с часами:
Все, можно вставлять скриншот в Фигму с нормальными цветами!
Если не хочется ставить скрипт, или под рукой нет полноценного граф.редактора, это тоже хороший способ.
Когда я устал конвертировать скриншоты в неповоротливом Фотошопе, я заметил, что картинку можно открыть в стандартной маковской утилите ColorSync, которую вы наверное запускали один раз в жизни, думая, что она для калибровки монитора (я тоже так думал).
Оказалось, что в ней можно конвертировать цветовой профиль картинки, и относительно быстро.
Правый клик по картинке → Открыть в программе → Утилита ColorSync.app
Не так быстро как со скриптом, и без возможности проделать на пачке картинок, зато эта стандартная утилита есть у всех.
Вообще, по логике такое действие напрашивается делать в стандартном просмотрщике Preview.app, но он почему-то не умеет конвертировать профиль, только применять поверх другой, а это совсем не то.
Вариант-смекалочка — дурацкий, но работающий. Годится, если предстоит сделать пачку скриншотов, а скрипта или граф.редактора под рукой опять же нет.
Кстати, профиль sRGB IEC61966–2.1 в списках обычно дублируется, потому что один идет в комплекте с macOS, а второй прилетает с программами Adobe.
- Конвертировать скриншоты в другом граф.редакторе, просмотрщике или пакетном обработчике (тут на ваш вкус).
- Прогонять через оптимизаторы картинок типа ImageOptim (долго, и может сломать цвета).
- Заставить Мак снимать скриншоты в sRGB, покопавшись в Терминале (не факт, что возможно).
- Найти скриншотилку, которая сразу конвертирует скрины в sRGB (знаете такую?).
Мы привели Фигму в проверенное цветовое пространство и научились обходить проблему бледных скриншотов на новых Маках, о которой почему-то не позаботились разработчики Фигмы.
Фигма позволяет форматировать фоновое изображение несколькими способами.
Изображение может служить фоном для любой векторной фигуры: текста, прямоугольника и так далее.
В Фигме для фонового изображения есть несколько режимов позиционирования:
Fill — Фигма впишет изображение в фигуру так, чтобы она полностью заполнила вектор, но при этом будет наименьший из возможных масштабов.
Изображение в Figma — FILL
Применяя Fill, вы можете рассчитывать, что на итоговом изображении будет наибольшая часть фонового изображения, с учетом пропорций заливаемого объекта. Используется по умолчанию.
Fit — Фигма впишет изображение полностью в рамки родителя. Если из пропорции не совпадают точно, останутся пустые места.
Изображение в Figma — FIT
Стоит использовать, когда потеря даже небольшой видимой части недопустима.
Crop — позволяет вручную выбрать часть фона, которая будет отображаться. Обратите внимание, что растягивать фон надо за тонкую рамку фона, а не за синие ползунки — они регулируют размеры родителя.
Изображение в Figma — CROP
Tile — Фигма впишет фон в 100% размере.
Изображение в Figma — TILE
Для сложной заливки также возможно использовать возможности маски.
Для быстрого подбора изображений можно использовать плагин Unsplash.
Обратите внимание, что одну фигуру можно залить несколькими изображениями и указать для них различную прозрачность. Нажмите на + в области с фоном, чтобы добавить новый фон.
Будем благодарны за любые комментарии и дополнения
В данном посте я хочу показать процесс создания макета главной страницы приложения на примере переноса существующей страницы для мобильного банка. В качестве шаблона я взял скрин приложения определенного мобильного банка, дизайн которого мы попробуем перенести, параллельно используя различные функции / команды программы Figma. Давайте начнем!
Наш макет
Этапы нашей работы:
1. Для начала откроем программу Figma на компьютере или в браузере. Этап установки, регистрации и других подготовительных этапов я опущу, но если кому то это будет интересно, то я оставлю ссылку на официальный сайт данной программы Figma, где вам все поэтапно покажут. Я буду работать в настольной figma - мне так удобней.
2. Создаем новый проект (1). Далее дадим нашему проекту какое-нибудь название. Я его назову просто “Проект”.
(1) Нажатие на плюсик создает новый проект. 1. Раскрыть список; 2. Нажимаем кнопку Rename - “Переименовать”.
3. Теперь нам нужно определить размер рабочей области, ну или как говорят - разрешение экрана. Сейчас на руках у меня есть скрин интерфейса определенного размера (224х431 px). По желанию можно было бы увеличить рабочую область (если бы вы делали дизайн для определенной модели телефона), но сейчас я сделаю рабочую область по размеру скрина.
Для того, чтобы добавить рабочую область (Рамка / Frame) можно использовать горячую клавишу F, ну или пройти до кнопки (скрин внизу). Далее с помощью мыши или меню объекта нашей рамки справа мы задаем размер нашей рамки - 224х431px.
(2)
4. Разместим наш скрин таким образом. Обратите внимание на панель слева Layers. Важно, чтобы image был вне папки Frame.
5. Начинаем непосредственно работу. Основную рабочую область делаем с помощью кнопки “Прямоугольник” (Горячая клавиша R). На скрине мы видим некую структуру - это определенное количество прямоугольников различных цветов. Создаем прямоугольники определенных размеров (механика простановки размеров такая же, как и в Frame - в п.4). Затем в меню элемента каждого прямоугольника изменяем цвет. Затем делаем фон, как на скрине. Исходя из структуры, для этого нам понадобится 7 прямоугольников, расположенных в определенном порядке.
Прямоугольник - Rectangle Основная структура фона изображения Если у вас есть изображение, то с помощью пипетки можно скопировать цвет его определенного элемента / пикселя. Выбираем нужный нам элемент изображения (исходя из выбранного нами прямоугольника) и копируем его.
Вот что у меня получилось в итоге:
6. Добавляем кнопки с помощью команды Rectangle (R) и команды Text (T). Также проставляем везде текст, примерно как на скрине. При нажатии на текст, справа появляются его настройки, где можно менять все от цвета до толщины букв.
Заодно добавляю круги с помощью команды Круг (Ellipse / O).
У меня получилось так:
7. следующим этапом приступаю к созданию непосредственно самих иконок. Большая их часть рисуется самостоятельно с помощью векторных объектов (прямоугольник, круг, перо). Если вы работали в программах Adobe Illustrator или Adobe Photoshop, то принцип работы в них один и тот же. Наберите в интернете как рисуются иконки в данных программах и те же принципы вы можете применить и в своей работе тут.
Также фигма поддерживает вставки векторных объектов svg. Я сам использую всегда данный формат в работе, вместо png картинок, так как вы можете экспортировать данные иконки из макета во время верстки, и перенос в рабочее пространство figma никак не отразится на иконке. Это очень удобно для верстальщиков, которые берут дизайн в продакшн.
Более подробно с этим этапом можно ознакомится, перейдя по ссылке на официальный сайт программы Figma.
Вот что вышло у меня:
Вот такой у меня получился результат!
Читайте также: