Подборка: десять плагинов для графического редактора для совместной работы Figma Статьи редакции

Сейчас пользователям доступно более 50 инструментов.

С 1 августа 2019 года пользователи графического редактора для совместной работы Figma могут использовать уже разработанные и создавать собственные плагины.

Процесс установки плагина Figma

Бета-тестирование платформы проводилось с начала июня 2019 года — сейчас на Figma доступно более 50 плагинов. Редакция vc.ru выбрала десять инструментов для упрощения работы.

  • Unsplash (от Unsplash) — плагин позволяет за пару кликов добавить в макет картинку из фотостока Unsplash. Сейчас его уже скачали около 13 тысяч раз.
Пример работы Unsplash
  • Charts (от Sam Mason de Caires) — с помощью плагина пользователи могут быстро собрать инфографику прямо в Figma.
  • Autoflow (от Coinbase) — позволяет строить пользовательские сценарии. Для этого достаточно выбрать два объекта и нажать на «горячую клавишу».
  • Mapsicle (от Chris Arvin) — благодаря плагину пользователю не придётся делать скриншот карты для добавления его в макет. Сервис использует онлайн-карты Mapbox.
Пример работы с Mapsicle
  • Figmotion (от Liam Martens) — инструмент для создания простых анимаций в Figma. По словам разработчика, плагин позволит отказаться от сторонних инструментов, например, Principle, Haiku или After Effects.
  • Content Reel (от Microsoft) — позволяет пользователю находить релевантный контент и заполнять макет текстом, аватарами пользователей, иконками.
Пример работы Content Reel
  • Google Sheets Sync (от David Williames) — плагин для интеграции с таблицами Google Sheets. Инструмент позволяет быстро заполнить макет реальными данными и проверить, всё ли в порядке.
  • Table Generator (от Zwattic) — инструмент для создания таблиц.
  • Bullets (от Mirko Santangelo) — инструмент для создания нумерованных и ненумерованных списков.
  • Iconify (от Vjacheslav Trushkin) — коллекция из более чем 40 тысяч иконок от Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и других.
0
50 комментариев
Написать комментарий...
focs

Платформа отличная. Модерируется Фигмой в полноценном разделе. Устанавливаются плагины в один клик и доступны сразу на всех устройствах. Ничего не подвисает при большом количестве плагинов (пока), в отличии от Скетча.

Ответить
Развернуть ветку
Alexsander Yarov

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

Ответить
Развернуть ветку
Anton Smets

Аналогично :) на чём учитесь?

Ответить
Развернуть ветку
Alexsander Yarov

Метод тыка и смотрю видео уроки. Правда там все так быстро :) НО это все лирика. Что бы хорошо закрепить знания и получить навык, надо самому например придумать кейс и его запилить. И по мере его выполнения, когда сталкиваешься с трудностями, искать инфу как решить. Тогда запомнишь навсегда как это делается. Считаю такой подход максимально эффективным. Иначе эти уроки можно смотреть очень долго пока не запомнишь. А время деньги.

Ответить
Развернуть ветку
Anton Smets

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

Ответить
Развернуть ветку
Alexsander Yarov

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

Ответить
Развернуть ветку
Anton Smets

Вот этот https://www.udemy.com/learn-figma/
Правда я его скачал бесплатно у добрых людей 😁

Ответить
Развернуть ветку
Alexsander Yarov

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

Ответить
Развернуть ветку
Станислав Тюрин

Я люблю тебя, Фигма.

Ответить
Развернуть ветку
Владимир Костюхин

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

Ответить
Развернуть ветку
Useforlogin

А мотивация опен-сорс разработчиков вам понятна?

Ответить
Развернуть ветку
Владимир Костюхин

Фигма это не оупен сорс проект, поэтому тут мотивация непонятна

Ответить
Развернуть ветку
S.Z

Скайрим тоже не опенсорс, но почему тогда столько модов?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Саша Савицкий

Наверное так будет только на первоначальных порах ?

Ответить
Развернуть ветку
Владимир Костюхин

Они сказали, что в планах нет поддержки платного апи

Ответить
Развернуть ветку
Eugene Podosenov

Личный интерес плюс расширение портфолио

Ответить
Развернуть ветку
Макс Шпак

Там уже есть платные плагины. В описании написано, что бесплатно только до конца года, а потом $10

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Станислав Тюрин

Очень круто! Но вот, кстати, плагин Figmotion (анимация) мне показался не понятным совсем. На замену Principle и тд, по-моему, не тянет. Хотя надо разбираться, конечно. Вообще, если будет полноценный плагин или встроенное решение продвинутой анимации в Фигме, я буду бескопромисно счастлив.

Ответить
Развернуть ветку
Dmitry Mezenin

Есть подозрение, что Figma сама скоро к этому придёт, без плагинов.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alexsander Yarov

кстати, делал рендер в гиф, он куда то сохранил, не пойми куда. В подсказке пишется что сохраняется где то на сервере. Где искать рендер? Не подскажите?

Ответить
Развернуть ветку
Вячеслав Соломатов

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

Ответить
Развернуть ветку
focs

А какого функционала не хватает, чтобы полноценно переехать со Скетча?

Ответить
Развернуть ветку
Вячеслав Соломатов

ну например хорошей библиотеки, с переменными, посмотрите как в Sketch они организуются, их можно строить: любой кнопке/иконке придать разные варианты как в самой библиотеке: прописать их названия используя "/", как например Bttn_Cancel/Anable и Bttn_Cancel/Disable будет задано одной кнопке с двумя состояниями, их можно быстро заменять между собой. не прибегая к перетаскиванию-позиционированию просто replace в правом свитке/контекстном меню, почти как в Идеальном (имею в виду Adobe Illustrator там тоже библиотека мощная), так и на холсте заменяя переменные (текст, стили графики)-библиотечный вариант остается нетронутым. Фигма импортирует все это из скетча без проблем, но вот в самой создать подобное, я не смог. не скрою- старался не долго: не вышло и все. ну и некторые подобные же, назовем как: "страхи"-не прозрачен ввод текста в библиотечные экземпляры ( вдруг поменяется везде? как это реализовано в Аи) или стили графики? где я могу их организовать/посмотреть /отредактировать. в Идеальном я могу все, но в нем файл тяжеловат получается, в скетче я могу почти все : рисует он сравнительно дерьмово-но рисует!, а в фигме я вижу только один плюс- расшаривание документа, но Скетч уже наступает на пятки и тут. В общем кто с хорошими знаниями Аи -тому в Скетче удобней-все организовано почти так же. А кто не не привык к такому -Фигма отличный инструмент! Сорян за лонг-рид, хотел обстоятельно ответить, чем Фигма уступает Скетч.

Ответить
Развернуть ветку
focs
не скрою- старался не долго

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

На самом деле переубеждать не буду, но компоненты в Фигме, в разы функциональней, чем символы в Скетче. Хотя бы потому, что их можно модифицировать вне библиотеки: менять вложенные текстовые стили, цвета, эффекты. А если требуется сохранить наследование каких-либо измененных стилей, то через «Reset ..» сбрасывается любой из атрибутов. В этом случае вложенность компонентов в друг-друга используется в полную силу. Например у вас есть базовый компонент .button (кнопка), из которого идет 2 кнопки состояний: Button / Hover и Disabled. Размеры шрифта и кнопок вы контролируете в .button, а цвет состояния и текста — в Hover и Disabled. В Скетче вложенность посредственная. Только текст и тень. Ничего подобного не реализовать.

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

Ответить
Развернуть ветку
Вячеслав Соломатов

спасибо! буду пробовать. на кошках=))

Ответить
Развернуть ветку
Andrey Evdokimov

что насчет autolayout ?

Ответить
Развернуть ветку
Anton Smets

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

Ответить
Развернуть ветку
Илья Меджидов

Как накопите на sketchpapp, захлебнетесь воздухом =)

Ответить
Развернуть ветку
Александр Полторацкий

Чем же сейчас скетч удобнее фигмы?)

Ответить
Развернуть ветку
Вячеслав Соломатов

попробуйте и поймете. он без плагинов уиеет создавать то что тут на плагинах- например вариативные библиотеки/стили и прочее-можно удобно организовать. с переменными данными! а не просто статика. ну и еще много приятных вещей

Ответить
Развернуть ветку
Viacheslav Moroz

Для анимаций интерфейса есть малоизвестный, но очень мощный инструмент Drama, с очень классным ui и богатыми возможностями. Вот он может заменить ae, а figmotion разве что позволит сделать базовые перемещения и трансформации.

Ответить
Развернуть ветку
Станислав Тюрин

Есть ссылка на него? А если найду

Ответить
Развернуть ветку
Viacheslav Moroz

Пожалуйста - https://www.drama.app/beta

Ответить
Развернуть ветку
Станислав Тюрин

Спасибо!

Ответить
Развернуть ветку
D.S

Опять только под Мак.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Станислав Тюрин

Рилток

Ответить
Развернуть ветку
Viacheslav Moroz

Тысяча извинений
https://www.drama.app/beta

Ответить
Развернуть ветку
Viacheslav Moroz

Советую заварить чашечку чая и просмотреть все туториалы от создателей. (может час в сумме).

Ответить
Развернуть ветку
John Lock

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
John Lock

О, мерси! Читал в сети что у них с этим проблема, теперь попробую :)

Ответить
Развернуть ветку
Roman Sergeevich

Спасибо за обзор.
Плагины видел, но руки до них ещё не дошли.

Ответить
Развернуть ветку
Александр

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

Ответить
Развернуть ветку
Vlad Makarov

Плагины с анимацией очень полезные, давно ждал

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
47 комментариев
Раскрывать всегда