Figma Design

Figma представила новые возможности Code Layers, которые позволяют работать с интерактивными прототипами прямо на холсте. Теперь можно превратить обычный макет в работающий интерфейс с реальными взаимодействиями и анимациями, а затем дорабатывать его через Figma Agent. Также можно переносить существующие сайты в Figma через расширение для Chrome, добавлять прототипы из кода через MCP и дублировать их, чтобы сравнивать разные варианты рядом друг с другом. При необходимости интерфейс из кодового слоя можно обратно преобразовать в редактируемые слои Figma. Code Layers уже доступны в открытой бете. www.figma.com/blog/design-together-with-code-layers Video is too big

На Config India Figma представила сразу несколько обновлений. Code Layers позволяют работать с кодом прямо на холсте, а новые Specs помогают собирать документацию, требования и контекст проекта в одном месте. Для AI-агентов добавили Guidelines и Code Sources, чтобы они лучше понимали дизайн-систему и могли использовать существующие компоненты и код. Еще анонсировали Payload, инструмент для публикации сайтов прямо из Figma. Code Layers, Specs и Guidelines уже доступны в открытой бете. Code Sources пока в закрытой, а Payload начнут запускать в ближайшие недели. www.figma.com/blog/build-by-design/ Video is too big

Расширение Figma для Chrome теперь умеет захватывать код веб-страниц и переносить его прямо в Figma в виде кодового слоя. Так можно работать с существующими сайтами непосредственно в редакторе, сохраняя их код.

Figma Agent теперь умеет лучше работать с контекстом из разных файлов. Можно попросить его подтянуть контент сразу из нескольких дизайн-файлов, прочитать стикеры или текст из FigJam и добавить их в макет как аннотации. Еще агент умеет находить изображения в Figma Slides и переносить их в дизайн, например чтобы сразу применить к ним эффекты.

Figma Agent вышел из беты Он работает прямо на холсте и помогает не выпадать из процесса: можно просить менять макеты, собирать новые варианты, применять дизайн-систему, разбирать фидбек и автоматизировать рутину. www.figma.com/blog/workflow-lab-staying-in-the-flow-with-the-figma-agent/ Video is too big

В Figma Motion теперь доступны анимации текста и аудио. Текст можно анимировать по символам, словам или строкам и настраивать появление прямо на таймлайне. Туда же теперь можно добавлять аудиодорожки и синхронизировать их с анимацией. Обновление уже доступно. www.figma.com/community/file/1682540379260940278/figma-motion-updates?fuid=1432793107374253430

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

Blur FX — плагин для создания радиального, углового и motion blur прямо в Figma. Можно настраивать интенсивность, направление и точку фокуса с live preview. Install plugin

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

Forwarded From Easy Figma Вот так Figma выглядела 10 лет назад. Именно 28 сентября 2016 года сервис вышел в публичный доступ.

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

Небольшой лайфхак для Figma: левую панель можно скрыть и оставить больше места под работу.

Небольшое обновление папок в Figma: → теперь видно превью файлов внутри папки → цвета папок стали заметнее → папки можно дублировать

Recolor — плагин для быстрой замены цветов в выбранных объектах. Находит заливки, обводки, текст, тени и градиенты, а затем позволяет заменить нужный цвет сразу везде. Install plugin

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.

Между режимами теперь можно быстро переключаться шорткатами. Option (Alt на Windows) + Tab - следующий режим Option (Alt на Windows) + Shift + Tab - предыдущий Также нужный режим можно выбрать курсором. Обновление станет доступно всем пользователям в течение недели.

Управление прозрачностью через переменные Figma разрешила задавать opacity цветовой переменной через числовую переменную. Теперь состояния disabled, оверлеи и scrim-слои можно обновлять массово, не отвязывая цвета от библиотеки. help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes#colorvar