{"id":4879,"title":"\u0427\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043f\u0435\u0442\u044c, \u043f\u043e\u043a\u0430 \u0432\u044b \u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e","url":"\/redirect?component=advertising&id=4879&url=https:\/\/vc.ru\/otpbank\/266952&hash=82572a4a372a00657a2afc359f19a24c0bd24be8cecbd743f0681209c07c9a3a","isPaidAndBannersEnabled":false}
Дизайн
atimohov

Плагины 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": "atimohov", "author_type": "self", "tags": [], "comments": 47, "likes": 76, "favorites": 430, "is_advertisement": false, "subsite_label": "design", "id": 96335, "is_wide": true, "is_ugc": true, "date": "Sun, 08 Dec 2019 09:10:48 +0300", "is_special": false }
0
47 комментариев
Популярные
По порядку
Написать комментарий...
8

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

Скрин:

Ответить

Немалый Орзэмэс

Avdotii
0

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

Ответить
8

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

Ответить

Немалый Орзэмэс

Pixel
1

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

Ответить
6

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

Ответить

Немалый Орзэмэс

Андрей
0

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

Ответить
0

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

Ответить
0

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

Ответить

Немалый Орзэмэс

Кристина
8

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

Ответить
1

Это да. 

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
–1

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

Ответить
5

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

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

Ответить
3

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

Ответить
–2

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

Ответить
5

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

Ответить

Немалый Орзэмэс

Avdotii
6

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

Ответить
–3

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

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

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

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

Ответить
1

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

Ответить

Немалый Орзэмэс

Avdotii
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

Спасибо!)

Ответить
Читать все 47 комментариев
Как превратить юристов из бюрократов в опору компании

Бывает, что корпоративные юристы — люди, которые не показываются из кабинета и иногда вставляют палки в колёса другим отделам. Но в «Фоксфорде» они сами ходят к бизнес-заказчикам и предлагают идеи. Юрист онлайн-школы «Фоксфорд» Катя Кулакова рассказывает, как работает юридический отдел, который живёт интересами компании.

Катя Кулакова, юрист онлайн-школы "Фоксфорд"
Пять практических приёмов, как улучшить читаемость документов
Пошаговый пример переработки таблицы Joey Cherdarchuk, darkhorseanalytics.com
Девять советов для улучшения сна, которые (не)работают у меня
Мошенники развели 22-летнюю девушку на 700 тысяч рублей. Чем мы можем помочь и чему научиться?

Многие, я думаю, видели, не так давно выпущенную статью о том, как мошенники под видом сотрудников банков и прокуратуры обманули сестру автора на 700 тысяч рублей. Вот, если что, ссылка на неё:

Как подготовиться к жизни без cookies: рекомендации маркетологам

О технологии Federated Learning of Cohorts (FLoC), которая заменит cookies, Google объявил еще в начале года. Недавно компания анонсировала перенос запуска технологии на 2023 год, и теперь у рынка интернет-маркетинга есть 2 года, чтобы найти альтернативу работе с данными. Как выглядит ситуация сейчас и что делать маркетологам — в обзоре от AiData.

Как малому бизнесу понять свою «зону смерти»

Риск-менеджмент традиционно считается уделом крупных компаний. Кроме них просчитывают риски разве что стартапы, и те по требованию инвесторов. Малый и средний бизнес (МСБ) работает без подобной аналитики — ему не до этого. Предпринимателей можно понять, когда ты поднимаешься с нуля или масштабируешь проект, мысль идет в векторе достижения…

RU-CENTER (NIC.RU) Опять дарят "подарки" увеличивающие стоимость продления услуг ВДВОЕ

Занимаюсь своими делами. Приходит письмо от RU-CENTER (NIC.RU) смысл которого сводится к тому, что если я не хочу потратить при продлении доменов сумму вдвое больше и так конской стоимости продления, то я должен отложить свои дела и потратить час своей жизни, что бы всё вернуть как было до "подарка".

Как успешно пройти испытательный срок?

Свершилось – вы получили работу мечты! Но впереди еще три месяца испытательного срока. Это время дается вам и работодателю, чтобы определиться, насколько вы друг другу подходите. Как использовать это время с максимальной для себя пользой? Рассказывает главный специалист отдела подбора персонала Ольга Шабалина. Как всегда, упаковали полезные…

Опрос: 38% сотрудников в США на удалёнке регулярно работают в кровати Статьи редакции

При этом 74% опрошенных регулярно испытывают боль или дискомфорт во время работы.

Скандалы пивоварни BrewDog приносят её панкам-создателям миллионы: история про дикий маркетинг Статьи редакции

Джеймс Ватт и Мартин Дики ездят на танке по Лондону, продают чучела с бутылками внутри, бесят корпорации своим «агрессивным портером» и благодаря этому привлекают инвесторов и покупателей.

Мартин Дики (слева) и Джеймс Ватт (справа) BrewDog
31 июля завершается приём заявок в 1-й этап отбора программы B2C Future Solutions
null