Figma

Config Europe — вторая конференция Figma уже не за горами!

🌏 Конференция проводится полностью онлайн
📅 17 сентября 2020
🕓 14:00 – 19:00 по Москве
🤑 Вход бесплатный для всех!

Регистрируйся уже сейчас и рассказывай друзьям: https://config.figma.com #config

🆕 Ссылки на файлы в Figma Organization теперь работают немного иначе. Во-первых, когда кто-то открывает файл по ссылке с доступом на просмотр (Anyone with the link can view) — ему больше не будет автоматически выдаваться роль “can view” в файле. Таким образом если закрыть доступ по ссылке (Only people invited to this file/Anyone at Organization can access), он потеряет доступ к файлу: участников не состоящих в команде и не имеющих доступа к проекту нужно приглашать в файл вручную. И не придется вручную закрывать доступ людям, которые открывали файл просто по ссылке — меньше путаницы! 👏

Во-вторых, добавлена функция редактирования по клику (click to edit). ✏️ Если участник без явно заданного доступа к редактированию открывает ссылку на файл с доступом к редактированию для всех, изначально он откроется доступным только для просмотра. Пользователю при этом будет доступна кнопка “Edit file” в верхней панели. При нажатии на неё, участнику станет доступно редактирование файла. Но опять же, он не будет автоматически добавлен в список участников файла при этих действиях.

Подробнее о ссылках в Organization: https://help.figma.com/hc/en-us/articles/360040044834 #новое

⚠ Сегодня в два часа ночи по московскому времени планируется перерыв в работе Figma на 15 минут! В это время изменения в файлах не будут сохраняться и не будет возможности открыть новые файлы.

После восстановления работы сервиса открытые файлы синхронизируются с серверами Figma. Но если в это время по какой-то причине ты будешь не спать, а работать, на всякий случай сделай бэкап изменений — сохрани файл как .fig.

За статусом можно следить на status.figma.com ✅

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

Хочешь тоже публиковать свои файлы в сообщество? 🤗 Подай заявку в бета!

Подробности об этом обновлении: https://www.figma.com/blog/explore-the-figma-community/ #новое

🆕 Прототипы немного приободрились, представляем два нововведения:

💥 Добавляй несколько переходов на один объект! Например, перетаскивание (Drag) одного объекта в разные стороны: больше не надо придумывать обходные пути с разделением его на две половины чтобы сделать красивую рабочую карусель карточек.

🌈 Для анимаций теперь можно настраивать свои функции скорости (Easing Functions)! Делай переходы плавными как по маслу или резкими как пружины. Посмотри небольшой туториал, чтобы узнать все тонкости работы с графиками скорости анимации: https://youtu.be/cAkOH9uaXHA #новое

Делимся годнотой: красивые бесплатные темплейты презентаций в Figma. 🤩 Без СМС и регистрации, просто открываешь понравившийся и дублируешь себе файл. #ресурсы

🤗 Налетай: https://www.templatery.co/templates

🆕 В Figma улучшена поддержка системных редакторов метода ввода (IME), что упрощает ввод текста на Китайском, Корейском и Японском языках. 🥳 Только не забудь выбрать шрифт, который поддерживает необходимый язык — список таких шрифтов и другие подробности о работе с этими языками ты можешь найти в статье: https://help.figma.com/hc/en-us/articles/360040449673 #новое

Шорткат дня: приведи панель слоёв в порядок нажатием Alt + L! 💖 Это сочетание клавиш мгновенно сворачивает абсолютно все группы и фреймы в панели слоёв слева. Когда открыто так много вложенных объектов, что глаза разбегаются, Alt + L — это спаситель!

Бонус: быстро раскрыть или скрыть всё дерево слоёв в выбранных объектах можно нажатием треугольничка рядом со слоем левой кнопкой мыши с зажатым Alt. ✨ #shortcut

🆕 Долгожданный изменяемый размер тени (spread) уже здесь! Увеличивай и уменьшай размер тени для создания эффекта глубины, свечения, или контура. И сразу беспрепятственно переноси это в код! 😎 #новое

Параметр «shadow spread» нас просили добавить уже наверное тысячу раз, но ввиду технических сложностей это откладывалось долгое время. 🐌 В итоге было решено реализовать фичу с ограничениями: она работает только для прямоугольников, эллипсов, фреймов и компонентов. У последних двух при этом должна быть видимая заливка, иначе тень учитывает объекты внутри со сложной геометрией. А для работы этого маленького дополнения со сложными векторами пришлось бы переписывать существенные части двух рендер движков.

К тому же оказалось, что даже браузеры, куда в итоге попадает большинство макетов из Figma, реализуют эту функцию не совсем корректно ради скорости и простоты! ❤️ Подробности реализации и интересные факты о тенях в браузерах ты найдешь нашей статье: https://www.figma.com/blog/behind-the-feature-shadow-spread/

🆕 В процессе дизайна вряд ли ты запоминаешь точные названия папок и файлов, где ведётся работа. Вместо этого скорее всего ты помнишь идею, какой-нибудь заголовок или как минимум решаемую проблему. Несколько месяцев назад мы представили глобальный поиск, а сегодня для всех стало доступно небольшое обновление — глубокий поиск! 😏 #новое

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

Интересно узнать подробнее как создавалась эта функция? 😱 Прочитай новую статью в нашем блоге: https://www.figma.com/blog/deep-search/

🆕 Не получается быстро найти нужный стиль или сложно ориентироваться в длинном списке? Эта проблема в прошлом: представляем обновленную панель выбора стилей! #новое

🔎 Мгновенно находи стили по названию и описанию через поиск!

📖 Просматривай цветовые стили в виде списка или сетки.

✏️ Кнопка редактирования показывается при наведении на стиль в списке.

💎 Кегль и интерлиньяж шрифта отображаются рядом с текстовыми стилями.

Работаешь над приложением или сайтом с тёмной темой? 😎 Используй плагин Appearance! Он позволяет мгновенно переключаться между светлой и тёмной темой, используя стили из библиотеки или локальные. И он пользуется большой популярностью!

Устанавливай: https://www.figma.com/community/plugin/760927481606931799/Appearance

Плагином Appearance рекомендует пользоваться команда ВКонтакте для работы с их дизайн системой. 💖 А разработал Appearance продуктовый дизайнер Александр Дьяков, для упрощения разработки тёмной темы в Яндекс.Картах. О своём процессе Саша написал статью. Но есть и другие плагины для этой задачи: Глеб Сабирзянов детально рассказал о каждом из них и составил сравнительную таблицу.

17 сентября 2020 пройдет Config — вторая конференция Figma! 😱 На этот раз она будет проводиться для жителей Европы и полностью в режиме онлайн. У тебя тоже есть возможность поучаствовать: регистрация откроется 20 августа, не пропусти! #config

У тебя неплохой английский и есть чем поделиться с огромным сообществом Figma? 🤗 Заявки на выступления принимаются до 31 июля включительно: https://sessionize.com/config-europe

Плагин Breakpoints максимально упрощает создание и просмотр адаптивного дизайна в Figma! Создаешь фреймы с вёрсткой для разных размеров экранов, добавляешь их в плагин и... магия! ✨ При изменении размера фрейма содержимое будет переключаться между необходимыми фреймами. Видео демонстрация: https://youtu.be/OaGSreqHCXE

И не нужно держать плагин открытым: брейкпоинты продолжат работать даже если закрыть его. Плагин использует малоизвестный трюк с переворотом слоёв в Figma, и делает его легко используемым! Автор написал про эту технику статью: https://medium.com/@arthursavchenko/how-to-make-diy-breakpoints-in-figma-86de91abe121

😍 Устанавливай Breakpoints и почувствуй суперсилу: https://www.figma.com/community/plugin/824289601590456356

🆕 Занимайся тонкой настройкой типографики при помощи обновленных горячих клавиш:

• Меняй межбуквенный интервал нажатием Alt + < (меньше) и Alt + > (больше).
• Увеличивай и уменьшай интерлиньяж (межстрочный интервал, line height): Shift + Alt + < и Shift + Alt + >
• #новое Переключайся между начертаниями шрифта клавишами ⌘⌥< и ⌘⌥> на macOS, а на Windows Ctrl + Alt + < и Ctrl + Alt + >.
• Также напомним шорткат для изменения размера шрифта, который работает как прежде: Cmd/Ctrl + Shift + </>.

🙇‍♀ Полный гайд по работе с типографикой в Figma: https://help.figma.com/hc/en-us/articles/360039956634

Anima представляет интеграцию с Figma! Создавай прототипы в Figma и экспортируй их в HTML одним кликом. 😍 https://youtu.be/ieQ_RxvHxSU

Новый плагин — новые возможности! Вставляй видео, гифки, анимации Lottie и интерактивные формы в макет в Figma. Они оживут в Anima: мгновенно скопируй весь код HTML и CSS для передачи разработчикам или сразу опубликуй сайт на своём домене.

Подробности: https://www.animaapp.com/figma?utm_medium=social&utm_source=telegram&utm_content=introducing-figma-ru&utm_campaign=introducing-figma

У Figma появилась своя страница “О Нас”! В 2015 году кто-то сказал про совместную работу в Figma: “Это звучит как мой самый страшный кошмар.” Что было дальше — ты наверняка уже знаешь. 😉

👉 https://www.figma.com/about/

Го учить сочетания клавиш! 😋 Шорткат дня: функции выравнивания объектов активируются нажатием Alt + одной из клавиш W, A, S, D. По верху W, по низу S, по левому и правому краю A и D соответственно. Когда ещё дизайн был так похож на компьютерную игру? 🎮 #shortcut

Хочешь узнать, как создавалась фича Selection Colors и панель Type Details в Figma? ☺️ Наш дизайн менеджер Марчин проведет экскурсию по процессу, расскажет о решениях и ошибках, и покажет ранние прототипы. А в конце у тебя будет возможность задать вопросы!

Заглядывай на стрим сегодня в 19:00 по Москве! 👉 Регистрируйся бесплатно!