Дизайн Татьяна Боброва
6592

Подборка: десять плагинов для графического редактора для совместной работы 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 и других.

#figma

{ "author_name": "Татьяна Боброва", "author_type": "editor", "tags": ["figma"], "comments": 49, "likes": 64, "favorites": 331, "is_advertisement": false, "subsite_label": "design", "id": 78040, "is_wide": false, "is_ugc": false, "date": "Sat, 03 Aug 2019 20:05:13 +0300" }
{"average":26348,"one":95,"ten":75}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 78040, "author_id": 283507, "diff_limit": 1000, "urls": {"diff":"\/comments\/78040\/get","add":"\/comments\/78040\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/78040"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
49 комментариев

Популярные

По порядку

Написать комментарий...
10

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

Ответить
3

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
6

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

Пчм? Полностью беспатная

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
0

А чем объяснить мотивацию создателей плагина, допустим, для VS Code? Или phpstorm? Или для остальной тысячи подобных приложений?

Ответить
2

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

+ при рендере гифки и ее экспорте часто выдает ошибку.

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
2

не скрою- старался не долго

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить
2

а как найти то?

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Анимацию в прототипе можно сделать, кто знает?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }