Figma Design
106K subscribers
987 photos
319 videos
1.45K links
Сотрудничество: @normanross
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Figma рассказала, как создавала генеративные плагины и шейдеры.

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

www.figma.com/blog/how-we-built-generative-plugins-and-shaders/
This media is not supported in your browser
VIEW IN TELEGRAM
Управление прозрачностью через переменные

Figma разрешила задавать opacity цветовой переменной через числовую переменную. Теперь состояния disabled, оверлеи и scrim-слои можно обновлять массово, не отвязывая цвета от библиотеки.

help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes#colorvar
This media is not supported in your browser
VIEW IN TELEGRAM
Между режимами теперь можно быстро переключаться шорткатами.

Option (Alt на Windows) + Tab - следующий режим
Option (Alt на Windows) + Shift + Tab - предыдущий

Также нужный режим можно выбрать курсором.

Обновление станет доступно всем пользователям в течение недели.
Spacing Audit — скилл, который проверяет отступы и пропорции в макете. Находит места, где сбилась сетка, появились случайные значения или нарушился ритм между элементами. После проверки подсказывает, что стоит поправить.

# Spacing Audit

Check a layout against a 4/8pt spacing scale, report every value that is off the grid, and snap it to the nearest correct step. The goal is consistent, predictable rhythm that is easy to hand off and maintain.

## The scale

Base unit is 8. Use 4 only as a half-step for tight, component-internal spacing.

Allowed values: 0, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 80, 96.

- 8, 16, 24, 32, 48, 64: structural spacing (section gaps, card padding, layout margins).
- 4, 12, 20: fine spacing inside a component (icon-to-label, chip padding, tight stacks).
- Anything not a multiple of 4 is off-grid and should be flagged.
- A multiple of 4 that is not a multiple of 8 at the layout level (e.g. section gap of 20 or 28) should be flagged as "consider 8pt step" but is not a hard error.

## What to check

Inspect auto-layout frames and spacing between elements:
- Padding inside frames (top, right, bottom, left).
- Item spacing / gap between children.
- Gaps between sections and between grouped blocks.
- Margins around content within a frame.

## How to audit

1. Walk the selected frame (or the whole page if nothing is selected) top-down.
2. For each spacing value, compare it against the allowed scale.
3. For each off-grid value, choose the nearest allowed step. When exactly between two steps, round to the one closer to the surrounding rhythm of that group.
4. Prefer consistency within a group over per-element correctness. If three cards use 14, 16, 16, align all three to 16.

## Rules

- Do not change layout structure, sizing behavior (hug/fill), content, or styling. Only adjust spacing values.
- Preserve intentional exceptions and do not flag them: 1px borders and hairlines, optical alignment offsets, values driven by hug/fill, and spacing set by a variable or token.
- If spacing is already bound to a variable or token, leave it and note it instead of overwriting.
- Round icon-to-label and other fine gaps to 4 or 8, not to larger steps.
- When a whole group is uniformly off-grid on purpose (e.g. a deliberate 6pt system), flag it once and ask before mass-changing.

## Output

1. Return an audit summary first, before changing anything:
- Total elements checked.
- A before / after list of every off-grid value, grouped by frame, in the form `Card padding: 14 -> 16`.
- Any values you left untouched, with the reason (token, hairline, optical).
2. Apply the fixes only after showing the summary.
3. End with a one-line rhythm note: the dominant step the layout now uses (e.g. "layout now on an 8pt rhythm, fine spacing on 4pt").

## Do not

- Do not resize elements or reflow content to hit a number.
- Do not invent a new scale. Stick to the 4/8pt steps above.
- Do not touch corner radius, stroke, or type unless the user explicitly asks.
На маркетплейсах встречают по карточке.

Пока покупатель ещё не смотрит характеристики и отзывы, ваш товар уже конкурирует за внимание с десятками других. Поэтому карточка должна не просто выглядеть красиво — она должна продавать.

На курсе Нетологии вы с нуля научитесь создавать карточки для Ozon, WB и Яндекс Маркета: анализировать конкурентов, работать с фото, собирать инфографику и галерею, использовать Figma, Photoshop и нейросети. В финале — готовый проект в портфолио.

На расширенном тарифе — дизайн-системы для брендов, видео и анимация, а также ИИ-инструменты для быстрой работы с целыми линейками товаров.

В сентябре — скидка 40% и 5 курсов по ИИ в подарок.

Подробности и программа
This media is not supported in your browser
VIEW IN TELEGRAM
Recolor — плагин для быстрой замены цветов в выбранных объектах. Находит заливки, обводки, текст, тени и градиенты, а затем позволяет заменить нужный цвет сразу везде.

Install plugin
Небольшое обновление папок в Figma:

→ теперь видно превью файлов внутри папки
→ цвета папок стали заметнее
→ папки можно дублировать
5
This media is not supported in your browser
VIEW IN TELEGRAM
Небольшой лайфхак для Figma: левую панель можно скрыть и оставить больше места под работу.
4
This media is not supported in your browser
VIEW IN TELEGRAM
Auto Layout в Figma научился переносить элементы по вертикали.

В вертикальном Auto Layout появился Wrap. Если контент не помещается по высоте, элементы переходят в новую колонку, а не выходят за границы фрейма.

Механика повторяет поведение CSS Flexbox и подходит для адаптивных списков, карточек и многостолбцовых интерфейсов с меняющимся количеством элементов.
9
Forwarded from Easy Figma
This media is not supported in your browser
VIEW IN TELEGRAM
Вот так Figma выглядела 10 лет назад.

Именно 28 сентября 2016 года сервис вышел в публичный доступ.
6
Осенью у бизнеса снова появляется то, на что летом не хватало времени: новый сайт, обновление визуала, маркетинговую стратегию и десятки других задач.

Найти того, кто просто возьмёт и сделает всё без месяца собеседований и найма в штат — отдельная задача. Поэтому 7 млн человек ежемесячно ищут услуги дизайнеров и других фрилансеров на Авито Услугах.

Чтобы попасть в этот поток, достаточно трёх шагов: оформить профиль, разместить объявление и показать, какие задачи вы можете закрыть.
Дальше помогают инструменты площадки: аналитика спроса, портфолио и прайс-лист, продвижение и фильтр для срочных заказов — «сейчас», «сегодня» или «завтра».

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

Сезон деловых услуг уже начался. Самое время показать бизнесу, что вы умеете. Поэтому продвигайте свое дело на Авито Услугах. А Чтобы менеджер онлайн-сервиса бесплатно помог вам оформить профиль и разместить объявление, а также начислил до 10 000 бонусов на продвижение — оставьте заявку на сайте прямо сейчас.
This media is not supported in your browser
VIEW IN TELEGRAM
Blur FX — плагин для создания радиального, углового и motion blur прямо в Figma. Можно настраивать интенсивность, направление и точку фокуса с live preview.

Install plugin
В Figma Motion появилось сразу несколько обновлений

Теперь можно сохранять собственные стили анимации, публиковать их в библиотеки и использовать по всей дизайн-системе. Эти же стили смогут автоматически применять Figma Agent и кодовые агенты через MCP, а в skills на них можно будет ссылаться как на готовые правила.

Также уже доступен экспорт в Lottie.

На следующей неделе добавят аудио на таймлайн и анимации текста.