Zero Block: список горячих клавиш
S; Переход в Select Tool D; Переход в Draw Tool B; Переход в Bend Tool E; Переход в Edit Tool ⇧ + H; Отразить объект по горизонтали в Select Tool ⇧ + V; Отразить объект по вертикали в Select Tool ⇧ при масштабировании; Пропорциональное масштабирование ⌥ при масштабировании; Свободное масштабирование из центра ⇧ + ⌥ при масштабировании; Пропорциональное масштабирование из центра ⌘/Ctrl + Z; Отменить действие ⌘/Ctrl + ⇧ + Z; Вернуть отмененные изменения ⌘/Ctrl + C; Копировать ⌘/Ctrl + V; Вставить ⌘/Ctrl + A; Выделить все элементы ⇧ при выделении точек или векторных элементов; Выделение нескольких элементов Стрелочки на клавиатуре; Движение элемента на 1 пиксель Стрелочки на клавиатуре с зажатым Shift; Движение элемента на 10 пикселей Backspace или Delete; Удалить элемент ⌘/Ctrl + I; Импортировать SVG [;Переместить элемент векторного изображения выше в слоях ];Переместить элемент векторного изображения ниже в слоях ⌥/Alt + [;Перенести элемент выше в слоях на один шаг ⌥/Alt + ];Перенести элемент ниже в слоях на один шаг ⌥/Alt + перетаскивание мышью в Select Tool; Сделать копию элемента в Select Tool ⌘/Ctrl + перетаскивание мышью в Edit Tool; Без отражения ⌥/Alt + перетаскивание мышью в Edit Tool; Отразить угол Двойной клик в Edit Tool; Переключить режим кривой
Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
Показать/спрятать слои
Добавить горизонт. направляющие
Добавить верт. направляющие
Работа с редактором изображений
Редактор изображений — встроенный инструмент, позволяющий отредактировать загруженное на сайт изображение.
Обработать изображение можно в любом из блоков, где предусмотрено его наличие. Исключением являются блоки из категории «Магазин». Карточки товаров рекомендуется подготовить перед загрузкой на сайт.
Загрузка изображения и активация редактора
Выберите подходящий для вашей страницы блок, перейдите в меню «Контент» этого блока, и затем в разделе с изображением загрузите нужную картинку.
После успешной загрузки рядом с изображением появится иконка карандаша. При клике на нее в всплывающем окне откроется редактор.
Интерфейс редактора
Доступны базовые операции, которые можно произвести с изображениями: изменить размер, отразить по горизонтали и вертикали, обрезать, добавить текст, обработать фильтрами. Также вы можете отменить, вернуть, или полностью сбросить действия над изображением, если что-то пошло не по плану.
Если же вам требуется сложная обработка изображения, то мы рекомендуем воспользоваться специализированными графическими редакторами и после этого загрузить изображение на сайт.
Изменить размер
Вы можете задать собственное разрешение для изображения. Но необходимо учитывать исходный размер картинки. Можно уменьшить картинку без потери качества, но её увеличение уже грозит ухудшением детализации.
Размер можно указать вручную или установить галочку у параметра «Сохранить пропорции», чтобы система автоматически подбирала оптимальное разрешение.
Рекомендованный максимальный размер изображения для загрузки на сайт — 1680×900 пикселей. Подробнее о подготовке изображений перед загрузкой на сайт можно узнать в нашем справочном материале.
Обрезание изображения
Если требуется оставить только часть изображения, для этого можно воспользоваться специальным инструментом.
Вы сможете выделить поле на изображении, которое вы хотите оставить. Чтобы изменения сохранились, нажмите на кнопку «Применить» и затем на кнопку «Сохранить».
Также вы можете использовать готовые пропорции: 1:1, 3:2, 4:3, 5:4, 7:5, 16:9.
Ориентация изображения
В некоторых случаях для идеального сочетания текста и изображения достаточно его отразить по горизонтали или вертикали. Это можно сделать с помощью инструмента «Развернуть».
Поворот изображения
Если вы хотите повернуть изображение на определенный градус, то для этого откройте в редакторе соответствующий пункт.
С помощью ползунка можно задать любое значение от -360 до +360 градусов. Либо использовать шаг в 30 градусов.
Добавление текста
При работе с большинством блоков из нашей библиотеки вы можете добавить текстовый элемент отдельно от изображения. Для этого есть соответствующие поля в меню «Контент».
Но иногда может возникнуть необходимость добавить текст прямо в изображение. В этом случае на помощь придет инструмент «Текст».
После активации инструмента нажмите на любом месте изображения, чтобы появился контейнер с текстом. Контейнеру можно задать подходящий размер и изменить его наклон. Также добавленный текст можно отформатировать: изменить цвет, установить курсив, добавить жирности, или подчеркнуть слово.
Дополнительно можно задать выравнивание текста по центру, левой и правой сторонам.
Гид по SEO: продвижение сайта
Сайты, сделанные на Тильде, по умолчанию отлично индексируются поисковиками за счет особенностей самой платформы: последовательного расположения блоков на странице. Кроме того, вы можете улучшить результаты выдачи в поисковых системах с помощью специальных настроек.
10 шагов по оптимизации
Сообщаем поисковым системам о сайте
Регистрируем сайт в поисковых системах, проверяем ошибки и настраиваем редирект в одном месте
Прописываем теги Title и Description
Теги для заголовков, чтобы создать на сайте структуру, понятную поисковикам
Добавляем в индексацию картинки
Указываем красивый адрес страницы
Загружаем собственный фавикон
Редактируем заголовок страницы
Добавляем фразы, по которым люди могут искать сайт
Объединяем разные версии страницы в одну
Объединяем версии сайта с https и http
Объединяем версии сайта с www и без www
Назначаем страницу, которую увидит человек, если перейдет по неправильной ссылке
Помогаем поисковым системам индексировать сайт
Оформляем страницу для красивого отображения в социальных сетях
Оптимизируем тексты на сайте для поисковиков
Закрываем страницу от индексации поисковыми системами
Найти битые ссылки на всем сайте или одной его странице
Чек-лист по SEO-оптимизации сайта
Сайты, сделанные на Тильде, индексируются поисковыми системами автоматически. Ниже 10 шагов , которые помогают улучшить результаты выдачи.
✓ Задайте страницам сайта название (Title) и описание (Description)
Как это сделать →
✓ Загрузите бейджик для социальных сетей
Как это сделать →
✓ Укажите читаемые адреса страниц (ЧПУ, человекопонятный URL)
Как это сделать →
✓ Добавьте теги H1, H2, H3
Как это сделать →
✓ Пропишите alt теги для изображений
Как это сделать →
✓ Загрузите фавикон
Как это сделать →
✓ Создайте страницу 404 ошибки
Как это сделать →
✓ Проверьте переадресацию https/http и www/без www
Как это сделать →
✓ Проверьте, нет ли запрета на индексацию
Как это сделать →
✓ Опубликуйте все страницы и посмотрите, нет ли ошибок в SEO-рекомендациях
Как это сделать →
✓ Добавьте сайт в Google Search Console и Яндекс.Вебмастер
Как это сделать →
Этих действий достаточно, чтобы Google и Яндекс узнали о существовании сайта и начали показывать в поисковой выдаче. На какой строчке будет размещаться ваш сайт и по каким запросам будет показываться, зависит от качества контента сайта, поведения посетителей сайта (как долго они остаются на сайте и совершают ли действия), объема трафика, наличия ссылок на ваш сайт на других сайтах и алгоритмов поисковых систем.
Как добавить сайт в Google и Яндекс
Как только вы публикуете страницу, она становится доступной для индексации роботами поисковых систем. Чтобы роботы быстрее «увидели» вашу страницу и начали показывать ее при поисковых запросах, сайт можно добавить в Google и Яндекс вручную.
Важно: для того, чтобы добавить сайт в поисковые сети, у вас должна быть назначена и опубликована главная страница.
Для этого нужно зайти в Настройки сайта → SEO и выбрать Яндекс Вебмастер или Google Search Console.
Нажмите «Подключить». Проследуйте инструкции на экране. После этого ваш сайт будет зарегистрирован в подключенной системе.
Подробнее о подтверждении владения доменного имени вы можете узнать в нашем справочном материале.
Быстрый доступ к Яндекс.Вебмастеру и Google Search Console
В Настройках сайта → SEO можно добавить сайт в поисковые системы Яндекс и Google, увидеть ошибки, влияющие на индексацию сайта, а также протестировать сайт на соответствие основным рекомендациям от поисковых систем, настроить редиректы страниц, загрузить иконки для браузера (фавикон), настроить https.
Настройки сайта → SEO
Если вы используете Каталог товаров, то в интерфейсе появится кнопка, с помощью которой можно добавить в Вебмастер дополнительный файл sitemap-store.xml, в котором будут ссылки для индексации всех опубликованных товаров вашего магазина.
SEO-рекомендации
В Настройках сайта → SEO → SEO-рекомендации можно посмотреть отчет Тильды с персональным анализом страниц вашего сайта со списком ошибок SEO-оптимизации и рекомендациями, как их устранить
Как задать страницам сайта название (тег Title) и описание (тег Description)
По умолчанию в результатах поисковых систем выводится та информация, которую вы задали в Настройках страницы → вкладка «Главное».
Если вы хотите, чтобы данные для поисковых систем или социальных сетей отличались от тех, что прописаны в настройках страницы, то в настройках страницы перейдите на вкладку «SEO» (или «Соцсети» соответственно), нажмите «Настроить отображение в поисковой выдаче» (или «Настройки отображения в Соцсетях» соответственно). Заполните поля «Заголовок» и «Описание» — они будут выводиться в результатах поиска после следующей индексации сайта.
Настроить отображение в поисковой выдаче
Настроить отображение в Соцсетях
Важно: заголовок для каждой страницы должен быть уникальным. То есть, у вас не должно быть двух страниц с заголовком «Блукрафт Бюро — услуги дизайнеров интерьеров в Москве».
Как добавить тег H1, H2, H3
Укажите на странице тег H1 для самого важного заголовка.
Заголовок, обозначенный тегом H1, имеет наибольшую значимость для поисковых систем. Его рекомендуется размещать в верхней части страницы. Задать тег можно в настройках любого блока, где есть заголовок.
Важно: на странице должен быть только один тег H1.
Если контент сайта имеет четкую структуру, то для заголовков следующих уровней можно задать теги h2 и h3. В отличие от тега h1, их может быть несколько на странице, но и на SEO они влияют слабее.
Альтернативный текст для изображений (тег alt)
Чтобы задать альтернативный текст для изображения, откройте меню «Контент» и нажмите знак многоточия напротив загруженного изображения.
SEO: alt-текст для изображения
Альтернативный текст (тег alt) показывается на месте изображения, если само изображение не видно (например, в момент загрузки при медленном соединении).
Кроме этого, поисковые системы воспринимают альтернативный текст как ключевые слова и учитывают их при индексации. Напишите текст таким образом, чтобы он был релевантен содержанию сайта в целом и отражал содержание картинки.
Если изображение используется как фон, alt тег для него не задается.
Чтобы добавить alt тег для изображений в блоках из категории «Галереи», откройте меню «Контент» и напротив загруженной картинки нажмите ссылку «Текст». Затем в поле Image alt for SEO укажите описание картинки.
Читаемые адреса страниц (ЧПУ, человекопонятный URL)
Чтобы задать понятный адрес страницы, откройте настройки страницы и укажите адрес.
Человекопонятный URL — URL-путь, состоящий из понятных слов, вместо системного адреса. Например, вместо /page4652188.html нужно указать /about. Такие адреса удобны для пользователей и помогают предположить содержание страницы.
В итоге ваш адрес страницы с ЧПУ будет выглядеть так: http://mysite.com/about
Как добавить фавикон (favicon, иконку для браузера)
Фавикон — значок веб-сайта или страницы. Отображается в браузере перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Чтобы поменять иконку, которая отображается на вкладке браузера, перейдите в Настройки сайта → SEO → Favicon.
Фавикон можно загрузить в формате .ico, .png и .jpg. Рекомендованный размер изображения — 32x32px. Дополнительно вы можете ознакомиться с рекомендациями от Яндекса и Google.
Также дополнительно можно загрузить иконку в формате .svg для светлой и темной темы браузера. Вы можете сгенерировать такую SVG-иконку с помощью стороннего сервиса. Данный формат стоит использовать как дополнительный, потому что он не поддерживается в некоторых браузерах, в частности, в Safari и некоторых браузерах на Android. Подробная таблица совместимости →
Здесь же можно загрузить иконку, которая будет отображаться в закладках в Safari и при добавлении сайта как приложения на рабочий экран (apple-touch-icon) и иконку и фон для иконок для платформы Android.
Важно: После переопубликации сайта для показа иконки может понадобиться очистка кэша браузера и его перезагрузка — некоторые браузеры, в частности, Chrome, сохраняют данные о старом фавиконе в кэше.
Как изменить название сайта на вкладке браузера
Название на вкладке браузера берется из названия страницы. Чтобы его поменять, откройте Настройки страницы и впишите название вашего сайта.
Ключевые слова сайта (keywords, семантическое ядро)
Чтобы прописать ключевые слова, перейдите в Настройки страницы → SEO → Отображение в поисковой выдаче → Настроить отображение в поисковой выдаче. Пропишите ключевые слова через запятую. Сохраните изменения и опубликуйте страницу.
Ключевые слова для товаров (метатеги keywords)
Ключевые слова можно добавлять к товарам в Каталоге. Подберите несколько ключевых слов или фраз, которые описывают товар и помогут людям найти ваше предложение в поисковых системах.
Откройте Каталог, перейдите в карточку товара → SEO. Пропишите ключевые слова через запятую. Сохраните изменения.
Что такое канонический (главный) адрес страницы
Если одно и то же содержание расположено на страницах с разными адресами, одна из страниц должна быть канонической, то есть содержать тег rеl=»canonical». Для поисковых систем это будет сигналом, что эту страницу нужно учитывать в поиске, а дублирующую страницу не нужно.
У любого сайта, сделанного на Тильде, есть служебный адрес вида http://project12345255.tilda.ws. Когда вы подключаете собственный домен (http://mysite.ru) и публикуете все страницы, то адрес с вашим доменом автоматически становится основным (ему присваивается атрибут rеl=»canonical»). Страница со служебным адресом по-прежнему открывается в браузере, но поисковые системы ее игнорируют, так как канонической является страница с подключенным доменом.
Дополнительно ничего делать не нужно.
Информация только для SEO специалистов: отредактировать канонический адрес страницы можно в Настройках страницы → SEO → Отображение в поисковой выдаче → Задать специальные мета-данные → Каноническая ссылка на страницу.
Зачем нужна переадресация с http на https
Если ваша страница открывается по адресу https://mysite.com и http://mysite.com, для поисковых систем это две разные страницы с одинаковым содержанием. Это может снижать рейтинг страницы в выдаче.
Если вы настроили https, сделайте переадресацию со страницы c префиксом http на страницу с https. Настройки сайта → SEO → Редиректы для www и https.
Как сделать переадресацию на адрес www. с сайта без www
Если страница открывается по адресу http://mysite.com и http://www.mysite.com, для поисковых систем это две разные страницы с одинаковым содержанием. Это может снижать рейтинг страницы в выдаче.
Если вы добавили субдомен www, сделайте переадресацию со страницы без www на страницу с www. Настройки сайта → SEO → Редиректы для www и https.
Как сделать переадресацию со старых ссылок на новые
Для того, чтобы сделать переадресации с кодом 301 со старых адресов на новые, перейдите в Настройки сайта → SEO → Редиректы страниц (Code 301). Укажите старый и новый адреса страницы без домена, начиная со слэша (символ «/»). Нажмите на кнопку «Добавить», а затем на кнопку сохранения изменений.
Переадресации работают только в рамках одного домена, если у вас были старые ссылки у сайта на Тильде или на другом сервисе. Результаты переадресации могут кешироваться браузером. Часто при изменении адреса редиректа будет срабатывать старое правило, поэтому для проверки, используйте сторонние сервисы, например http://www.redirect-checker.org/.
301 редирект работает только с несуществующих страниц. Если вы хотите перенаправлять пользователей с одной страницы на другую, используйте блок T223.
Примеры редиректов:
Старый адрес страницы: /oldpage Новый адрес страницы: /newpage
Старый адрес страницы: /page32323.html Новый адрес страницы: /newpage
Редирект с адресов прошлого сайта:
Cтарый адрес страницы: /blog/page.php?xxx=yyy Новый адрес страницы: /mytrip
Редирект с нескольких страниц на одну:
Cтарый адрес страницы: /blog/* Новый адрес страницы: /articles/
Знак * позволяет указать, что после слэша может быть любое произвольное количество символов. То есть, в таком случае редирект будет происходить с любых несуществующих страниц, адрес которых после домена начинается с /blog/.
Как сделать страницу ошибки 404
Страница 404 — это автоматическая страница, которая открывается, если запрашиваемый сайт невозможно найти. Обычно такая ошибка возникает, когда человек вводит некорректный адрес сайта или переходит по несуществующей ссылке (например, вы удалили старую ссылку, а в поисковой индексации она осталась).
Чтобы создать страницу 404 ошибки, добавьте новую страницу в вашем сайте, оформите ее, опубликуйте и затем в Настройках сайта → Еще → Страница 404. Выберите страницу из списка, сохраните и опубликуйте все страницы .
Не задавайте адрес страницы вида: http://mysite.com/404 — будет появляться стандартная ошибка Тильды
Подробнее о том, для чего нужна страница 404 и как ее оформить, читайте в статье:
Почему любому сайту нужна страница 404
Для чего нужны файлы robots.txt и sitemap.xml
robots.txt — файл для поисковых роботов, в котором указано, какие страницы нужно индексировать, а какие не нужно.
sitemap.xml — файл для поисковых роботов, который описывает то, как организован контент на вашем сайте. Это помогает им более точно индексировать ваши страницы.
Оба файла генерируются Тильдой автоматически, ничего дополнительно делать не нужно.
Чтобы увидеть файлы, добавьте к вашему адресу сайта /robots.txt или /sitemap.xml, например:
http://mysite.com/robots.txt
http://mysite.com/sitemap.xml
Важно: Директива Disallow: без параметров в файле robots.txt не означает запрета индексации всего сайта, а значит то же самое, что и Allow. Эту информацию подтверждает официальная статья Яндекса .
Гид по Фигме
для начинающих веб-дизайнеров
Figma (Фигма) — это графический онлайн-редактор для совместной работы. В нём можно создать прототип сайта, интерфейс приложения и обсудить правки с коллегами в реальном времени. В этой статье рассмотрим инструменты и возможности Фигмы, популярные плагины и расскажем, где научиться работать с сервисом бесплатно.
Для чего нужна Фигма
В Фигме могут работать дизайнеры, маркетологи, менеджеры и разработчики. В этом разделе расскажем об основных сценариях использования сервиса и его преимуществах перед другими графическими редакторами.
Какие проекты можно создавать в Фигме
В Фигме можно отрисовать элементы интерфейса, создать интерактивный прототип сайта и приложения, иллюстрации, векторную графику. Многие дизайнеры делают в ней макеты сайтов для Тильды.
Если вы хотите более гибко работать с интерфейсной графикой, можно отрисовать макет в Фигме и перенести в Тильду.
Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.
В Фигме можно сразу показать заказчику, как дизайн будет выглядеть на экране смартфона, планшета и других устройств.
Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.
Примеры интерфейса, созданного в Фигме
Примеры интерфейсов и прототипов, сделанных в Фигме
- Интерфейс мобильных приложений Figma iOS UI kit.
- Прототип панели управления Tesla Model 3 и элементы её интерфейса.
Векторная графика
В Фигме есть основные инструменты для работы с векторными объектами, она позволяет экспортировать дизайн в формат SVG, импортировать векторные объекты из Adobe Illustrator или редактора Sketch.
Что ещё можно делать в Фигме
Фигмой могут пользоваться не только дизайнеры. Неочевидные сценарии использования сервиса можно посмотреть в разделе Templates .
Шаблон карты пути клиента в Фигме
Предприниматели, SMM-щики и менеджеры проектов могут вести в Фигме проекты с Диаграммой Ганта , создавать рекламные объявления с шаблонами для Facebook.
Шаблоны для Facebook Ads Manager
Для разработчиков Фигма сделала режим Developer Handoff . Можно использовать направляющие, чтобы определить расстояния до объектов и их размер, скопировать CSS-стили элементов, их код для Android и iOS.
Совместная работа в Фигме
Фигма создала единую среду для работы целой команды над дизайном. В этом её основное преимущество перед другими графическими редакторами. Теперь разработчик всегда в курсе последних изменений макета, менеджер в реальном времени видит, что происходит с проектом, а заказчик оставляет комментарии к дизайну прямо в Фигме.
Три причины выбрать Фигму для совместной работы
- Кроссплатформенность. Работать в сервисе можно из браузера, с любого устройства и в любой операционной системе. Не нужно скачивать дополнительные приложения, чтобы согласовать дизайн.
- Облачный сервис. Фигма — онлайн-редактор, поэтому результаты работы сохраняются в облаке, их видят все члены команды. В любой момент можно посмотреть изменения, которые внёс коллега, и восстановить резервную копию, если нужно.
- Обратная связь. К макету в Фигме участники могут оставлять комментарии и получать фидбек от коллег. Согласования пройдут быстрее, а история переписки не затеряется в почте.
Начало работы в Фигме
В этом разделе рассмотрим, как устроена Фигма: создадим первый файл и поработаем с ним.
Как установить Фигму
В сервисе можно работать из браузера или скачать приложение Фигма на компьютер. Выбирайте браузер, если часто пользуетесь разными устройствами. Для этого зайдите на сайт Фигмы figma.com и зарегистрируйтесь.
Вы можете бесплатно скачать Фигму на рабочий стол, это поможет избавиться от многочисленных вкладок браузера перед глазами. Зайдите на figma.com/downloads и выберите версию программы для iOS или Windows.
Дополнительно скачайте бесплатную программу Figma Mirror (Android/iOS), чтобы оценить, как ваш дизайн будет выглядеть на телефоне.
Интерфейс Фигмы
После регистрации пользователю доступны две рабочие области — графический редактор и менеджер файлов, в котором можно создавать проекты и изменять настройки профиля. Рассмотрим пункты меню менеджера файлов.
В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения. Там же можно обновить тариф и удалить аккаунт.
Ищите файлы и проекты, в которых вы участвуете, через поиск Search .
Переименовывайте файлы, с которыми хотите работать в будущем, чтобы их было легче найти.
Последние файлы
В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recent .
Фигма сохраняет историю изменений каждого файла. Вы легко сможете восстановить резервную копию вашей работы.
В пункте Plugins собраны расширения, которые помогут ускорить работу в Фигме. Например, с плагином Unsplash можно находить стоковые иллюстрации, не покидая Фигмы. А с Iconify под рукой дизайнера будут 40 000 векторных иконок на все случаи жизни.
Пять плагинов, которые прокачают вашу Фигму
Плагины отсортированы по рекомендуемым, популярным и установленным. Чтобы увидеть все плагины, нажмите Browse all plugin.
Новый файл
Создать новый файл в Фигме можно через пункт Drafts или New File в правом углу экрана. По умолчанию файл называется Untitled .
Чтобы начать совместный проект, создайте команду: нажмите New Team и придумайте ей название.
Вы можете пригласить участников по email и обозначить их роли: только просмотр или редактирование файла. На бесплатном тарифе права редактора могут быть у двух человек, включая вас.
По умолчанию при добавлении команды, Фигма создаёт для неё новый проект . Проект — это папка. В ней команда хранит все файлы, которые относятся к одному проекту. Это удобно, если в каждом проекте у вас десятки файлов и вы не хотите в них путаться. На бесплатном тарифе вы сможете создать максимум три проекта.
Чтобы создать дополнительный проект внутри команды, нажмите New Projects . Внутри проекта создавайте новые файлы или перетаскивайте сюда SVG, PNG, JPEG-файлы.
Если вы фрилансер, и вам не нужно создавать команды и вести проекты, приглашайте участников к работе с файлом через кнопку Share .
Как устроен редактор файлов Фигмы
В новом файле пользователю доступны три области: рабочая область, панель инструментов и панель слоёв. Рассмотрим важные функции пунктов меню.
Панель инструментов
Рабочая область
Панель слоев
Панель инструментов
Поиск Search ищет пункты меню, а не элементы, которые вы создавали. Пригодится, если вам нужна конкретная команда, но вы забыли, где именно она находится.
Панель File
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью New file from Sketch можно импортировать файлы, созданные в графическом редакторе Скетч.
Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History .
Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF . Пригодится для презентаций.
Панель Edit
Панель позволяет работать с элементами дизайна в файле. Чтобы применить действие к элементу, его нужно выделить. Например, объект можно скопировать как код CSS, SVG или PNG-файл с помощью Copy As .
Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties : скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.
Окрашивайте объект в нужный цвет пипеткой Pick Color .
Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
Панель View
Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
Из полезного — функция Pixel Preview . Фигма — векторный редактор, поэтому дизайнер видит ровные векторные линии. Подключая просмотр объекта в пикселях, можно увидеть, как элемент будет выглядеть на экране.
Масштабировать макет можно функциями Zoom In/Zoom Out .
Чтобы показать линейки и вытянуть направляющие в Фигме, используйте Rules .
Чтобы расширить рабочую область и получить больше простора для вдохновения, можно скрыть панель слоёв и интерфейс командами Layers Panel, Show/Hide UI .
Панель Preferences
Панель определяет навигацию в файле. Первые три пункта — Snap to Geometry, Snap to Pixel Grid, Snap to Objects — настройки привязки. Помогут слегка примагнитить элементы и избежать «кривой» сетки, если вы работаете быстро.
Highlight Layers on Hover лучше держать включенным всегда — функция подсвечивает мелкие элементы дизайна при наведении — кнопки, буквы, иконки, значки.
Включенная функция Keyboard Zooms into Selection будет приближать/удалять макет относительно элемента, выбранного на экране.
Инструменты и возможности Фигмы
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Вы можете сгруппировать отдельные объекты во фрейм или разбить его на объекты сочетаниями клавиш
Windows;MacOS
Ctrl + Alt + G;Cmd + Opt + G;объединить объекты во фрейм Ctrl + Shift + G;Cmd + Shift + G;разбить фрейм на объекты
Чтобы выровнять объекты во фрейме по оси X/Y или расстояние между элементами, используйте панель справа.
Объекты внутри фрейма можно группировать. Допустим, вы делаете несколько страниц сайта. На каждой странице внизу экрана у вас будут контакты: телефон и электронная почта. Сгруппируйте объекты из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
Дополнительно вы можете ограничивать поведение элементов во фрейме. Например, вы хотите, чтобы кнопка вашего дизайна была всегда в углу экрана, даже если размер фрейма изменится. Выберите объект во фрейме и используйте инструмент Constraints в панели свойств справа.
Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
Модульная сетка
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
Для настройки сетки нажмите «+» в блоке Layout Grid .
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
Если вы делаете сайты на Тильде, задайте настройки: 12 колонок с отступом 40 пикселей, отступы по бокам экрана — 103 пикселя.
Ребята из Тильдошной сделали готовые шаблоны сетки Тильды под разные экраны для Фигмы, Фотошопа и Скетча.
Некоторым дизайнерам удобно добавлять вертикальный ритм, чтобы перемещать объекты по сетке и настраивать расстояние между элементами. Для этого нажмите «+» в блоке Layout Grid ещё раз — появится дополнительная сетка с шагом 10 пикселей.
Чтобы элементы дизайна не наезжали на края фрейма, используйте монтажные области. Чтобы контролировать отступы, можно использовать дополнительную сетку. Создайте одну колонку слева или справа нужной ширины, сделайте неброский цвет.
Для удобства можно выставить параметр Gutter = 0 и превратить колонку в линию с одним видимым краем.
Векторные формы
Создавайте векторные объекты инструментом Shape Tool . С его помощью можно отрисовывать элементы интерфейса, например, иконки.
Основные векторные объекты — прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы. Если нажать Alt — объект растягивается из центра.
Панель свойств объектов находится справа. Рассмотрим основные функции работы с объектами и покажем, как сделать в Фигме иконку «Закладка», используя прямоугольник произвольной формы.
Перемещайтесь между полями панели свойств с помощью кнопки Tab .
В верхней части панели можно изменить расположение объекта, растянуть его по оси X/Y. Выберем Corner Radius , чтобы скруглить углы нашего прямоугольника, как у закладки из примера. По умолчанию свойство применяется ко всем сторонам объекта. Чтобы выбрать два верхних угла, нажмём Independed Radius .
Поработаем с обводкой объекта. Толщина линии меняется в пункте Stroke заданным значением или мышкой. Заливка объекта нам не нужна, можно скрыть её в пункте Fill , нажав на «глаз».
Вытянем нижнюю сторону прямоугольника и сделаем его похожим на флаг. Чтобы редактировать фигуру, кликнете по ней дважды.
Редактирование фигуры активирует инструмент Pen Tool . Мы поговорим о нём подробнее дальше.
В разделе Effects можно добавить тень или размытие объекту. Чтобы сохранить иконку, перейдите в раздел Export и выберите формат SVG.
Pen Tool позволяет рисовать кривые линии в Фигме и несложные векторные формы: иконки и графику. Если вы хотите работать со сложными формами, лучше загрузить их из Adobe Illustrator или редактора Sketch.
Используйте дополнительную опцию Bend Tool для скругления кривых или Paint Bucket для заливки закрытого контура.
Изображения
Добавьте одно или несколько изображений в макет через панель File , инструмент Place Image или просто перетащите их с рабочего стола.
В Фигме фото вставляется как shape, а не как отдельный объект. По сути мы заливаем изображением фрейм — прямоугольник. Поэтому, мы можем изменить заполнение фрейма параметрами Fill, Fit, Crop, Tile
С включенным параметром Fill , изображение заполняет весь фрейм. При этом сложно соблюсти его пропорции и картинка может обрезаться.
С включенным параметром Fit , изображение отображается во фрейме полностью. Если пропорции фрейма не совпадают с пропорциями картинки, в нём появится пустое пространство.
С включенным параметром Crop , можно приблизить нужный ракурс изображения, обрезав «лишние» части.
С включенным параметром Tile , вы сможете создать паттерн или узор.
Регулируйте в Фигме цвета, яркость изображения, контраст, насыщенность, яркость отдельных участков фото.
Чтобы добавить изображению градиент, используйте знак «+» в панели свойств. Выберите стиль градиента: Linear (Линейный), Radial (Радиальный), Angular (Угловой) или Diamond (Ромбовидный).
Используйте дополнительные настройки цвета и изменяйте положение градиента, чтобы добиться нужного эффекта изображения.
Вы можете добавлять цвета или другие фотографии к изображению с инструментом «смешивание слоёв». Например, чтобы попасть в фирменный стиль сайта или добавить фотографии индивидуальности.
Вы можете применять векторные объекты к фотографиям и использовать их как маски. Чтобы сделать маску в Фигме, создайте объект, перенесите слой ниже фотографии. Выделите оба слоя и выберите панель Object → Use as mask (горячие клавиши для Windows: Ctrl + Alt + M, для Mac OS: Cmd + Opt + M).
Вы можете загружать в Фигму SVG-файлы и работать с ними. SVG-файлы можно загрузить с компьютера либо переносить прямо из Adobe Illustrator или Sketch с помощью горячих клавиш Cntrl + C и Cntrl + V.
Обычно файлы такого типа вставляются как фрейм. Перейдите в слои, объедините векторные объекты в группу клавишами Ctrl+G и перетяните их выше фрейма.
Эффекты и маски
Фигма позволяет работать с заливкой фреймов и текстовых слоёв. Инструменты заливки находятся в левой панели свойств. Вы можете выбрать цвет, прозрачность, указать конкретные значения цвета.
В Фигме шесть типов заливки: сплошной цвет (Solid), линейный градиент (Linear), радиальный градиент (Radial), угловой градиент (Angular), радиальный с четырьмя лучами (Diamond), изображение (Image). По умолчанию для объекта выбран режим ровной заливки Solid .
Переключитесь на Linear — градиент с осью, вдоль которой изменяется цвет. По умолчанию он с двумя точками, одна из которых прозрачная. Добавьте цвета ползунком или укажите значение цвета в поле Hex-кода.
У линейного градиента есть третья неприметная ручка. Если зажать Alt (Opt) и потянуть за неё, цветовой переход отрисовывается перпендикулярно ей.
Вы можете менять расположение крайних точек градиента. Двигая ползунки, вы можете настроить угол поворота градиента и скорость перехода от одного цвета к другому.
Вы можете добавить несколько цветов в градиент, кликнув по шкале над палитрой. Чтобы удалить цвет — нажмите Delete.
Добавьте объектам заливки с разными градиентами и сочетайте фигуры друг с другом. Вы можете использовать Layer — режим наложения, накладывать их друг на друга для интересного решения.
По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы или установите Font Installers (Windows/Mac OS), чтобы загружать их в браузер.
Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка.
Если будете переносить дизайн в Тильду, указывайте в процентах межстрочное расстояние (0-160%) и межбуквенное расстояние (0-30%).
В меню Advanced Type есть три типа изменения размера текстового блока: 1) Width , где ширина подстраивается под контент, 2) Fixed , чтобы задать блок фиксированной ширины 3) Height , чтобы подстроить высоту текстового блока под его контент.
Всегда создавайте отдельные текстовые блоки для заголовка и основного текста. Так их удобнее редактировать.
В Фигме можно перевести шрифт в кривые и создать необычный объект вашего дизайна. Выберите текстовый слой, пункт Flatten и дважды кликнете на текст.
Изменённый шрифт можно сохранить как SVG-файл и вставить в дизайн.
Компоненты
Компоненты в Фигме помогают применять изменения к группе элементов. Это экономит время дизайнера при изменениях макета.
Допустим, вы сделали макет на 50 страниц, а заказчик захотел изменить в нём цвет кнопок. С компонентами вам достаточно будет пару раз кликнуть мышкой и применить новый цвет ко всем кнопкам сразу.
Чтобы превратить объект или группу объектов в компонент, выделите их и нажмите Create Component (Ctrl+Alt+K).
Увидеть компоненты можно по цвету слоя — Фигма помечает их фиолетовым. Кроме цвета, родительский компонент помечается иконкой с 4 ромбами, а дочерние компоненты — иконкой с одним ромбом.
Теперь ваш фрейм — родительский компонент. Создайте его копии, чтобы получить дочерние компоненты. Все изменения родительского компонента будут отражаться на дочерних компонентах.
Вы можете менять настройки дочернего компонента, делая его относительно самостоятельным. Например, можно вручную задать компоненту размер, цвет, обводку, отличные от родительского компонента.
При этом связь между компонентами не потеряется. Внесите новый объект в родительский компонент, и он отобразиться в дочерних компонентах, даже измененных ранее.
Чтобы восстановить нарушенную связь между родительским и дочерним компонентом, выделите дочерний компонент, нажмите иконку возврата действия и сбросьте параметры, которые меняли в нём в ручную.
Когда вы работаете с компонентами, удобно держать их в одном месте, чтобы они не терялись на холсте. Организовать компоненты для небольших проектов, например, сайта из десятка страниц, можно в отдельном фрейме-контейнере.
Создайте новый фрейм, назовите его Components и вложите в него родительские компоненты.
Пример организации компонентов
Наряду с компонентами в Фигме можно создавать стили. Это коллекции текста, цветов и эффектов, которые вы сможете применять к элементам дизайна. Когда вы меняете свойства стиля, они меняются во всех объектах, использующих его.
Сохраните шаблон из компонентов и стилей, чтобы создать собственную дизайн-библиотеку для будущих проектов.
Текст. Создайте стили, которые будете применять ко всем возможным текстам вашего дизайна: заголовкам, параграфам, подписям, тэгам. Используйте панель свойств справа.
Сохраните все варианты текстовых стилей в отдельном фрейме и применяйте при работе с текстами.
Цвет . По аналогии с текстовыми стилями, создайте заливки с основными цветами вашего дизайна. Подпишите каждый цвет и укажите его код.
Эффекты . Создайте стили размытия слоя, фона и тени.
Для работы с компонентами Фигма разработала функцию Auto Layout . Она помогает избежать проблемы с размером контента в новых компонентах. Допустим, вы создали дочерний компонент кнопки и вписали в нём новую подпись. Размеры кнопки при этом не изменились и ваш дизайн выглядит непрофессионально.
Уберите связь дочернего элемента с родительским элементом командой Detach Instance и примените к нему Auto Layout.
Теперь размеры кнопки динамически изменяются под её содержимое.
Если вы копируете кнопку с функцией Auto Layout — копии также будут динамически изменяться в зависимости от контента.
Дополнительные возможности
В этом разделе рассмотрим инструменты для повышения скорости работы в сервисе, тарифы и ограничения Фигмы.
Плагины для Фигмы
Плагины расширяют возможности Фигмы, помогают ускорить работу и автоматизировать рутинные задачи. Вы можете просматривать плагины, как в магазине приложений: на карточке плагина описаны функции, количество установок и лайков.
Шесть плагинов, на которые стоит обратить внимание дизайнеру:
Плагин генерирует сетку для платформы Tilda Publishing. Раньше дизайнерам нужно было запоминать значения сетки или копировать её, а теперь достаточно нажать одну кнопку.
Вставляйте изображения за два клика. Выбирайте область, в которую нужно вставить картинку или импортируйте ее на холст с оригинальным размером.
Не загружайте картинки в маленькие формы, если собираетесь их масштабировать — фигма автоматически снижает разрешение картинки.
Более 40 000 векторных иконок на все случаи жизни: Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji.
Добавьте прототипам анимации, не переключаясь на Principle, Haiku или After Effects.
Позволяет рисовать векторные объекты быстрее, чем Pen Tool.
Иллюстрации людей, созданные Пабло Стэнли — иллюстратором и дизайнером платформы InVision Studio. Можно брать готовые варианты иллюстраций или сочетать элементы, создавая уникальные работы.
Горячие клавиши в Фигме
Сочетания горячих клавиш указаны в пункте Keyboard Shortcuts. Вызовите его из меню Help and Account, когда работаете с файлом, или нажмите «Cmd + Shift + ?» в Mac OS и «Ctrl + Shift + ?» в Windows.
Фигма подсвечивает синим цветом те комбинации клавиш, которые вы используете в работе и серым — которыми вы не пользуетесь.
- Основные параметры
- Инструменты
- Настройки просмотра
- Масштабирование
- Работа с текстом
- Работа с формами
- Выделение
- Компоненты
Основные параметры;Windows;Mac OS
Показать / скрыть интерфейс редактора;Ctrl + \;Cmd + \ Пипетка;I;I Поиск команд в «Меню»;Ctrl + /;Cmd + /
Инструменты;Windows;Mac OS
Перемещение объектов;V;V Фрейм;F;F Перо;P;P Карандаш;Shift + P;Shift + P Текст;T;T Прямоугольник;R;R Эллипс;O;O Линия;L;L Стрелка;Shift + L;Shift + L Комментарий;C;C Пипетка;I;I Нож;S;S
Настройка просмотра;Windows;Mac OS
Линейка в Фигме;Shift + R;Shift + R Выделить все элементы;Ctrl + Shift + 3;Cmd + Shift + 3 Показать пиксели;Ctrl + Alt + Y;Cmd + Opt + Y Сетка;Ctrl + Shift + 4;Cmd + Shift + 4 Пиксельная сетка;Ctrl + ‘;Cmd + ‘ Интерфейс редактора;Ctrl + \;Cmd + \ Курсоры других пользователей;Ctrl + Alt + \;Cmd + Opt + \ Слои;Alt + 1;Opt + 1 Компоненты;Alt + 2;Opt + 2 Библиотеки команды;Alt + 3;Opt + 3
Масштабирование;Windows;Mac OS
Перемещение по холсту;Space + drag;Space + drag Увеличение масштаба;+;+ Уменьшение масштаба;-;- Увеличение масштаба до 100%;Shift + 1;Shift + 1 Масштабировать выделенный элемент;Shift + 2;Shift + 2 Масштабировать предыдущий фрейм;Shift + N;Shift + N Масштабировать следующий фрейм;N;N Предыдущая страница;Page Up;Fn + ↑ Следующая страница;Page Down;Fn + ↓ Предыдущий фрейм;Home;Fn + ← Следующий фрейм;End;Fn + →
Работа с текстом;Windows;Mac OS
Выделить жирным;Ctrl + B;Cmd + B Выделить курсивом;Ctrl + I;Cmd + I Подчеркнуть;Ctrl + U;Cmd + U Вставить текст в стиле выбранного тестового поля;Ctrl + Shift + V;Cmd + Shift + V Выровнять по левому краю;Ctrl + Alt + L;Cmd + Opt + L Выровнять по центру;Ctrl + Alt + T;Cmd + Opt + T Выровнять по правому краю;Ctrl + Alt + R;Cmd + Opt + R Выровнять по ширине;Ctrl + Alt + J;Cmd + Opt + J Изменить размер текста;Ctrl + Shift < или >;Cmd + Shift + < или >Изменить расстояние между символами;Alt + , или .;Opt + , или . Изменить расстояние между строками;Alt + Shift < или >;Opt + Shift + < или >
Работа с формами;Windows;Mac OS
Перо;P;P Карандаш;Shift + P;Shift + P Заливка;В;В Удалить заливку;Alt + /;Opt + / Удалить обводку;/;/ Поменять местами заливку и обводку;Shift + X;Shift + X Преобразовать обводку в кривые;Ctrl + Shift + O;Cmd + Shift + O Сглаживание слоёв кривых;Ctrl + E;Cmd + E
Выделение;Windows;Mac OS
Выделить все;Ctrl + A;Cmd + А Выделить все, кроме;Ctrl + Shift + A;Cmd + Shift + А Отменить выделение;Esc;Esc Выделить слои под другими слоями;Ctrl + click;Cmd + click Выделить слой на панели меню;Ctrl + right click;Cmd + right click Выделить дочерний элемент;Enter;Enter Выделить родительский элемент;Shift + Enter;Shift + Enter Выделить следующий элемент;Tab;Tab Выделить предыдущий элемент;Shift + Tab;Shift + Tab Сгруппировать элементы;Ctrl + G;Cmd + G Разгруппировать элементы;Ctrl + Shift + G;Cmd + Shift + G Преобразовать во фрейм;Ctrl + Alt + G;Cmd + Opt + G Показать / скрыть элемент;Ctrl + Shift + H;Cmd + Shift + H Заблокировать / разблокировать элемент;Ctrl + Shift + L;Cmd + Shift + L
Компоненты;Windows;Mac OS
Показать все компоненты;Alt + 2;Opt + 2 Создать компонент;Ctrl + Alt + K;Cmd + Opt + K Преобразовать компонент во фрейм;Ctrl + Alt + B;Cmd + Opt + B Многопользовательская библиотека ваших компонентов и стилей;Ctrl + Alt + 0;Cmd + Opt + 0
Экспорт из Фигмы
Вы можете экспортировать отдельные файлы или фрейм, в котором они собраны. Меню экспорта находится в панели справа.
Горячие клавиши для вызова меню экспорта
Windows: Ctrl + Shift + E
Mac OS: Cmd + Shift + E
Вы можете добавить название к имени файла (Suffix) и настроить его размер, например, сделать файл кратный двум.
Выберите формат сохранения файла: для иконок подойдёт SVG, для изображений — JPEG и PNG, а макеты с векторными объектами, которые нужно масштабировать, лучше сохранить в PDF.
На бесплатном тарифе можно работать над тремя проектами. Вместе с вами вносить правки в файл сможет один человек, если предоставить ему права «редактора». Показать файл можно любому количеству пользователей. На бесплатном тарифе история версий макета хранится 30 дней.
Профессиональный тариф позволяет команде работать над неограниченным количеством проектов, бесконечно хранить историю изменений и использовать командную библиотеку элементов. Стоит 12 долларов в месяц за каждого редактора. Преподавателям и студентам тариф предоставляется бесплатно на два года.
Для крупных организаций подписка будет стоить 45 долларов в месяц за каждого редактора.
Ограничения Фигмы
Дизайнеры Тильды любят работать в Фигме. Они создали в ней библиотеку макетов, иллюстраций и файлов PNG, которой может удалённо пользоваться каждый участник команды, не боясь потерять исходники файлов. Несмотря на плюсы сервиса, у Фигмы есть ряд ограничений:
Нельзя установить локальный шрифт без перезапуска . Чтобы применить дополнительный шрифт в Фигме, мало скачать его на компьютер. Придётся прервать работу и перезапустить сервис.
Неточный экспорт файлов . При копировании PNG, JPG и SVG-файлов, Фигма может добавлять к изображению пару пикселей обводки и искажать линейные иллюстрации.
Нет защиты от копирования . На бесплатном тарифе Starter нельзя защитить файл от копирования, недобросовестный заказчик может сохранить его для редактирования через Duplicate to Your Draft и использовать макет.
Нельзя работать без интернета . Фигма похожа на Google Docs: в самолёте или за городом без интернета сохранить изменения в макете не получится. Фигма обновит его, когда вы будете в сети. Нельзя изменять сочетания клавиш.
К заданным горячим клавишам придётся привыкнуть . Или можно скачать плагин Autohotkey и настроить Фигму под себя.
Нет русскоязычной версии . Вы не найдёте Фигму на русском языке, это англоязычный сервис. Если вы до этого работали с любых графическим редактором или прочли нашу инструкцию — проблем не возникнет.