Вы гуглите или действительно знаете? Figma вышла из приватной бета всего три года назад, в конце сентября 2016 года. Интересно, есть тут “старички”, кто был участником беты?

А кто-нибудь видел альфа версию? В первых версиях Figma, можно сказать, не было “дизайна” — один серый мрачноватый скелет. Но нужно было всё равно создавать прототипы, и постепенно разрабатывать и улучшать визуальный стиль. Когда Figma уже стала обретать свой функционал — дизайнеры внутри компании стали использовать её. Как ни странно, Figma дизайнили в самой Figma.

Однако что дизайнеры Figma использовали для этих задач до того, как ей стало возможно пользоваться? Sketch, Photoshop, Axure или может вообще сразу создавали интерфейс в коде?

Интеграция с Figma для обучения: представь, что ты учишься дизайну и делаешь макет интерфейса. 🤗 На промежуточном этапе скидываешь его на проверку, и мгновенно тебе подсказывают прямо в файле, где и что можно исправить, чего не хватает, и что сделано правильно. Ты исправляешь недочёты и переходишь на следующий уровень...

Удобно? Так работает тренажёр Яндекс.Практикума для новой программы “Дизайнер интерфейсов”! 💕 Тебе нужно лишь скинуть ссылку на выполненное задание — система мгновенно его проверит и оставит комментарии.

Обучение с нуля длится 7 месяцев и есть возможность попробовать себя в бесплатном вводном курсе. 😉

И снова мимо! Первые прототипы Figma создавались в... нет, не в Скетче. В Фотошопе! Так что не стоит “старичка” списывать со счетов, как сейчас модно — он сделал большой вклад в развитие не только дизайн индустрии, но и в частности инструментов для дизайна.

Теперь вы лучше знаете Figma не только как инструмент, но и “изнутри” — как компанию. Спасибо за участие в нашей небольшой игре! Надеемся, что она оказалась познавательной и интересной. 👏

🆕 Представляем измерения в режиме редактирования вектора! Теперь ты можешь зажимать Alt, чтобы видеть точные расстояния между точками или кривыми. 🎨 Создавать иконки, иллюстрации и другую векторную графику стало ещё проще! #новое

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

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

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

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

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

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

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

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

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

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

• Меняй межбуквенный интервал нажатием 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

Плагин 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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