Дизайн
a.timohov
6090

Плагины Figma, которые заменяют сторонние приложения: часть третья

Первая часть, вторая часть, предыдущая статья.

В закладки

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

Angle Mockups — библиотека мокапов в изометрии.

Video Cover — вставляет обложку видео из YouTube и Vimeo.

Figmotion — плагин для микро-анимаций.

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

Lorem Ipsum Generator/Lorem ipsum/Fish Text — генераторы рыбьего текста.

Shadow Picker — создаёт различные тени для объектов.

iOS Export Settings — применяет правильные настройки экспорта для каждого необходимого размера и плотности иконок приложения для iOS.

iospngexporter — устанавливает настройки для экспорта PNG иконок под iOS устройства.

Deep Focus — позволяет слушать музыку/видео из YouTube.

Masker — чистые мокапы iPhone X, iPhone 8, iPhone 8 Plus, Google Pixel 2XL, Google Pixel 2.

CSSGen — генерирует CSS препроцессоры SASS / LESS из стилей Фигмы.

Latex Editor — позволяет вставлять математические уравнения.

Squiggly — генерирует загогулины.

А на этом третья часть подходит к концу. Жду ваши пожелания в комментариях по поводу того, какие плагины вы бы хотели видеть (тематика, сфера использования). До скорых встреч!

Уведомления о новых статьях, новости, анонсы и всё, что связано со мной, как с автором на vc.ru, публикую в Telegram-канале. Жду всех, кому интересен мой контент.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "a.timohov", "author_type": "self", "tags": [], "comments": 47, "likes": 69, "favorites": 423, "is_advertisement": false, "subsite_label": "design", "id": 96335, "is_wide": false, "is_ugc": true, "date": "Sun, 08 Dec 2019 09:10:48 +0300", "is_special": false }
0
{ "id": 96335, "author_id": 379652, "diff_limit": 1000, "urls": {"diff":"\/comments\/96335\/get","add":"\/comments\/96335\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/96335"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
47 комментариев
Популярные
По порядку
Написать комментарий...
8

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

Скрин:

Ответить
–1

Бессмысленный выебон какой-то а не тень. Оттенок тени зависит от света и цвета поверхности, на которую она падает, а не от цвета предмета, который тень отбрасывает.

Ответить
8

это не бессмысленный выебон, а мода и тренды. Им иногда стОит следовать, чтобы продавать. Вот критиковать в отрыве от контекста или вовсе не понимая предмет - это я понимаю выебон :P

Ответить
1

Тренды штука хорошая, но им не стоит слепо поклоняться. По крайней мере стоит понять как и почему это работает. Беханс и Дрибл завалены красивыми и абсолютно бесполезными трендовыми работами, сделанными в полном отрыве от реального мира.

Ответить
5

Если, конечно, предмет, который отбрасывает тень, не прозрачный, забыли добавить Вы :)

Ответить
0

Хорошее дополнение, спасибо! Но если бы кнопка из примера была задумана полупрозрачной, то к автору макета возникли бы дополнительные вопросы. Например, почему тогда тень не просматривается через полупрозрачный материал?

Ответить
0

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

Ответить
0

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

Ответить
8

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

Ответить
1

Это да. 

Ответить
1

да не только к вебу. был концепт макбука от художника с КРУГЛЫМИ шифтом и энтером, и без option/alt

Ответить
1

я вот про линейку тоже всегда вспоминаю. металлическую...

Ответить
0

этохудожники — не дизайнеры

Ответить
0

Тень может зависеть от цвета предмета, если надо передать его температуру (красный - горячий, синий - холодный) или придать предмету неоновое свечение

Ответить
4

Такие тени дизайнеры рисуют из-за того что в фигме нет возможности задать тени значение spread как в скетче.  а так тень под обьектом меньше самого обьекта в css спокойно делается. Попросите дизайнера рисовать ui kit для кнопок в скетче и будет вам счастье в виде готового кода для тени)

У кнопок с сильным скруглением без отрицательного spread тень некрасиво ложится, так что тут можно понять дизайнера

Ответить
3

Борды в фигме, ui система в скетче, шерим в зеплине, преза в фотошопе))

Ответить
–2

что мешает запендюрить тень отдельным растровым изображением?

Ответить
5

в смысле? кнопка на чистом css, а тень картинкой? я лучше дизайнера линейкой изобью... металлической...

Ответить
5

Одной и той же линейкой сначала дизайнера, который дичь нарисовал, а потом разработчика, который эту тень растровым изображением делать станет)

Ответить
–3

кнопка на чистом css, а тень картинкой?

И... что? Юзвери заметят разницу что ли?

я лучше дизайнера линейкой изобью... металлической...

Чё вы, верстальщики, злые такие. Не пинай дизайнеры ваши ленивые жёпы, так бы и сидели все на веб 1.0.

Ответить
1

ну ладно-ладно, вставлю одну тень картинкой, уговорил!

Ответить
6

Самому интересно стало. Реализовывается без картинок на раз-два.

https://codepen.io/Nik-W/pen/vYELWKK

Ответить
0

На скорую руку вполне себе. Но вместо кнопка не из одного элемента - теперь кнопка из трех элементов??? А если таких кнопок будет несколько на странице?

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

Ответить
0

Сам себе проблему придумал

Ответить
1

про оптимизацию сферический дизайнер в вакууме не слышал?

Ответить
1

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

Ответить
0

оптимизация складывается из массы аспектов. никто ваши дизайнерские картинки в 16k не ставит на сайт (по крайней мере, нормальный фронт за такое будет бить потрукам)

Ответить
1

дизайнерские картинки в 16k

Чаво? Что там происходит в твоей радужной вселенной?

нормальный фронт за такое будет бить потрукам

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

Ответить
2

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

Ответить
0

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

Ответить
0

А у меня другой оффтоп-вопрос)
Что за тренд такой, делать такие кнопки с закругленным краями по полсотни? Куда ни плюнь, везде эти кнопки на макетах. Помнится лет 10 назад так модно было, сейчас что произошло?

Ответить

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

5

Осталось дождаться нормальный менеджер плагинов, трудно в них ориентироваться

Ответить
4

Уверен, фигма его сделает. Они же боги

Ответить
3

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

Ответить
1

Ничего, просто для этого будет плагин))

Ответить
1

Модульная фигма, тип собери свою

Ответить
–9

Как же надоело видеть на vc.ru статьи подобного рода. Статьи которые созданы лишь для жалкого пиара очередного tg канала

Ответить
9

как же надоело видеть тут нытье подобного рода. Ты хоть в курсе, что находишься на UGC-ресурсе?

Ответить
7

Я никого не заставляю читать. Но как показывает практика, люди любят мою эту рубрику и уже вышел 3 выпуск. Ещё 2-3 выпуска и рубрика закроется т.к. цель рубрики будет достигнута. 
А на счёт ТГ-канала: я его создал еще пару статей назад, где указывал, что он некоммерческий и об этом же писал в первом посте канала. Там все посты это анонсы статей, опросы и ссылки-уведомления о новых статьях.

Ответить
0

https://vc.ru/design/96588-principy-atomarnogo-dizayna-v-kartinkah
Вот пример статьи, созданной ради пиара Телеграм-канала.

Ответить
1

А вот есть ли такой плагин, чтобы можно было страницы в виде дерева располагать, как в axure?

Ответить
1

Поищу 😉

Ответить
1

Плюсанул, но пока не читал, может во вторник только доберусь.
)))
Автор ты хороший и статьи пишешь полезные, чо не плюсануть за добрые дела!

Ответить
1

Спасибо!)

Ответить
{ "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }