7 пошаговых инструкций по созданию эффектов в Figma от Fons Mans
Дизайнер Fons Mans выкладывает короткие туториалы, в которых поэтапно разбирает, как создавать эффектные графические элементы
Мы выбрали для вас 7 самых интересных:
— Спиральная иллюстрация
— Эффект свернутого листа
— Эффект светящегося стекла
— Сложный градиент
— Глянцевая иконка
— Изометрическая иконка
— Геометрические паттерны
#awd_figma #awd_edu
Дизайнер Fons Mans выкладывает короткие туториалы, в которых поэтапно разбирает, как создавать эффектные графические элементы
Мы выбрали для вас 7 самых интересных:
— Спиральная иллюстрация
— Эффект свернутого листа
— Эффект светящегося стекла
— Сложный градиент
— Глянцевая иконка
— Изометрическая иконка
— Геометрические паттерны
#awd_figma #awd_edu
Мы уже публиковали Figma-плагины для создания дизайн-систем и работы с ними. А теперь выбрали ещё 12 плагинов, с помощью которых можно легко управлять дизайн-системами
awdee.ru/12-figma-plugins-for-creating-and-managing-design-systems
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
12 Figma-плагинов для создания и управления дизайн-системами — Оди. О дизайне
Мы уже публиковали Figma-плагины для создания дизайн-систем и работы с ними. А теперь выбрали ещё 12 плагинов, с помощью которых можно легко управлять дизайн-системами Foundation: Color Generator — создаёт цветовые палитры на основе дизайн-систем Material…
Мы нашли и протестировали новые полезные плагины. Чтобы показать как они работают, записали короткие скринкасты
— Gradient Map — эффект карты градиента, как в Фотошопе
— Reflect — создаёт отражение любого изображения в два клика
— Mobile Onboarding — библиотека онбордингов для iOS и Android в светлой и тёмной темах
— Jony Eye — находит ошибки в макетах в типографике, стилях, документах и размещении элементов
— Auto Style Sheet — сканирует дизайн и генерирует руководство по стилю
awdee.ru/5-new-free-figma-plugins
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
В статье подробно рассматриваем несколько альтернатив:
— Pixso
— Lunacy
— Penpot
— Mockplus
— Adobe 😆
— Sketch для Mac
awdee.ru/luchshie-analogi-figma
#awd_tool #awd_webtool #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
Лучшие аналоги Figma — Оди. О дизайне
Сделала подборку платных и бесплатных альтернатив Figma. В статье вы найдете подробный обзор каждого инструмента Pixso Облачный сервис для совместной работы над дизайном. Включает все этапы работы над проектом: создание прототипов, дизайн, передачу макетов…
Мы собрали и проверили ещё 5 полезных плагинов. Чтобы вы быстрее разобрались, как они работают, мы записали короткие скринкасты
— Split Image Effect — делит изображения на полосы, ромбы, квадраты, прямоугольники
— Random Gradients — генерирует рандомные красочные градиентные фоны
— ToolTips — быстро создаёт кастомизируемые тултипы. Всё, что нужно — написать текст тултипа, задать его направление, а потом настроить размер, цвет надписи и цвет фона
— Fake it — генерирует фейковые данные для заполнения макетов. Содержит более 200 типов данных: имён, названий, телефонных номеров, номеров банковских карт и многого другого. Данные создаёт на более, чем 60 языках, включая русский
— Hugeicons Pro — библиотека из 6500+ бесплатных линейных SVG-иконок
awdee.ru/5-new-free-figma-plugins-2
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Новая подборка с актуальными плагинами. Каждый из них мы сопроводили скринкастом, чтобы вы могли быстрее разобраться в том, как они работают
— Hue Shifter — позволяет пакетно менять оттенок, насыщенность и яркость у неограниченного количества векторных слоёв и компонентов
— 3D Vector — преобразует векторные фигуры или текст в 3D
— Fast Isometric — располагает изображения и компоненты в изометрической проекции
— MingCute — библиотека из 2700+ векторных иконок, созданных по 24-пиксельной сетке. Каждая иконка нарисована в двух стилях: линиями и с заливкой
— Status Bar 1-click — вставляет строку состояния (Status Bar)/панель уведомлений (Notification Bar) в верхнюю часть фрейма и панель «Домой» (Home Bar) в нижнюю
awdee.ru/5-new-free-figma-plugins-3
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
5 новых бесплатных Figma-плагинов #3 — Оди. О дизайне
Новая подборка с актуальными плагинами. Каждый из них мы сопроводили скринкастом, чтобы вы могли быстрее разобраться в том, как они работают Hue Shifter — позволяет пакетно менять оттенок, насыщенность и яркость у неограниченного количества векторных слоёв…
23 библиотеки с иконками, иллюстрациями, паттернами и текстурами на рождественскую тематику
Подборка Figma-библиотек и ресурсов с иконками, иллюстрациями, шрифтами, фотографиями, паттернами и текстурами для оформления зимних и новогодних проектов
🙂️️ awdee.ru/23-christmas-sets
#awd_icons #awd_free_download #awd_illustration #awd_figma
Подборка Figma-библиотек и ресурсов с иконками, иллюстрациями, шрифтами, фотографиями, паттернами и текстурами для оформления зимних и новогодних проектов
#awd_icons #awd_free_download #awd_illustration #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
23 библиотеки с иконками, иллюстрациями, паттернами и текстурами на рождественскую тематику — Оди. О дизайне
Мы сделали подборку Figma-библиотек и ресурсов с иконками, иллюстрациями, шрифтами, фотографиями, паттернами и текстурами для оформления зимних и новогодних проектов Figma-библиотеки LineKingdom Christmas icons — 50 рождественских иконок Christmas design…
Мы нашли свежие плагины для Figma:
— Lummi — библиотека изображений, сгенерированных ИИ. Есть сортировка по категориям, поиск, раздел «Похожие изображения»
— Placemark Globe — генерирует векторные глобусы в нужном ракурсе и цветовой гамме
— GradientGaze — добавляет объектам голографические градиенты
— Icon. top — библиотека векторных иконок в линейном стиле из наборов Tabler и Lucide
— %Percent Area — позволяет установить площадь объекта в процентном соотношении от площади фрейма, внутри которого он находится
Каждый плагин мы проверили и записали скринкаст, чтобы было понятно, как он работает
awdee.ru/5-new-free-figma-plugins-4
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
5 новых бесплатных Figma-плагинов #4 — Оди. О дизайне
Мы нашли свежие плагины для Figma: большую библиотеку изображений, сгенерированных ИИ, генератор векторных глобусов, наборы иконок и голографических градиентов, а также плагин, который позволяет задать площадь объекта в % от площади фрейма. Каждый плагин…
Ruri Splines — веб-сервис и Figma-плагин для создания градиентных сплайнов
Платная подписка — 16,80 $ в год — открывает доступ к шаблонам и другим настройкам
Веб: ruri.design (там же есть Gradiator — для генерации круговых фигур со сложными градиентами)
Плагин: figma.com/community/plugin/1094343067414782306/Ruri-–-Splines
#awd_tool #awd_figma
Платная подписка — 16,80 $ в год — открывает доступ к шаблонам и другим настройкам
Веб: ruri.design (там же есть Gradiator — для генерации круговых фигур со сложными градиентами)
Плагин: figma.com/community/plugin/1094343067414782306/Ruri-–-Splines
#awd_tool #awd_figma
This media is not supported in your browser
VIEW IN TELEGRAM
В Фигме появилось мультиредактирование — теперь можно редактировать несколько объектов одновременно
Достаточно выбрать несколько слоев во фреймах, группах или секциях, изменить один элемент, и правки массово применятся ко всем выделенным элементам. Это удобно, когда необходимо внести одинаковые изменения в большое количество элементов
Мультиредактирование работает для текстовых слоёв, размеров, расположения, поворота, группировки, применения масок, функций объединения (union selection), вычитания (subtract), пересечения (intersect), исключения (exclude), преобразования фреймов в авто-лейауты и многого другого
Функция доступна на любом тарифном плане
#awd_news #awd_figma #awd_webtool #awd_tool via help.figma.com/hc/en-us/articles/21635177948567-Edit-objects-on-the-canvas-in-bulk
Достаточно выбрать несколько слоев во фреймах, группах или секциях, изменить один элемент, и правки массово применятся ко всем выделенным элементам. Это удобно, когда необходимо внести одинаковые изменения в большое количество элементов
Мультиредактирование работает для текстовых слоёв, размеров, расположения, поворота, группировки, применения масок, функций объединения (union selection), вычитания (subtract), пересечения (intersect), исключения (exclude), преобразования фреймов в авто-лейауты и многого другого
Функция доступна на любом тарифном плане
#awd_news #awd_figma #awd_webtool #awd_tool via help.figma.com/hc/en-us/articles/21635177948567-Edit-objects-on-the-canvas-in-bulk
This media is not supported in your browser
VIEW IN TELEGRAM
Фигма запустила разделённые вкладки — теперь можно разместить разные файлы на одном экране
Новая функция называется Split Tabs. Она позволяет открыть файлы рядом друг с другом и работать в них одновременно. Чтобы использовать Split Tabs, пользователям нужно перетащить вкладку в файл и решить, где её открыть — в правой или левой части экрана. Размер каждой вкладки можно регулировать — делать одну вкладку больше другой, и наоборот
В разделённых вкладках можно одновременно просматривать FigJam-файл и Figma-файл
Новая функция доступна в бета-версии десктопного приложения Фигмы
Примеры использования фичи: twitter.com/disco_lu/status/1767632456658669605
#awd_news #awd_figma #awd_webtool #awd_tool
Новая функция называется Split Tabs. Она позволяет открыть файлы рядом друг с другом и работать в них одновременно. Чтобы использовать Split Tabs, пользователям нужно перетащить вкладку в файл и решить, где её открыть — в правой или левой части экрана. Размер каждой вкладки можно регулировать — делать одну вкладку больше другой, и наоборот
В разделённых вкладках можно одновременно просматривать FigJam-файл и Figma-файл
Новая функция доступна в бета-версии десктопного приложения Фигмы
Примеры использования фичи: twitter.com/disco_lu/status/1767632456658669605
#awd_news #awd_figma #awd_webtool #awd_tool
Мы уже делали две подборки, в которые суммарно вошли 33 плагина для создания крутых эффектов в Figma: первая и вторая
В эту публикацию мы включили ещё три новых плагина:
— Rain Drop Effect — добавляет любому изображению настраиваемый эффект дождя
— Curve Text — размещает текст по периметру любых векторных объектов
— Ruri Lines — стилизует изображения под объёмный линейный паттерн
Все плагины мы проверили и записали видео, чтобы было понятно, как они работают и что умеют
awdee.ru/three-new-figma-plug-ins-for-creating-effects
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
10 бесплатных Figma-библиотек с шаблонами страниц и UI-элементами
Мы собрали бесплатные Figma-паки, которые включают: экраны онбординга, страницы регистрации и авторизации, кнопки, карточки, поля ввода, айфоновские клавиатуры и элементы для создания лендинга
👨🎨 awdee.ru/10-free-figma-libraries-with-page-templates-and-ui-elements
#awd_figma #awd_free_download
Мы собрали бесплатные Figma-паки, которые включают: экраны онбординга, страницы регистрации и авторизации, кнопки, карточки, поля ввода, айфоновские клавиатуры и элементы для создания лендинга
#awd_figma #awd_free_download
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
10 бесплатных Figma-библиотек с шаблонами страниц и UI-элементами — Оди. О дизайне
Мы собрали бесплатные Figma-паки, которые включают: экраны онбординга, страницы регистрации и авторизации, кнопки, карточки, поля ввода, айфоновские клавиатуры и элементы для создания лендинга EXO KIT — библиотека из 80+ компонентов и 20+ шаблонов. Содержит…
Шесть инструментов для работы с цветами в пространстве OKLCH
Перцепционная цветовая модель OKLCH — интуитивная модель, которая, в отличие от RGB и CMYK, не зависит от способа воспроизведения цвета. Она позволяет кодировать более широкий диапазон цветов, доступный человеческому глазу, и не смещает оттенок при изменении насыщенности. По сравнению с HSL такой способ кодирования помогает получить предсказуемую яркость после настройки цвета
🙂️️️️️️ Мы сделали подборку из трёх браузерных инструментов и трёх Figma-плагинов, которые работают на базе цветовой модели OKLCH: awdee.ru/six-tools-for-working-with-colors-in-oklch-space
Чтобы лучше вникнуть в тему и понять, чем OKLCH удобнее других моделей, читайте статьи:
— 🇬🇧 It’s time to learn oklch color
— OK, OKLCH: колорпикер, помогающий вдумчиво подходить к выбору цвета
#awd_figma #awd_color #awd_webtool #awd_tool
Перцепционная цветовая модель OKLCH — интуитивная модель, которая, в отличие от RGB и CMYK, не зависит от способа воспроизведения цвета. Она позволяет кодировать более широкий диапазон цветов, доступный человеческому глазу, и не смещает оттенок при изменении насыщенности. По сравнению с HSL такой способ кодирования помогает получить предсказуемую яркость после настройки цвета
Чтобы лучше вникнуть в тему и понять, чем OKLCH удобнее других моделей, читайте статьи:
— 🇬🇧 It’s time to learn oklch color
— OK, OKLCH: колорпикер, помогающий вдумчиво подходить к выбору цвета
#awd_figma #awd_color #awd_webtool #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
Шесть инструментов для работы с цветами в пространстве OKLCH — Оди. О дизайне
Мы сделали подборку из трёх браузерных инструментов и трёх Figma-плагинов, которые работают на базе цветовой модели OKLCH. Перцепционная цветовая модель OKLCH — интуитивная модель, которая, в отличие от RGB и CMYK, не зависит от способа воспроизведения цвета.…
This media is not supported in your browser
VIEW IN TELEGRAM
Большое обновление Figma 2024
26-27 июня на конференции Config2024 показали масштабное обновление Figma. В частности:
— Сделали новый интерфейс
— Встроили ИИ-ассистента, который помогает делать прототипы, адаптивные макеты, генерировать картинки, иконки, удалять фон, писать и переводить тексты, массово переименовывать слои и многое другое
— Добавили редактор презентаций Figma Slides
— Улучшили режим для разработчиков Dev Mode
— Сделали авто-лейауты более интуитивными
— Добавили редактируемые наборы интерфейсных элементов Apple iOS, Google Material Design 3 и Simple Design System от Figma прямо на панель Assets
— Теперь в FigJam вместо одного большого холста есть страницы
Посмотреть все обновления: figma.com/blog/config-2024-recap
#awd_news #awd_figma #awd_webtool #awd_tool
26-27 июня на конференции Config2024 показали масштабное обновление Figma. В частности:
— Сделали новый интерфейс
— Встроили ИИ-ассистента, который помогает делать прототипы, адаптивные макеты, генерировать картинки, иконки, удалять фон, писать и переводить тексты, массово переименовывать слои и многое другое
— Добавили редактор презентаций Figma Slides
— Улучшили режим для разработчиков Dev Mode
— Сделали авто-лейауты более интуитивными
— Добавили редактируемые наборы интерфейсных элементов Apple iOS, Google Material Design 3 и Simple Design System от Figma прямо на панель Assets
— Теперь в FigJam вместо одного большого холста есть страницы
Посмотреть все обновления: figma.com/blog/config-2024-recap
#awd_news #awd_figma #awd_webtool #awd_tool
Figma отключила свой ИИ-генератор дизайна приложений
На прошлой неделе Figma анонсировала и раскатила в ограниченную бету новую ИИ-функцию Make Design, которая по текстовому промту создаёт дизайн приложений
Вчера Энди Аллен опубликовал видео и скриншоты, которые показывают, что на запрос «погодное приложение» инструмент создал дизайн почти идентичный эппловскому приложению Weather. То есть ИИ явно обучали на скриншотах уже существующих приложений, а это может привести к судебному преследованию за нарушение прав интеллектуальной собственности
Figma быстро признала проблему и временно отключила функцию. Интересно, как они поступят. Будут переобучать модель? Договорятся с Apple? Что думаете?
#awd_news #awd_figma
На прошлой неделе Figma анонсировала и раскатила в ограниченную бету новую ИИ-функцию Make Design, которая по текстовому промту создаёт дизайн приложений
Вчера Энди Аллен опубликовал видео и скриншоты, которые показывают, что на запрос «погодное приложение» инструмент создал дизайн почти идентичный эппловскому приложению Weather. То есть ИИ явно обучали на скриншотах уже существующих приложений, а это может привести к судебному преследованию за нарушение прав интеллектуальной собственности
Figma быстро признала проблему и временно отключила функцию. Интересно, как они поступят. Будут переобучать модель? Договорятся с Apple? Что думаете?
#awd_news #awd_figma
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику
В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах
awdee.ru/11-ways-of-blurring
#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
11 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
Эти плагины помогут сэкономить время при создании адаптивного дизайна. Они автоматически настраивают содержимое фреймов под разную ширину экранов. В подборку мы также добавили Figma-библиотеку адаптивных компонентов мобильного приложения
awdee.ru/7-figma-plugins-for-adaptive-layout-design
#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
7 Figma-плагинов для проектирования адаптивных макетов — Оди. О дизайне
Эти плагины помогут сэкономить время при создании адаптивных версий дизайна. Они автоматически настраивают содержимое фреймов под разные размеры экранов. В подборку мы также добавили Figma-библиотеку адаптивных компонентов мобильного приложения Breakpoints —…
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику
В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах
awdee.ru/11-ways-of-blurring
#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
11 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков
Мы отобрали плагины Figma, которые работают на базе искусственного интеллекта. Они помогут переименовывать слои в один клик, генерировать иконки, картинки, «рыбный» текст, аватары, 3D-иллюстрации, увидеть собственные работы глазами нейросети, быстро проводить исследования юзабилити и извлекать огромное количество цветовых палитр из библиотеки Unsplash
awdee.ru/13-ai-figma-plugins
#awd_article #awd_tool #awd_figma #awd_techno
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
12 ИИ-плагинов для Figma — Оди. О дизайне
Мы отобрали плагины Figma, которые работают на базе искусственного интеллекта. Они помогут переименовывать слои в один клик, генерировать иконки, картинки, «рыбный» текст, аватары, 3D-иллюстрации, увидеть собственные работы глазами нейросети, быстро проводить…