Современный мир не мыслим без удобных приложений. За графическую часть отвечает специалист UX/UI дизайнер. Именно он определяет конечный облик сайта или приложения.
Как стать таким специалистом и какие инструменты следует изучать для этого? Об этом и немного больше мы узнаем видео.
В этой статье мы собрали полезные плагины для Figma, которые упростят вам работу и пополнят арсенал новыми удобными инструментами — и все это бесплатно. При установке они привяжутся к вашему аккаунту и будут запускаться как в десктопной версии, так и в браузере.
Для чего нужен: плагин позволяет просматривать, как будут выглядеть шрифты, прямо в Figma — по аналогии с панелью «Символ» в Photoshop.
Как пользоваться: в любой рабочей области нажмите правую клавишу мыши и выберите в меню Plugins → Better Font Picker. Появится окно, где можно сразу посмотреть, как выглядят установленные в вашей системе шрифты.
2. To Path
Для чего нужен: с помощью этого плагина можно расположить текст по любой форме объекта.
Как пользоваться: создайте текст и фигуру (например, круг), откройте плагин через Main menu (сверху слева) → Plugins → To Path или просто кликнув по рабочей области и нажав Plugins → To Path. Далее выберите оба элемента, задайте нужные параметры и нажмите Link.
В результате вы получите изогнутый текст, а фигуру под ним можно удалить.
3. Iconify
Для чего нужен: большая библиотека разнообразных иконок в формате SVG. Можно выбрать из готового и не тратить время, если вдруг поджимают сроки.
Как пользоваться: откройте плагин через Plugins → Iconify после правого нажатия на рабочую область или через Main menu, как удобнее.
Бесплатные паки с готовыми иконками в Figma также есть в разделе Community. Чтобы их открыть, в меню слева сверху нажмите на иконку с домиком. Далее выберите Community (изображен как глобус), вбейте в поиск icons и найдите подходящий набор.
4. Palette
Для чего нужен: с помощью этого плагина можно извлечь подборку цветов из любого изображения и сформировать готовую палитру для своего проекта, не теряя времени на работу вручную.
Как пользоваться: перенесите изображение в область Figma и примените к нему плагин Plugins → Palette. Внизу появится небольшое окно со всеми основными цветами из картинки, их можно использовать для своих целей.
Для чего нужен: можно быстро и не заморачиваясь вырезать из изображения несложный объект. Хорошо работает, когда на картинке или фото один главный элемент — если их будет много, могут возникнуть сложности.
Как пользоваться: чтобы вырезать объект, выберите изображение в Figma и примените к нему плагин через Plugins → PixCut Background Remover. Фон исчезнет автоматически.
Для чего нужен: привязывает выбранные слои к пиксельной сетке и выравнивает положение всех объектов, округляя их до точных значений. Больше никаких дробных чисел вроде 79,98 или 100,05.
Как пользоваться: выделите слои, которые требуется адаптировать, запустите плагин — и он автоматически изменит положение каждого из них так, чтобы высота и ширина соответствовали целым значениям.
7. Text Prettier
Для чего нужен: поправит кавычки, уберет лишние пробелы, заменит дефис на тире, добавит специальные знаки, где нужно — в общем, улучшит типографику и сделает текст комфортнее для чтения.
Как пользоваться: выберите текст в рабочем пространстве Figma и кликните на него правой кнопкой мыши. Затем перейдите в Plugins → Text Prettier → Run TextPrettier.
После запуска плагин сам подберет подходящие параметры и адаптирует текст, чтобы он выглядел опрятным и читабельным.
8. Isometric
Для чего нужен: позволяет создать изометрическую проекцию дизайна прямо в Figma, не прибегая к помощи Photoshop и других графических редакторов.
Как пользоваться: выберите фигуру, которую нужно изменить. Нажмите на нее правой мышью и запустите плагин через Plugins → Isometric.
Введите желаемый угол наклона в специальном окне. Осталось выбрать перспективу (Perspective) — и изометрическая проекция готова.
9. Soroka
Для чего нужен: плагин сам подбирает и показывает шрифтовые пары на основе библиотеки Google Fonts, что экономит время и помогает найти неочевидные комбинации.
Как пользоваться: откройте плагин через Plugins → Soroka, в появившемся окне выберите из каталога шрифт, который собираетесь использовать в проекте. Упростить себе задачу можно с помощью поиска и фильтров, например, если вы ищете только кириллицу.
Пункты в списке можно раскрывать и сразу в Figma искать сочетания. Доступен предпросмотр шрифтовых пар по символам, словам и отрывкам текста.
10. Mesh gradient
Чем полезен: поможет создать красивые сложные градиенты с тонкой настройкой прямо внутри Figma.
Как пользоваться: запустите плагин, например, через Main menu (сверху слева) → Plugins → Mesh gradient. Откроется окно с параметрами. Созданные через него изображения с градиентами можно сохранить в высоком качестве.
Еще Mesh gradient способен запоминать настройки понравившихся сетчатых градиентов, чтобы использовать их в следующих проектах.
Добрый день, пикабутяне!
Для опытных дизайнеров этот пост вряд ли будет полезен, но для новичков может оказать большую помощь.
Я в начале своей карьеры и следую советам, которые дают опытные дизайн-ребята. Поэтому сейчас я копирую дизайн чужих реализованных работ. Для удобства пользуюсь расширением в браузере, которое разом делает скриншот всей страницы. Но вот при добавлении скриншота в Фигму я недоумевал, почему картинка шириной не 1920, а 800-900пх. Это продолжалось пока я не заметил надпись "image resized"
Оказалось, что у Фигмы есть такое ограничение, которое не даёт вставлять картинки размером более 4096пх. Вроде и логично, ведь редко такие картинки встретишь, но мы попали в то самое "редко".
Единственно верный способ на данный момент таков:
1) Скачиваем плагин "insert big image" в community
2) Запускаем этот плагин внутри своего проекта
3) Перетаскиваем необходимую картинку в него
Через 5 секунд вы получите группу, в которой объединены порезанные части исходного фото.
Профит: вы потратили минимум времени и не потеряли качество исходной фотографии.
Добрый день! Ищу простые макеты сайтов любой тематики в формате .fig. Перерыл кучу тематических сайтов и телеграм-каналов, макетов, конечно, много, но большинство из них слишком сложные и с большим количеством элементов. Нужны эти макеты для студентов, в качестве заданий для лабораторных работ - набить немного руку в вёрстке и прототипировании юзер интерфейсов.
Буду очень рад, если у кого-нибудь есть на примете сайты или группы в соц. сетях, где такое можно найти.
Привет всем!
Сегодня пост об одной из работ моего портфолио, как веб-дизайнера.
Первый дизайн сайта, который я сделал в ходе своего первого обучения у ребят из WayUp (да, я не перестану ссылаться на этих ребят, ибо они круты. Возможно, уберу рефку. Но это не точно. Если попросят.). Без лишних раздумий выбрал тему, связанную с музыкой, ибо музыку я люблю.
Сначала нужно было определиться с цветовой гаммой. Здесь я попытался влезть в голову целевой аудитории: и в этой самой голове я увидел человека с музыкальным инструментом, зажигающего на сцене в ходе какого-то крутого концерта. Поэтому основная тема сайта - черная: стоя на сцене, в зале, в большинстве случаев ты видишь темноту из-за того, что освещение сцены бьет тебе в глаза. И свет этот нередко - желтый. Как раз как на фоновом изображении - специально подбирал!
А чтобы разбавить черный и желтый - добавил, во-первых, еще один желтый - более тусклый, чтобы на его фоне выгодно выделить активные элементы, а во-вторых - красный, для акцента на кнопках.
Этому дизайну уже порядка двух лет. Глядя на него сейчас - понимаю, что некоторые моменты сделал бы иначе (жирный шрифт на кнопках, как минимум).
Но, в целом, какая была логика (использую ее практически на всех коммерческих сайтах, на самом деле):
1. В большинстве случаев, человек приходит на сайт за конкретным продуктом: товаром или услугой;
2. Соответственно, первым экраном мы должны человеку донести, насколько по адресу он попал, придя на наш сайт. А оффером мы еще и показываем, что тут не просто по адресу, но и проводим эмоциональный "зацеп" потенциального клиента. Кроме того, помня, что не все любят тратить время на изучение сайта, мы даем возможность сразу же или позвонить, или заказать звонок;
3. Помня, что пользователь пришел на сайт за продуктом - после первого экрана мы показываем сам товар: сначала "Горячие новинки", потом "Акции", и затем уже сам каталог.
Что я поменял бы сейчас: каталог поставил бы выше - над акциями. Добавил бы продуктам фильтр и рубрики - чтобы не смотреть весь каталог инструментов, а выбрать именно те, которые интересны конкретно мне.
4. Дальше уже даем остальную информацию: события - они же "Новости" и/или "Статьи" - контент не только для того, чтобы показать, что организация за этим сайтом жива, но и для работ по SEO-оптимизации, в которой тексты играют не последнюю роль.
Когда набирал «рыбный» контент для секции «Последние события» не смог пройти мимо Александра Зилкова с канала «Нескучный саунд» - в целом, его контент повлиял на мой выбор музыкальной тематики для дизайна.
Под конец, конечно, кратко о магазине (сейчас поднял бы повыше или даже разместил на 1-м экране) и контакты:
Понравился дизайн? Напишите в комментариях, что вы бы сделали по-другому и почему. Буду рад адекватным дискуссиям!П
Война Путина с Украиной — это атака на демократические ценности — ценности, лежащие в основе концепции Figma, заключающейся в том, чтобы сделать дизайн доступным для всех. Мы благословлены невероятным разнообразием и международным составом нашей команды и более широкого сообщества Figma, и мы очень ясно видим боль, которую переживает украинское сообщество Figma.
Наше внутреннее сообщество Figmates делает пожертвования организациям, поддерживающим украинских беженцев и гуманитарную помощь, и мы сопоставляем эти пожертвования в рамках нашей программы сопоставления пожертвований.
Мы также предоставляем постоянный доступ к платным функциям Figma нашим нынешним украинским клиентам, которые обратятся за помощью в ближайшие месяцы.
В то же время мы замораживаем и будем продолжать замораживать аккаунты организаций Figma в соответствии с санкциями США и ЕС против России. Мы также прекращаем все новые попытки продаж в России.
Мы молимся о безопасности нашего сообщества и скорейшем прекращении этой агрессии.
Figma — графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Пользоваться можно как на бесплатной версии и платной с расширенным функционалом.
В то время как происходит первая дизайнерская война, в которой одна сторона требует закрытия доступа к Behance, Adobe и Figma для РФ, а вторая собирает бессмысленную петицию из уже 10.000 подписавшихся против войны, бездумно публикуя свои личные данные... Хотел бы напомнить остаткам здравомыслящих специалистов о необходимости озадачится резервированием всех облачных файлов (just in case). В случае с Фигмой в будущем в случае чего, вы сможете хоть и с потерями, но импортировать файлы в Скетч, а оттуда при необходимости перекинуть в XD. Быть уверенными только в ограничении к ресурсу не стоит, и затраченное время на подстраховку окупится в случае непредвиденных ситуаций.
А также, первой группе я бы хотел сказать, что те, против кого вы подстрекаете, собрали для вас целую петицию из более 10.000 человек, основным посылом которой было то, о чем вы и просили
Мы против любой войны, тем более войны с Украиной. В Украине живут наши коллеги, друзья и родственники. Украина не представляет угрозы для безопасности нашей страны. Война против нее несправедлива и бессмысленна. Мы не хотим, чтобы в Украине убивали наших коллег и друзей. Мы хотим вместе с ними жить, создавать и созидать в мире. Участвуя в войне, мы разрушаем эту связь.
Но видимо раз вы продолжаете, дело совсем не в действиях или бездействиях людей со второй стороны, а в принципе.
Второй же группе, я хотел сказать всего три вещи:
1. Ваша квалификация и навыки это ваши руки и голова, а не стоки, сети, площадки, или софт.
2. Будьте внимательными к тому под какими словами и формулировками вы ставите свои имена и фамилии, закон страны в которой вы живете и против который вы подписываетесь никто не отменял.
3. Проверьте свои имена в документе с петицией, на случай если она попадала туда без вашего ведома.
пруфы на всякий случай
https://forum.figma.com/t/figma-please-stand-with-ukraine-he...
https://forum.figma.com/t/ukrainian-people-are-dying-close-f...
https://docs.google.com/document/d/192288YRFlKWcosa_UwZOrT5C...
PS: Я до последнего верил что творческие люди будут последними, кто будет противостоять друг против друга за пределами фриланс площадок, у меня нет слов.
