Figma

🆕 Функция 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

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

🆕 Иногда цвет хочется написать словом вместо выбора через меню, например, red, blue, yellow... И это теперь возможно! Любое стандартное значение цвета из CSS можно написать в поле ввода цвета. Даже такое как “MistyRose”! Они автоматически преобразуются в шестнадцатеричный код цвета. Все цвета можно найти в таблице: https://htmlcolorcodes.com/color-names/#новое К слову, а ты уже знаешь, что можно не писать весь HEX код цвета, если буквы и цифры в нём повторяются? Например, написав F ты получишь белый #FFFFFF, а 0 — чёрный #000000. Пара символов также будет повторяться: 5A станет #5A5A5A. А вот тройка символов скопирует каждый на отдельные составляющие цвета: “f9a” превратится в #FF99AA. #обучение

🆕 Иконка перетаскивания для свойств объекта: небольшое нововведение, делающее панель свойств более интуитивной! Если к слою применено более одного цвета заливки, обводки или несколько эффектов, при наведении на них будет показываться иконка, за которую можно потянуть для изменения порядка этих свойств. Раньше их порядок и так можно было менять, но не все это знали, так как не было иконки. Да, это всё. Это всё нововведение. 😅#новое Чтобы сделать этот пост максимально полезным, вот ответ на часто задаваемый вопрос: как скопировать только одно свойство объекта на другой? Например, один цвет заливки или один эффект, а не все свойства сразу. 👉 Ответ: надо кликнуть по нужному свойству в этой пустой области слева, чтобы выбрать его. Когда свойство выбрано, то есть подсвечивается синим цветом, просто жми Ctrl/Cmd + C чтобы скопировать. Можно даже выделить несколько свойств с зажатым Ctrl/Cmd или Shift, подобно выбору слоёв. #обучение

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

🆕 Представляем две новые интеграции! 😍 С лёгкостью добавляй изображения фреймов в тикеты на 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/✨

Функцию выборочного сброса оверрайдов пофиксили! 🔥 С обновлением меню замены инстанций функция Reset Overrides сломалась и могла сбрасывать только все оверрайды сразу. Теперь всё работает как прежде: можно выборочно сбросить текст, цвета и другие изменения в инстанции. 🛠 Также исправлен редкий баг с библиотеками, которые не могли нормально опубликоваться, будто бы всё время появлялись неопубликованные изменения. Больше этого не будет происходить. P.S. Гифка сделана только что опубликованным плагином GIF: https://figma.fun/qLLYx0

Начни свою неделю в Figma с изучения обновлённой панели замены инстанций компонента — Swap Instance! “Старым меню мы наверное нарушили чуть ли не все паттерны дизайна хороших интерфейсов,” — сказал Дилан Филд, CEO Figma, на презентации. В новом меню есть превью компонентов, поиск (!!!) по всем компонентам, можно легко переключаться между подключенными библиотеками. Смотри компоненты списком или сеткой с большими превью, как и в панели Assets. А самых продвинутых порадует возможность навигации по всему меню при помощи клавиатуры (шотката для его открытия пока нет, увы). Как обычно добавляй в названия компонентов иерархию при помощи “/”, и в панели замены будут автоматически отображаться релевантные компоненты на том же уровне иерархии. И легко перемещайся между уровнями, подобно файловой системе на компьютере, чтобы найти нужную замену. Подробнее о заменах: https://help.figma.com/hc/en-us/articles/360039150413-Swap-between-Components-in-a-file. Продуктивной рабочей недели! 🙌

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

Вступительное выступление Дилана Филда (Dylan Field) с Config Europe теперь доступно для просмотра. Узнай как работают новые фичи представленные сегодня, а также какие новинки нас ожидают этой осенью и зимой! #config Записи остальных выступлений с конференции будут доступны 15 октября! ▶️https://youtu.be/lWy4fB3G9Gc

Вкладка Code превратилась в панель Inspect, и довольно сильно преобразилась! Теперь разработчики могут посмотреть и скопировать самые важные для них значения в один клик. #config#новое Подробнее об обновлении: https://help.figma.com/hc/en-us/articles/360055203533

Только что представлено на Config Europe — новое меню для быстрой замены компонентов! #config#новое Подробнее о новой фиче: https://help.figma.com/hc/en-us/articles/360039150413-Swap-between-Components-in-a-file