Figma

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

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

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

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

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

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

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

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

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

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

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

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

Опять большинство не угадали! 😱 Нет, Figma не была всегда, и прошло не 4, и даже не 6 лет с начала работы над ней...

Ответ на третий вопрос: разработка Figma началась в далёком 2012 году — аж 8 лет назад! Команда долго работала над тем, что сейчас является ядром Figma: мультиплеер и шустрый графический движок. Ох, сколько на пути было сложностей...

Наверняка ты пользуешься Figma ещё относительно немного времени. Потому что сам по себе инструмент очень молодой. Знаешь, когда Figma вышла из приватной бета-версии и стала доступна всем?

Попались! Второй вопрос викторины оказался довольно хитрым, и большинство из вас ответили неправильно. 😝

Изначально Эван и Дилан хотели создать “Фотошоп в браузере”. Да-да, Figma могла стать чем-то свершенно другим! Однако через некоторое время после этой идеи они решили сфокусироваться на векторной графике, и в частности дизайне интерфейсов.

Они определились, что в их инструменте не будет кистей для рисования, сложных фильтров, волшебных палочек и выделения, и других подобных инструментов для работы с растровой графикой. Зато в ней должно быть возможно быстро и просто создавать дизайн интерфейсов веб и мобильных приложений. Интересно, как бы выглядела Figma, если бы они тогда не приняли это решение?

Следующий вопрос: знаешь ли ты, сколько лет назад Дилан и Эван начали активно работать над своей идеей? 👀

Правильный ответ на первый вопрос викторины: основателями Figma являются Dylan Field и Evan Wallace! 👍 Эван был лаборантом Дилана в университете, который, к слову, Дилан так и не закончил.

Эван — гений компьютерной графики, и до сих пор активно занимается разработкой графического движка Figma. А Дилана всегда замечали за его предпринимательский талант. И, видимо, не зря!

А началось всё с того, что Эван сделал эксперимент, где довольно реалистично в браузере рендерится 3D сцена с мячом в воде. Попробуй подвигать его самостоятельно: http://madebyevan.com/webgl-water. Это показало, что в браузере можно работать со сложной графикой. Предприниматели поняли, что они должны создать...

Сможешь догадаться, что они хотели создать изначально? ☺

Насколько хорошо ты знаешь Figma? Давай проверим! Начнем с истории и вопроса об основателях компании. Кто придумал и создал Figma?

Чур не гуглить! 😘 Ответ и второй вопрос опубликуем через несколько часов.

🆕 Что новенького? Мы запустили Webhooks: ещё один способ интеграции Figma с твоими любимыми инструментами! #новое

Вебхуки позволяют совершать действия в таких инструментах как Slack, Jira или на твоём собственном сервере, когда в файлах или библиотеках Figma происходят изменения, появляются новые комментарии или происходят другие события. 😎 Простыми словами: они нужны, чтобы Figma сама отправляла запрос на указанный ресурс, когда в ней происходит какое-то действие. И мы сделали их безопасными, надежными, и простыми в использовании для разработчиков.

Вебхуки доступны на тарифах Professional и Organization, и они всегда прикреплены к определенной команде. В одной команде можно использовать до 20 вебхуков, и на каждый вебхук можно назначить один триггер, например публикация библиотеки или комментарий в файле.

📖 Подробности читай в документации: https://www.figma.com/developers/api#webhooks_v2

🆕 Слишком мелкий шрифт в интерфейсе Figma? Теперь ты можешь увеличивать и уменьшать масштаб интерфейса в десктопном приложении! 🔍 #новое

Новую настройку под названием Interface Scale можно найти в меню View на macOS (в менюбаре, не в самом редакторе) и в дополнительном меню в виде стрелочки 🔽 рядом с кнопкой сворачивания окна в приложении на Windows. Также есть горячие клавиши: Alt + Cmd + [+ или -] и Alt + Ctrl + [+ или -] на macOS и Windows соответственно. Там же есть и функция, позволяющая вернуть стандартный размер интерфейса (шоткат Alt + Cmd + 0 или Alt + Ctrl + 0).

Учи шорткаты! Знание сочетаний клавиш для часто используемых тобой команд экономит время. 😉 А новое бесплатное приложение «Шорткаттер» поможет быстро узнать и выучить горячие клавиши в Figma в интерактивной форме (и с красивыми анимациями)!

От команды разработчиков: “Это наш дипломный проект в Школе Бюро Горбунова и первый опыт в разработке приложений. Будем рады, если вы напишете в комментариях, что думаете о нашем продукте и каких функций не хватает 😊”

Шорткаттер работает как в браузере, так и в десктопном приложении. Пока доступна только версия для macOS. Скачать и узнать подробности о проекте можно сайте: https://shortcutter.ru/

Брейкпоинты заказывали? С плагином Responsive ты можешь легко посмотреть как будет выглядеть сайт на разных экранах! 🤯

⚡ Устанавливай плагин: https://www.figma.com/community/plugin/840727678445998968/Responsive

Как это работает? Создай вариации макета для разных размеров экранов (не забудь выставить Constraints) в отдельных фреймах. Элементы в них могут иметь разное расположение и размер — в этом и суть адаптивного дизайна. 😉 Запусти плагин и выбери исходные фреймы, а затем один пустой фрейм, который ты будешь менять. Не закрывая плагин, изменяй размер фрейма — плагин будет динамически выбирать и показывать макет нужного размера.

Теперь можно вставлять mailto: ссылки в редактор! ✉️ #новое

Когда в Figma появилась возможность вставлять ссылки, это заметно упростило создание документации и PDF файлов. А поддержка ссылок на email позволит оставлять в них контакты для связи по клику. 😎

Как создать такую ссылку? Это делается привычным способом: выбери текст и нажми в верхней панели кнопку создания ссылки или сочетание клавиш Ctrl + K / Cmd + K. Затем напиши в открывшееся поле адрес почты и нажми Enter. Можно также использовать ссылку mailto: с предварительно заполненными полями.

При наведении на такую ссылку можно будет скопировать адрес электронной почты или сразу открыть его в почтовом клиенте. 😋

Представляем Authenticated Embeds — встраивай приватные для Professional и Organization команд файлы в любимые командные инструменты! 🔐

Эта настройка включается в меню Share командных файлов. Приватно встроенные файлы будут доступны только пользователям Figma, у которых есть доступ к этому файлу. Если пользователь не вошел в аккаунт Figma, ему нужно будет залогиниться, чтобы увидеть встроенный файл.

Сейчас поддерживаются Dropbox Paper, Coda, Notion, Jira, Trello, Storybook, а если хочешь предложить ещё инструмент, заполни форму: https://docs.google.com/forms/d/e/1FAIpQLScFOMdv7vukAElj7XUqnpnu9IQBwzrz3O9HVnbQo1v60umQsQ/viewform

👉 Читай подробности в блоге: https://www.figma.com/blog/announcing-live-figma-embeds