Вступительное выступление Дилана Филда (Dylan Field) с Config Europe теперь доступно для просмотра. Узнай как работают новые фичи представленные сегодня, а также какие новинки нас ожидают этой осенью и зимой! #config

Записи остальных выступлений с конференции будут доступны 15 октября!

▶️ https://youtu.be/lWy4fB3G9Gc

Стейты приходят в Figma? Не совсем. Variants — это гибкая система для создания и управления не только состояниями компонента, но и вообще всеми его свойствами и их значениями. В этом обновлении логика организации компонентов в Figma станет максимально приближенным к тому, как они выглядят в коде. Создай один компонент и быстро переключайся между всеми его свойствами в зависимости от контекста, вместо создания множества отдельных компонентов.

Обновление с функционалом Variants будет доступно в ноябре. А небольшой тизер ты можешь посмотреть уже сейчас в презентации Дилана! #анонс #новое

Начни свою неделю в Figma с изучения обновлённой панели замены инстанций компонента — Swap Instance! “Старым меню мы наверное нарушили чуть ли не все паттерны дизайна хороших интерфейсов,” — сказал Дилан Филд, CEO Figma, на презентации.

В новом меню есть превью компонентов, поиск (!!!) по всем компонентам, можно легко переключаться между подключенными библиотеками. Смотри компоненты списком или сеткой с большими превью, как и в панели Assets. А самых продвинутых порадует возможность навигации по всему меню при помощи клавиатуры (шотката для его открытия пока нет, увы).

Как обычно добавляй в названия компонентов иерархию при помощи “/”, и в панели замены будут автоматически отображаться релевантные компоненты на том же уровне иерархии. И легко перемещайся между уровнями, подобно файловой системе на компьютере, чтобы найти нужную замену.

Подробнее о заменах: https://help.figma.com/hc/en-us/articles/360039150413-Swap-between-Components-in-a-file. Продуктивной рабочей недели! 🙌

Функцию выборочного сброса оверрайдов пофиксили! 🔥 С обновлением меню замены инстанций функция Reset Overrides сломалась и могла сбрасывать только все оверрайды сразу. Теперь всё работает как прежде: можно выборочно сбросить текст, цвета и другие изменения в инстанции.

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

P.S. Гифка сделана только что опубликованным плагином GIF: https://figma.fun/qLLYx0

🆕 Представляем две новые интеграции! 😍 С лёгкостью добавляй изображения фреймов в тикеты на GitLab (видео демо: https://www.youtube.com/watch?v=KR2nuehGtrU) при помощи нового одноимённого плагина. А интеграция с сервисом Maker позволяет быстро импортировать дизайн из Figma в этот инструмент для создания сайтов без использования кода. #новое

Но это не всё! Не так давно появилось несколько других интеграций: Confluence, Avocode, Pendo и Bubble. Подробности о всех недавних интеграциях, которые помогут совместной работе в твоей команде, а также ссылки на плагины и другие ресурсы ты найдешь в статье: https://www.figma.com/blog/six-integrations-to-help-your-product-team-collaborate-in-figma/ ✨

🆕 Оффлайн автосохранение — теперь Figma будет сохранять изменения при потере соединения и синхронизировать их при подключении даже если закрыть вкладку с файлом! ⚡️ #новое

Ранее единственным способом избежать потери изменений сделанных оффлайн было сохранение файла как .fig, и больше в этом нет необходимости. Изменения могут храниться от 7 до 30 дней в зависимости от браузера, 30 дней в приложении. При открытии Figma ты увидишь какие файлы не были синхронизированы. Чтобы синхронизировать изменения из сохранённого оффлайн файла, просто открой его. Подробнее: https://help.figma.com/hc/en-us/articles/360040328553-Can-I-work-offline-with-Figma-#Figma_autosave

Однако важно отметить, что автосохранение оффлайн — это лишь гарантия на случай, если что-то пойдёт не так, это не полноценный оффлайн режим. Открытие файлов без подключения к интернету невозможно. Добавление такого режима не планируется, ведь Figma создана для браузера, и в её основе лежит совместная работа в режиме реального времени, онлайн. 💖

🆕 Иконка перетаскивания для свойств объекта: небольшое нововведение, делающее панель свойств более интуитивной! Если к слою применено более одного цвета заливки, обводки или несколько эффектов, при наведении на них будет показываться иконка, за которую можно потянуть для изменения порядка этих свойств. Раньше их порядок и так можно было менять, но не все это знали, так как не было иконки. Да, это всё. Это всё нововведение. 😅 #новое

Чтобы сделать этот пост максимально полезным, вот ответ на часто задаваемый вопрос: как скопировать только одно свойство объекта на другой? Например, один цвет заливки или один эффект, а не все свойства сразу.

👉 Ответ: надо кликнуть по нужному свойству в этой пустой области слева, чтобы выбрать его. Когда свойство выбрано, то есть подсвечивается синим цветом, просто жми Ctrl/Cmd + C чтобы скопировать. Можно даже выделить несколько свойств с зажатым Ctrl/Cmd или Shift, подобно выбору слоёв. #обучение

🆕 Иногда цвет хочется написать словом вместо выбора через меню, например, red, blue, yellow... И это теперь возможно! Любое стандартное значение цвета из CSS можно написать в поле ввода цвета. Даже такое как “MistyRose”! Они автоматически преобразуются в шестнадцатеричный код цвета. Все цвета можно найти в таблице: https://htmlcolorcodes.com/color-names/ #новое

К слову, а ты уже знаешь, что можно не писать весь HEX код цвета, если буквы и цифры в нём повторяются? Например, написав F ты получишь белый #FFFFFF, а 0 — чёрный #000000. Пара символов также будет повторяться: 5A станет #5A5A5A. А вот тройка символов скопирует каждый на отдельные составляющие цвета: “f9a” превратится в #FF99AA. #обучение

Шорткат дня: зажимай Alt и перетягивай курсор в любом числовом поле ввода, чтобы быстро регулировать значения. ↔️ А при нажатии ещё и Shift, значения будут меняться на 10 по умолчанию или другой размер крупного шага, установленный в настройках Nudge Amount. 💖 #shortcut

🆕 Функция Copy as PNG в десктопном приложении стала ещё лучше! Изначально эта функция максимально проста: выделяешь объект, находишь Copy/Paste → Copy as PNG в главном или контекстном меню. Потом открываешь Слак, Телеграм, Мессенджер VK, Google Docs, почту или другую программу, куда можно вставить изображение, и нажимаешь Ctrl / Cmd + V. ✅ Напомним, что эта функция недоступна в браузере (из-за технических ограничений), она есть только в десктопном приложении Figma. Что же изменилось? #новое

1. Теперь функция Copy as PNG копирует объекты в размере 2x! 🎉
2. Ты можешь выбирать свой размер для копирования при помощи настроек экспорта! При копировании PNG будет выбираться наибольший из коэффициентов в настройках экспорта выбранного объекта. Также при включённом режиме Pixel Preview (в меню View), будет использоваться его разрешение.
3. У этой функции теперь есть свой шорткат: Shift + Cmd + C на macOS и Shift + Ctrl + C на Windows! #shortcut

В начале недели мы мигрировали все файлы в Figma на новый формат, чтобы подготовить их к грядущим новым фичам, и это изменение в архитектуре позволило исправить очень старый баг. Теперь при копировании вложенных инстанций они остаются как есть, а не превращаются во фреймы! 😌

Процедура миграции завершена, поэтому если у тебя какое-то время не работало копирование компонентов из одного файла в другой, это должно быть исправлено.

🆕 Без сюрпризов: теперь владельцам Professional команд в конце месяца будут приходить оповещения о новых редакторах в команде. Это позволит заранее узнать о новых редакторах, чтобы не пришлось за них платить, если они добавлены по ошибке или без согласия администратора команды. У владельца будет три дня на то, чтобы их убрать при необходимости. #новое

Также улучшены оповещения о запросах на редактирование в тарифе Organization. Во-первых, пользователи смогут добавить пояснительную записку, для чего они запрашивают доступ к редактированию. Во-вторых, можно выбрать администратора, который эти оповещения будет получать и выдавать эти разрешения. Подробнее о запросе на изменение прав доступа в Organization: https://help.figma.com/hc/en-us/articles/360040453433#Request_upgrade

🆕 Варианты уже тут — дизайн системы выходят на новый уровень! Если тебе хоть раз приходилось создавать несколько вариаций одного компонента, тебе следует попробовать Варианты. Эта функция помогает объединять схожие компоненты в один набор, который будет отображаться как один компонент в панелях Assets и Swap Instance. При создании Вариантов части имён компонентов написанные через слеш перейдут в значения свойств набора. А у инстанции этого компонента можно будет легко переключаться между этими значениями при помощи выпадающих меню или переключателей (если значения имеют названия true/false, on/off или yes/no). #новое

Бежим пробовать новинку! Дублируй себе файл с примерами: https://www.figma.com/community/file/903303571898472063

Смотри вводное видео и узнай Варианты в подробностях: https://www.youtube.com/watch?v=y29Xwt9dET0


А чтобы узнать все малейшие детали и стать мастером Вариантов, изучи статью: https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

🆕 И ещё парочка небольших обновлений:

Переходы и настройки анимации теперь доступны разработчикам в панели Inspect. Они смогут легко скопировать значения кривых анимации и другую информацию.

Пользователи с доступом на просмотр файла теперь могут просматривать историю версий, открывать предыдущие версии файла. Восстанавливать версии из истории по прежнему могут только редакторы.

https://releases.figma.com/ #новое

Осваиваешь Варианты? Приходи на вебинар, где команда Figma расскажет о всех особенностях новой фичи, покажет лайфхаки и ответит на вопросы! Начало сегодня в 6 часов вечера по Москве.

Регистрируйся: https://figma.zoom.us/webinar/register/WN_VX8Cjs1DQdyMkU2FEPPTiQ?timezone_id=Europe%2FMoscow

Начнём неделю с полезной информации про Варианты. Что это и когда их использовать? 👀 #обучение

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

Варианты отлично подходят для кнопок, чекбоксов, табов, полей ввода и других интерактивных элементов. Хорошо будут работать они и для слегка отличающихся карточек (например, в одной есть кнопка, в другой нет), баннеров с предупреждениями и информационными сообщениями, меню с разным видом и шириной для разных платформ. Не следует использовать варианты для группировки иконок — если объединить их в варианты, в поиске они будут отображаться как один компонент и нельзя будет их менять через панели Assets и Swap Instance.

🆕 Больше улучшений панели Inspect для разработчиков! 👾 Добавляй к компонентам не только описание, но и ссылку на документацию связанную с этим компонентом, которую разработчики смогут открыть кнопкой “View documentation”. Также им доступна вся информация о вариантах: какие параметры выбраны для данного компонента. Её можно скопировать в один клик в удобном формате. Вдобавок во вкладке Inspect теперь можно легко найти родительский компонент и перейти к нему. #новое

🤓 Полное описание функций вкладки Inspect: https://help.figma.com/hc/en-us/articles/360055203533

Где найти все крутые и полезные плагины, которые публикуют практически каждый день? Тебе понадобится небольшая карта, которую мы сделали для тебя! 🗺

1. Сначала открой вкладку Community в меню слева.
2. Нажми на кнопку Explore — первую в куче других похожих кнопок.
3. Найди вкладку Plugins. Ты на месте! 📍

Чтобы найти свежие плагины (или просто очень непопулярные), включи сортировку по количеству установок. Поиск по плагинам доступен там же, во вкладке Community. #обучение

В этом месяце Auto Layout заметно обновится! В следующую пятницу в 19:00 по Москве будет проводиться вебинар, где ты сможешь узнать подробнее об обновлениях, как к ним готовиться, и конечно же задать интересующие вопросы. 🐥

Регистрируйся заранее, чтобы не пропустить: https://figma.zoom.us/webinar/register/WN_XnLmGvmIT9uo7tbSTGFWJw?timezone_id=Europe%2FMoscow

А вот и долгожданное обновление Auto Layout! Создавай гибкие и тянущиеся компоненты с полностью обновлённой панелью Constraints. Как всё устроено в подробностях ты сможешь узнать завтра на вебинаре. Также ты уже сейчас можешь начать самостоятельное изучение, просто перезагрузи Figma! #новое

Поиграй с новинкой в подготовленном гайде: https://www.figma.com/community/file/784448220678228461

Прочитай статью, где рассказывается о каждой детали: https://help.figma.com/hc/en-us/articles/360040451373

Познай обновлённый Auto Layout, посмотрев запись вебинара, прошедшего на прошлой неделе! 🤗 В нём есть всё самое нужное от основ до хитростей профессионалов. Целый час полезностей:

https://youtu.be/u4K2m-3MmQQ