Создать div блоки онлайн бесплатно: Блочная верстка сайта — урок с примером

Leave a Comment / Разное / By /

Содержание

Блочная верстка сайта — урок с примером

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
	<div>
	<h3>header (шапка сайта)</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Левая панель</h3>
	</div>
		 
	<div>
	<h3>Основной контент страницы</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>footer (низ сайта)</h3>
	</div>
</div>
</body>
</html>

Разберём некоторые моменты.

<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}
#header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
#container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
#navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
#sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}
#content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
#clear {
     clear: both;
}
 
#footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; }

запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Создание блок-схемы с помощью SmartArt

Блок-схема представляет последовательные этапы задачи или процесса.

Существует много разных макетов SmartArt, которые можно использовать для представления этапов процесса, в том числе макеты, в которые можно добавить рисунки.

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

В этой статье

  • Создание блок-схемы с рисунками

  • Добавление или удаление фигур блок-схемы

  • Перемещение фигуры в блок-схеме

  • Изменение цветов блок-схемы

  • Применение стиля SmartArt к блок-схеме

  • Анимация блок-схемы

Создание блок-схемы с рисунками

    org/ItemList»>

  1. На вкладке Вставка в группе Иллюстрации нажмите кнопку SmartArt.

  2. В коллекции Выбор рисунка SmartArt

    выберите элемент Процесс, а затем дважды щелкните Процесс со смещенными рисунками.

  3. Чтобы добавить рисунок, в поле, в который его нужно добавить, щелкните значок , выберите рисунок, который нужно отобразить на диаграмме, и нажмите кнопку Вставить.

  4. Для ввода текста выполните одно из следующих действий:

    • org/ListItem»>

      В области текста щелкните элемент [Текст] и введите содержимое.

      Примечание: Если область текста не отображается, на вкладке Конструктор нажмите кнопку Область текста.

    • Скопируйте текст из другого места или программы, в области текста щелкните элемент [Текст], а затем вставьте скопированное содержимое.

    • Щелкните поле в графическом элементе SmartArt и введите свой текст.

      Примечание: Для достижения наилучших результатов используйте это действие после добавления всех необходимых полей.

Добавление или удаление полей блок-схемы

Добавление поля

    org/ItemList»>

  1. Щелкните графический элемент SmartArt, в который нужно добавить поле.

  2. Щелкните существующее поле, ближайшее к месту вставки нового поля.

  3. На вкладке Конструктор в группе Создание рисунка щелкните стрелку рядом с кнопкой Добавить фигуру.

    Если вы не видите вкладку Конструктор, убедитесь, что выбрали графический элемент SmartArt.

  4. Выполните одно из указанных ниже действий.

    • Чтобы вставить поле на том же уровне, что и выбранное поле, но после него, выберите команду Добавить фигуру после.

    • Чтобы вставить поле на том же уровне, что и выбранное поле, но перед ним, выберите команду Добавить фигуру перед.

Если необходимо добавить поле в блок-схему, попробуйте добавить его перед выбранной фигурой или после нее, чтобы определить подходящее место.

Добавление поля из области текста

  1. Поместите курсор в начало текста, куда вы хотите добавить фигуру.

  2. Введите нужный текст в новой фигуре и нажмите клавишу ВВОД. Чтобы добавить отступ для фигуры, нажмите клавишу TAB, а чтобы сместить ее влево — клавиши SHIFT+TAB.

Удаление поля

Перемещение фигуры в блок-схеме

  • Чтобы переместить фигуру, щелкните ее и перетащите на новое место.

  • Чтобы фигура перемещалась с очень маленьким шагом, удерживайте нажатой клавишу CTRL и нажимайте клавиши со стрелками.

Изменение цветов блок-схемы

Чтобы быстро придать графическому элементу SmartArt профессиональный вид, можно изменить цвета блок-схемы или применить к ней стиль SmartArt. Вы также можете добавить эффекты, такие как свечение, сглаживание или объемные эффекты. Кроме того, в презентациях PowerPoint можно анимировать блок-схему.

Применение цветов темы

  1. Щелкните графический элемент SmartArt, цвет которого нужно изменить.

  2. На вкладке Конструктор в группе Стили SmartArt нажмите кнопку Изменить цвета.

    Если вы не видите вкладку Конструктор, убедитесь, что выбрали графический элемент SmartArt.

  3. org/ListItem»>

    Выберите нужную комбинацию цветов.

Совет: (ПРИМЕЧАНИЕ.) При наведении указателя мыши на эскиз можно просмотреть, как изменяются цвета в графическом элементе SmartArt.

Изменение цвета или стиля фона поля блок-схемы

  1. В графическом элементе SmartArt щелкните правой кнопкой мыши фигуру, которую вы хотите изменить, и выберите пункт Формат фигуры.

  2. Чтобы изменить стиль заливки, в области Формат фигуры щелкните стрелку рядом с заголовком Заливка, чтобы развернуть список, и выберите один из следующих вариантов:

  3. org/ListItem»>

    Нажмите кнопку Цвет и выберите цвет из коллекции.

  4. Чтобы указать степень прозрачности фонового цвета, переместите ползунок Прозрачность или введите число в поле рядом с ним. Значение прозрачности можно изменять от 0 (полная непрозрачность, значение по умолчанию) до 100 % (полная прозрачность).

Изменение типа или цвета границы

  1. В графическом элементе SmartArt щелкните правой кнопкой мыши фигуру, которую вы хотите изменить, и выберите пункт Формат фигуры.

  2. org/ListItem»>

    Чтобы изменить цвет границы, в области Формат фигуры щелкните стрелку рядом с заголовком Линия, чтобы развернуть список, и выберите один из следующих вариантов:

Применение стиля SmartArt к блок-схеме

Стиль SmartArt — это сочетание различных эффектов, например стилей линий, рамок или трехмерных эффектов, которые можно применить к полям графического элемента SmartArt для придания им профессионального, неповторимого вида.

  1. Щелкните графический элемент SmartArt, стиль SmartArt которого нужно изменить.

  2. На вкладке Конструктор в группе Стили SmartArt выберите нужный стиль.

    Чтобы увидеть другие стили SmartArt, нажмите кнопку Дополнительные .

    Если вы не видите вкладку «Конструктор», убедитесь, что выбрали графический элемент SmartArt.

    Примечания: 

    • Если навести указатель мыши на эскиз, можно увидеть, как изменяется стиль графического элемента SmartArt.

    • Кроме того, вы можете перемещать фигуры или изменять их размер, а также добавлять заливку, эффекты и рисунки.

Анимация блок-схемы

Если вы используете PowerPoint, можно анимировать блок-схему, чтобы привлечь внимание к отдельным фигурам.

  1. org/ListItem»>

    Щелкните графический элемент SmartArt, который вы хотите анимировать.

  2. На вкладке Анимация в группе Анимация щелкните Параметры эффектов и выберите параметр Последовательно.

Примечание: Если скопировать блок-схему с примененным к ней эффектом анимации на другой слайд, эффект также будет скопирован.

Дополнительные сведения

Выбор графического элемента SmartArt

Создание организационной диаграммы с помощью графических элементов SmartArt

Создание блок-схемы

10 сервисов для создания структуры сайта в 2020 году / Хабр

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

В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.

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

Сайтмэп — это структура страниц сайта представленная в иерархической модели. Такая схема помогает оценить объем страниц, которые формируют сайт, а также понять логику их взаимосвязи. Иногда это примитивные по организации и структуре схемы. А порой очень сложные с многоуровневой вложенностью карты. Сайтмэпы помогают планировать распределение содержания и механику навигации будущего сайта.

Пример структуры веб-сайта (Блоки кликабельны)

Рассмотрим три типа сайтмэпов:

Визуальные сайтмэпы(visual sitemap) используются как вспомогательный элемент в планировании, анализе и прототипировании проекта. Сегодня тяжело представить начало работы над проектом без предварительного планирования. Cайтмэп поможет лучше понять механику будущей навигации, оценить объем необходимого контента. Визуальный сайтмэп — важный элемент в выстраивании коммуникации внутри команды разработчиков. Благодаря наглядной структуре сайта обсуждение, оценка и распределение ресурсов значительно упрощается.

HTML cайтмэпы призваны помогать в навигации по сайту. Традиция создавать отдельную страницу с сайэтмэпом считают устаревшей, но тем не менее, такой подход не будет лишним, если проект обладает сложной структурой и многоуровневой вложенностью.

XML сайтмэпы скрыты от пользователей, но при этом важны. Описывая структуру сайта и взаимосвязи страниц, XML сайтмпэмы облегчают поисковым машинам анализ сайта. Следовательно положительно влияют и на ранжирование. В XML сайтмэпах важна чистота описания структуры и используемый синтаксис, поскольку кроулеры поисковых движков не терпят непоследовательности и расхлябанности кода. XML сайтмэпа заменили более старый способ «прямой загрузки в поисковые движки» на специальной отдельной странице. Теперь загрузка сайтмэпа происходит напрямую, или же разработчики просто ждут, пока поисковая машина найдет файл самостоятельно. Обновляя файл сайтмэпа с новой структурой, вы обеспечиваете более быстрое индексирование страниц, по сравнению со стандартной автоматической процедурой поисковой машины.

Можно быстро получить визуальную структуру почти любого веб-сайта (visual sitemap generator) у которого есть файл sitemap.xml (нужно просто ввести адрес сайта). Ее можно сохранить, дополнить, редактировать и делиться.

Зачем нужны визуальные сайтмэпы?

Планирование и прототипирование сайта уже давно стали стандартом индустрии. Чаще всего сначала строится майндмэп проекта. Делается это, чтобы определить главные и второстепенные элементы будущего сайта, а также задачи, которые сайт или сервис будет решать.

На следующем этапе планируется подробная иерархия страниц, их структура. Этот этап требует осмысления и обсуждения. Поэтому такой прототип должен быть понятен всем участникам процесса (программистами, дизайнерам, разработчикам, контент-менеджерам). Формализованная структура сайта (сайтмэп) становится отправной точкой.

Сервис c минималистичным и свежим подходом в дизайне интерфейса, запущенный в 2019 году. Без лишних деталей и довесков Octopus работает быстро, а чистый визуальный язык располагает к работе.

Основная идея проектирования сайтмэпов в Octopus заключается в формировании страниц из блоков и вайрфреймов низкой точности (low fidelity wireframes). Такие конструкции наглядны и призваны дать подробное представление о структуре будущей страницы.

Протестировать Octopus.do возможно без регистрации. Зарегистрировать профиль понадобится только в момент сохранения проекта. Также можно посмотреть простое и понятное видео о проекте.

Интуитивно понятный интерфейс не перегружен элементами и анимацией. Хотя отдельные пиктограммы могут показаться слегка мелковаты. Создание и добавление блоков происходит быстро и с помощью очевидной механики.

Есть и более удобный способ добавления блока — достаточно нажать Enter, и в нижней части страницы появится новый блок. Такой метод позволит быстро заполнять содержание с использованием одной лишь клавиатуры. Drag’n’drop работает предсказуемо и быстро.

Блокам могут быть присвоены цвета из заданной палитры цветов:

Пользователям платных подписок Octopus.do доступен экcпорт сайтмэпов в PNG и PDF. С бесплатной подпиской можно делиться прямой ссылкой на проект. При этом внешние пользователи смогут вносить изменения в сайтмэп, что упрощает командную работу.

Организация информационных слоев и разделов сервиса открывается в аккуратных поп-апах. Благодаря этому складывается впечатление, что пользователь не покидаете рабочее пространство минималистичного редактора.

Функция добавления текстового описания к блокам, будет полезной для планирования контента в проекте. Поп-ап вызывается нажатием на пиктограмме документа в правой части блока:

В процессе сборки контента часто возникает необходимость быстро оценить местоположение визуальных материалов (фотографии, иллюстрации). Функция добавления изображений поможет справиться с этой задачей:

Кстати, с помощью добавления картинок в структуру можно вставлять полноценные макеты дизайна страниц по мере их готовности.

Отличительная особенность Octopus — наличие функции Estimate. Интерфейс реализован в виде выезжающей панели, которая содержит таблицу-калькулятор для оценки стоимости работ. И при известной часовой ставке за конкретную экспертизу можно оценить временные затраты и бюджет проекта.

В распоряжении пользователей функции дублирования страниц в иерархии и создание копии проекта. Контроль над дизайном сайтмэпа: настраиваемые стили бордеров страниц и стилизация под рамки смартфона, а также усовершенствованный механизм командной работы.

Резюме

Рациональный набор инструментов и интеллигентный дизайн интерфейса, отвечающий духу времени. Регулярные обновления и улучшения функционала от команды Octopus, делают сервис привлекательным и, безусловно, полезным.

Стоимость, подписка: бесплатный план предусматривает 1 активный проект. Платные подписки от 8 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF и PNG (только для платных пользователей)

Отсутствие необходимости регистрироваться — преимущество сервиса Gloompas. Пользователь сразу же оказывается в рабочей среде с минималистичным дизайном. Интерфейс интуитивен и помогает втянуться в процесс довольно быстро. Добавление и удаление блоков сайтмэпа происходит с понятной и предсказуемой механикой.

Возможность настраивать цвет каждого отдельного блока, задавать размер шрифта — удобный функционал, который помогает формировать акценты в сайтмэпе.

Отдельно стоит отметить настройки вида: Map View, Matrix View и Outline. В зависимости от структуры и масштаба проекта можно выбрать способ отображения сайтмэпа.

В проектах с громоздкой структурой и многоуровневой вложенностью удобной окажется функция сворачивания и разворачивать группу страниц. Gloomaps — бесплатный сервис, но не без ограничений. Ссылка на проект хранится 14 дней, и каждое новое посещение страницы проекта продлевает доступность ссылки на следующие 14 дней. Насколько известно, создавать приватные проекты нельзя. Функционал для автоматической генерации сайтмэпов не предусмотрен.

Для тех, кто будет пользоваться сервисом регулярно, полезно использовать шорткаты, которые описаны в выезжающей панели меню. А функции экспорта в различные форматы расширяют возможности делиться созданным сайтмэпом.

Резюме
Бесплатный сервис с оптимальным набором функций и широкими возможностями экспорта готового проекта.

Стоимость, подписка: бесплатно
Простота использования: подходит для начинающих
Дизайн: ★★★☆☆
Командная работа: ✓
Экспорт: ссылка, PNG, PDF, XML

Наглядный и насыщенный шаблонами Flowmapp помогает создавать как визуальные сайтмэпы, так и планировать потоки пользователей.

Сперва необходимо зарегистрироваться. Проект можно:

  • начать с чистого листа
  • импортировать из XML файла
  • расширить существующий шаблон

В заготовленных шаблонах найдется три типа проектов: e-Commerce, корпоративный проект и новостной портал.

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

Анимации и реакции элементов интерфейса помогают втянуться в процесс и научиться базовым манипуляциям. Удобно реализованы групповые выделения страниц для удаления или смены лейбла.

Одно из основных преимуществ — наглядные шаблоны страниц. Библиотека шаблонов покрывает большинство возможных информационных паттернов — незаменимая и наглядная фича в подготовке и планирования контенте для будущего сайта.

А для тех, кому в первую очередь важна структура, можно переключиться в компактный вид с одними заголовками.

Что касается навигации, то к стандартному набору функции добавлена довольна удобная механика — Project Map. Project Map сочетает в себе как визуальную, так и механическую ценность — перемещение по структуре больших проектов упрощается.

К каждой из страниц проекта можно добавлять расширенное описание и прикреплять отдельные файлы. Эта фича полезна в процессе наполнения сайта контентом.

Широкие настройки экспорта в SVG и PNG форматы позволяют выбрать оптимальный вариант и даже задать разрешение изображения на выходе.

Резюме
Сервис с продуманным набором функций и приятным интерфейсом. В бесплатной подписке функции доступны в широком спектре. Подойдет для эффектной и качественной презентации проектов сайтмэпов.

Стоимость, подписка: бесплатный план предусматривает 1 активный проект и 100 Мб места, без ограничении по коллабораторам. Платные подписки от 8 $ в месяц при годовой оплате.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★★
Командная работа: ✓
Экспорт: ссылка, PNG, SVG, PDF, DOCX

Относительно простой в организации Writemaps помогает проектировать сайтмэпы и планировать контент проекта. Для того, чтобы протестировать сервис, придется зарегистрироваться.

С точки зрения дизайна интерфейс можно описать, как «народный» или незамысловатый. Бесплатный план обеспечивает доступ к части функции: 3 активных сайтмэпа c 50 страницами. Остальные фичи доступны платным пользователям.

Часть платного функционала включает возможность выделять страницы проекта цветом, объединять и добавлять к ним контент, создавать разделы, делиться проектом и экспортировать сайтмэп в PDF. Хотя для бесплатных планов предусмотрен экспорт в CSV и XML.

Стоит отметить, что переключение между сайтмэпом и содержательной частью реализовано удобно и наглядно. В ускорении работы поможет список шорткатов.

Резюме
«Только самое необходимое» именно так можно охарактеризовать подход к функционалу бесплатной версии. Платная подписка подойдет для пользователей, которые планирую распределение контента, помимо общей структуры сайта.

Стоимость, подписка: бесплатный план предусматривает 3 активных проекта с ограничением в 50 страниц. Платные подписки от 14.99 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: CSV, XML, PDF и ссылка (только для платных пользователей)

Rarchy


Beta-версия проекта обладает скромным набором функций. Сайтмэп строится как с нуля, так и в генеративном порядке по ссылке на сайт.

На момент публикации обзора механика добавления страниц устроена следующим образом — необходимо вызвать контекстное меню, кликая на блоки страницы.

Никаких дополнительных настроек отображения блоков не предусмотрено. Тем не меннее drag’n’drop работает понятно. А форматы отображения схемы позволяют переключить проект в вид биоморфной схемы. Возможно, такой вид покажется наглядным и уместным.

На момент публикации доступен экспорт только в CSV-файл. Поделиться прямой ссылкой нельзя.

Стоимость, подписка: бесплатно
Простота использования: для начинающих
Дизайн: ★★☆☆☆
Командная работа:
Экспорт: CSV

В сервисе Visual Sitemaps сайтмэпы строятся на основе уже запущенных проектов автоматически. Инструмент кроулит структуру сайта и делает полноразмерные скриншоты страниц. При этом пользователь определяет количество скриншотов и глубину кроулинга в уровнях. Пользователям бесплатных подписок доступна глубина не более 2-х уровнейю.

Процесс кроулинга относительно быстрый. Но если проект объемен, то будет разумно запустить процесс и отвлечься на другие задачи, а сервис сообщит по почте о готовности сайтмэпа автоматически. Предусмотрен экспорт проекта в PDF.

На момент публикации дополнительных функции не так много, но анонсированы комментарии к скриншотам страниц, возможность реорганизовывать структуру проекта и защищать проекты паролем.

Резюме
Visual Sitemaps будет удобен для предварительного анализа проекта. Особенно, если есть необходимость посмотреть и оценить устройство страниц.

Стоимость, подписка: бесплатный план предусматривает регистрацию одного пользователя и 50 скриншотов с ограничение глубины кроула до двух уровней. Платные подписки от 29 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF

Slickplan


Многофункциональный сервис Slickplan включает в себя проектировщик сайтмэпов, инструмент по созданию диаграмм и потоков. Широкий набор инструментов планирования контента и дизайн шаблоны.

Среда устроена логично, рабочая зона четко отделена от элементов навигации. А панель навигации наследует логику классических desktop-приложений. Сайтмэп можно построить с нуля или же импортировать: возможно использовать XML и текстовые файлы, а также встроенный кроулер.

Механика манипуляции с блоками интуитивно понятна. Добавление новых страниц происходит быстро, а drag’n’drop объектов позволяет менять порядок и иерархию. Настройки каждого элемента (страницы, блока) сайтмэпа включают:

  • Добавление контента (текстовый и мультимедиа)
  • Добавление заметок
  • Выбора типа страницы
  • Распределение дизайн шаблона
  • Диаграмы
  • Добавление ссылки

В Slickplan стилизовать сайтмэп можно не только с помощью заготовленных цветовых схем, но и индивидуально. Настройки найдутся во вкладке Styles верхней панели инструментов.

Командная работа реализована подробно. Помимо пользователей с правами редактора, можно подключать пользователей права которых ограничены просмотром проекта. А раздел с комментариями поможет вести обсуждения проекта онлайн.

Сервис предусматривает подключение Google Analytics. Это отличительная и полезная особенность Slickplan. A интеграция со сторонними сервисами (Basecamp, Slack и другие) позволяет шерить проект в удобном формате. Проект может быть защищен паролем.

Конечно, с таким набором функций не стоит ожидать бесплатных подписок. 30-дневный триальный период подведет к выбору подходящего плана от 9.99 $ в месяц.

Резюме
Богатый набор функций и продуманный интерфейс. Огромный набор возможностей и настроек экспорта.

Стоимость, подписка: 30-дневный триальный период. Платные подписки от 9.99 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML

Чтобы осмотреться в Dynomapper придется создать аккаунт. Доступен 14-дневный тестовый период. Знакомство c сервисом начнется с наглядного видео-эксплейнера.

Как и в продвинутых визуальных сайтмэп сервисах пользователя предлагается начать проект с нуля или же воспользоваться экспортом. Кроулинг, к слову, тоже есть.

Стоит отметить, что дизайн среды сдержанный и консервативный. А процесс создания сайтмэпа больше похож на классическое взаимодействие с Explorer (Win) или Finder (Mac). Структура сайта, в отличие от сервисов описанных ранее, отображается в виде, напоминающем дерево файлов.

Компактно и придется по вкусу тем, кто привык к такому взаимодействию. Хотя режим Preview отображается уже в виде блок-схемы, и предусматривает 4 дополнительных вида отображения.

Настройки свойства и функций элементов удобно расположены в правой панели вкладок:

  • Page (Расширенная информация о странице)
  • Content (Планирование (добавление) текстового и мультимедийного контента)
  • Analytics
  • Comment

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

Гибкие настройки экспорта в PDF позволяют выбрать формат (размер) перед сохранением. Дополнительно пользователь определяет и ограничивает количество уровней вложенности для экспорта.

Отдельные манипуляции и действия требуют более подробного изучения раздела помощи.

Резюме
Инструмент производит основательное впечатление и скорее всего подразумевает более глубокую проработку проектов и работу с контентом.

Стоимость, подписка: 14-дневный триальный период. Платные подписки от 49 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: ссылка, PDF, CSV

Бесплатный кроулер, генерирует стайтмэп существующего сайта автоматически. Результат кроулинга — схема связей страниц сайта. И в отдельных случаях результат может оказаться масштабным.

Создатели сервиса выложили исходный код на Github (https://github. com/alentum). Кроулер бережно сохраняет историю запросов.

Стоимость, подписка: бесплатный
Простота использования: для начинающих
Дизайн: ★★☆☆☆

Creatly


Creatly заботливо создал демосреду, чтобы тестировать сервис без регистрации. Создание сайтмэпов — лишь часть функционала инструмента. Creatly предназначен для визуализации различных информационных структур.

В тестовой среде создания сайтмэпов уже создан демопроект. Пример призван помочь разобраться в базовой механике, и справляется с этой задачей.

Drag’n’drop нагляден: перетаскивание элементов сопровождается наглядными связями страниц и объектов. Редактирование страниц, удаление объектов и связывающих линий работает так, как в привычном векторном редакторе. Поэтому для дизайнеров механика будет понятна и близка.

В раскрываемой правой панели собраны настройки стилей и дополнительной информации. Сетка и привязка к ней — удобная фича. Возможно выбирать шрифты, определять выравнивание текста в блоке и т. д. Насыщенная стилями палитра поможет задавать акценты в сайтмэпе.

Размер документа в пикселях — любопытная фича. Пользователь всегда в курсе разрешения картинки еще до того, как произведет экспорт.

Резюме
Creately по механике работы наиболее близок к графическим редакторам. Функции сервиса позволяют создавать не только сайтмэпы, но и множество других диаграмм и блок-схем.

Стоимость, подписка: бесплатный план предусматривает 5 публичных документов и возможность добавления до 3-х коллабораторов. Платные подписки от 5 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PNG, JPG, SVG

***********************************

P.S.

Чтобы было легче выбрать, вот сравнительная таблица по всем сервисам (в самом конце) и немного больше скриншотов.

Flexbox — Изучение веб-разработки | MDN

  • Назад
  • Обзор: CSS layout
  • Далее

Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.

Необходимые навыки:HTML основы (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS).
Цель:Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.

Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.

С их помощью сложно или невозможно достичь следующих простых требований к макету:

  • Вертикального выравнивания блока внутри родителя.
  • Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
  • Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.

Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!

В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — flexbox0.html с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.

Вы увидите элемент <header> с заголовком верхнего уровня внутри, и элемент <section> содержащий три элемента <article>. Мы будем использовать их для создания стандартного трёхколоночного макета.

Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение display в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы <article>, поэтому мы устанавливаем это значение на <section> (который становится flex контейнером):

section {
  display: flex;
}

В результате у нас получится вот так:

Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.

Примечание: вы также можете установить значение display inline-flex, если хотите расставить inline элементы как flex блоки.

Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:

  • Главная ось (main axis) проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются main start и main end.
  • Поперечная ось (cross axis) проходит перпендикулярно Flex элементам. Начало и конец этой оси называются cross start and cross end.
  • Родительский элемент, на который назначено свойство display: flex ( <section> в нашем примере) называется flex container.
  • Элементы, размещённые в нём как Flex блоки называются flex items (в нашем примере это <article> ).

Запомните эти термины, они пригодятся вам в последующих разделах.

В Flexbox есть свойство под названием flex-direction, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение row, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).

Попробуйте добавить следующую строчку в ваш файл:

flex-direction: column

Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.

Примечание: вы можете также располагать flex элементы в обратном направлении, используя значения row-reverse и column-reverse. Попробуйте их тоже!

Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: flexbox-wrap0.html и посмотрите его вживую (сохраните его себе на компьютер, если хотите изучить этот пример):

Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить — это добавить следующее свойство:

flex-wrap: wrap

Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:

Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство flex: 200px, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.

Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства flex-direction на row-reverse — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.

На этом этапе нужно заметить, что существует сокращение для свойств flex-direction и flex-wrap — flex-flow. Например, вы можете заменить

flex-direction: row;
flex-wrap: wrap;

на

flex-flow: row wrap;

Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).

Прежде всего, добавим следующее правило в конец вашего CSS кода:

article {
  flex: 1;
}

Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу <article> значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.

Теперь добавьте следующее правило в строку после предыдущего:

article:nth-of-type(3) {
  flex: 2;
}

Обновив страницу, вы увидите, что третий элемент <article> занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).

Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:

article {
  flex: 1 200px;
}
article:nth-of-type(3) {
  flex: 2 200px;
}

Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.

Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент <article>, макет будет и дальше выглядеть также хорошо.

flex это сокращённое свойство, в которым можно задать до трёх разных свойств:

  • Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства flex-grow.
  • Следующее значение пропорции — flex-shrink — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
  • Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства flex-basis.

Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.

Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.

Сначала сделайте себе копию этого примера.

Теперь добавьте следующую строку в низ кода CSS:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.

align-items контролирует, где на поперечной оси находятся flex элементы.

  • По умолчанию стоит значение stretch, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
  • Значение center , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
  • Также есть значения flex-start и flex-end, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее align-items.

Вы можете переопределить align-items поведение для отдельных flex элементов, применив свойство align-self к ним. Например, попробуйте добавить эти строки в код:

button:first-child {
  align-self: flex-end;
}

Посмотрите, что произошло и удалите эти строки.

justify-content контролирует, где flex элементы располагаются на главной оси.

  • По умолчанию стоит значение flex-start, которое располагает все элементы в начале главной оси.
  • Также можно использовать flex-end, чтобы расположить их в конце.
  • center — также одно из значений justify-content, располагает все элементы по центру главной оси.
  • Значение, которое мы использовали выше, space-around, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
  • И ещё одно значение, space-between, которое очень похоже на space-around, за исключением того, что оно не оставляет места на обоих концах.

Попробуйте немного поиграть с этими значениями прежде чем продолжить

В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.

Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:

button:first-child {
  order: 1;
}

и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:

  • По умолчанию все элементы flex имеют значение order равное 0.
  • Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.
  • Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
  • Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.

Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:

button:last-child {
  order: -1;
}

Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на complex-flexbox.html (см. вживую).

HTML для этого довольно простой. У нас есть элемент <section>, содержащий три <article>. Третий <article> содержит ещё три <div>.

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button

Давайте посмотрим на код, который мы использовали для макета.

Прежде всего, мы устанавливаем дочерние элементы <section> в виде flex блоков.

section {
  display: flex;
}

Затем мы устанавливаем несколько значений на самих <article>. Обратите внимание на второе правило: мы устанавливаем третий <article>, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.

article {
  flex: 1 200px;
}
article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

Затем мы берём первый <div>. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы <button>) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.

article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.

button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)

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

Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.

Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.

Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS — grid-системы.

  • Назад
  • Обзор: CSS layout
  • Далее

Last modified: , by MDN contributors

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

  • правка дополнительного содержимого не затрагивала ранее написанные стили;
  • при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

.button {

   /* геометрия элемента */

   width: 150px;

   height: 20px;

   /* отступы между кнопками */

   margin-bottom: 5px;

   /* центрируем текст кнопки по вертикали */

   display: flex;

   justify-content: center;

   /* центрируем текст кнопки по горизонтали */

   text-align: center;

   /* чтобы работала геометрия и отступы у тега <a> */

   display: inline-block;

   /* убираем обводку у тега <a> */

   text-decoration: none;

   background-color: red;

   color: #fff;

}

Примеры использования:

<a href=»#» class=»button»>Отправить резюме</a> 

<a href=»/» class=»button»>Очистить форму</a>

Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:

Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {

   min-width: 150px;

   /* при жесткой высоте будет увеличиваться ширина */

   height: 20px;

   /* … остальной код без изменения */

}

Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button {

   /*

      поскольку другое значение border-box не задавалось,

      нужно подкорректировать размеры

    */

   min-width: 140px;

   /* при жесткой высоте будет увеличиваться ширина */

   height: 20px;

   padding: 0 10px;

   /* … остальной код без изменения */

}

Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

<div class=»greeting»>

 <h2 class=»greeting__title»>

   Поздравляю, вы стали обладателем квартиры в Сызрани!

 </h2>

</div>

.greeting {

 /* задаём геометрию */

 height: 200px;

 padding: 20px;

 /* центрируем содержимое по вертикали и горизонтали */

 display: flex;

 align-items: center;

 justify-content: center;

 /* учитываем последующее добавление элементов */

 flex-direction: column;

 background: blue;

}

.greeting__title {

 color: #fff;

 font-family: Arial;

 font-size: 20px;

}

Вот что у нас получилось:

Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера . greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {

 /* задаём геометрию */

 min-height: 200px;

 padding: 20px;

 /* код без изменения */

}

Код примера

padding > min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting {

 /* задаём геометрию */

 min-height: 40px;

 /* тут речь идет только о box-sizing:content-box */

 padding: 80px;

 /* код без изменения */

}

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

Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

<div class=»greeting»>

 <div class=»greeting__container»>

   <h2 class=»greeting__title»>

     Поздравляю, вы стали обладателем квартиры в Сызрани!

   </h2>

 </div>

</div>

И так тоже не делайте:

.greeting {

 /* задаём геометрию */

 min-height: 40px;

 /* не задаём никакие отступы в родительском элементе */

 /* код без изменения */

}

.greeting__container {

 margin: 80px;

}

Резюме

  • Для всего, что может измениться, задавайте минимальные и максимальные размеры.
  • Добавляйте отступы для корректного отображения.

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читать еще: «10 ошибок начинающего верстальщика и как их избежать»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Оцените статью

Средняя оценка 0 / 5. Всего проголосовало 0

Гид по Фигме для начинающих веб-дизайнеров

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 будет приближать/удалять макет относительно элемента, выбранного на экране.

Инструменты и возможности Фигмы

Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.

Фреймы

Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.

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

Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.

Вы можете сгруппировать отдельные объекты во фрейм или разбить его на объекты сочетаниями клавиш

Чтобы выровнять объекты во фрейме по оси 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 — копии также будут динамически изменяться в зависимости от контента.

Дополнительные возможности

В этом разделе рассмотрим инструменты для повышения скорости работы в сервисе, тарифы и ограничения Фигмы.

Плагины для Фигмы

Плагины расширяют возможности Фигмы, помогают ускорить работу и автоматизировать рутинные задачи. Вы можете просматривать плагины, как в магазине приложений: на карточке плагина описаны функции, количество установок и лайков.

Шесть плагинов, на которые стоит обратить внимание дизайнеру:

Grid for Tilda Publishing

Плагин генерирует сетку для платформы Tilda Publishing. Раньше дизайнерам нужно было запоминать значения сетки или копировать её, а теперь достаточно нажать одну кнопку.

Unsplash

Вставляйте изображения за два клика. Выбирайте область, в которую нужно вставить картинку или импортируйте ее на холст с оригинальным размером.

Не загружайте картинки в маленькие формы, если собираетесь их масштабировать — фигма автоматически снижает разрешение картинки.

Iconify

Более 40 000 векторных иконок на все случаи жизни: Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji.

Figmotion

Добавьте прототипам анимации, не переключаясь на Principle, Haiku или After Effects.

Позволяет рисовать векторные объекты быстрее, чем Pen Tool.

Humans to Figma

Иллюстрации людей, созданные Пабло Стэнли — иллюстратором и дизайнером платформы InVision Studio. Можно брать готовые варианты иллюстраций или сочетать элементы, создавая уникальные работы.

Горячие клавиши в Фигме

Сочетания горячих клавиш указаны в пункте Keyboard Shortcuts. Вызовите его из меню Help and Account, когда работаете с файлом, или нажмите «Cmd + Shift + ?» в Mac OS и «Ctrl + Shift + ?» в Windows.

Фигма подсвечивает синим цветом те комбинации клавиш, которые вы используете в работе и серым — которыми вы не пользуетесь.

Основные параметры

Инструменты

Настройки просмотра

Масштабирование

Работа с текстом

Работа с формами

Выделение

Компоненты

Основные параметрыИнструментыНастройки просмотраМасштабированиеРабота с текстомРабота с формамиВыделениеКомпоненты

Экспорт из Фигмы

Вы можете экспортировать отдельные файлы или фрейм, в котором они собраны. Меню экспорта находится в панели справа.

Горячие клавиши для вызова меню экспорта
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 и настроить Фигму под себя.

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

Где научиться работать в Фигме

Следите за официальным сайтом: узнавайте о новинках сервиса, изучайте лучшие практики работы.

Вы можете пройти несложный курс по работе с Фигмой на русском языке от Tilda School. Макс Ширко, куратор школы, расскажет, как делать макеты в Фигме и переносить их в Тильду.

Главное о Фигме

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

Фигма сохраняет историю изменений макета, если что-то пойдёт не так, можно откатиться к предыдущей версии документа.

Чтобы работать в Фигме, не нужно устанавливать приложения и подбирать операционную систему — сервис работает из браузера. Это удобно: для согласования дизайна можно отправить заказчику ссылку на макет. Она откроется даже на простом «стоковом» ноутбуке.
Сервис Фигма условно-бесплатный: на тарифе Starter работать с макетом могут два человека. Достаточно для фрилансеров-одиночек и мини-команд.

В Фигме можно создавать несложные прототипы, отрисовывать интерфейс сайтов и приложений. Для работы со сложной графикой лучше использовать другой редактор.

В Фигме есть несколько сотен плагинов, они помогут расширить возможности сервиса. Зная программирование, можно написать собственный плагин.

Текст: Денис Вихарев
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, поставьте лайк — это помогает другим узнать о нем и других статьях Tilda Education и поддерживает наш проект. Спасибо!

Читайте также:

Подключение Google Tag Manager

Зачем нужно создание UTM-меток — как отследить эффективность сайта

Увеличение конверсии лендинга с помощью скрипта Simple Metrics

Аналитика сайта — как повысить конверсию сайта, используя веб-аналитику

Блок HTML и встроенные элементы

❮ Назад Далее ❯

Каждый элемент HTML имеет отображаемое значение по умолчанию, в зависимости от типа элемента это.

Есть два отображаемых значения: блочное и встроенное.

Элементы уровня блока

Элемент уровня блока всегда начинается с новой строки, и браузеры автоматически добавить некоторое пространство (поле) до и после элемента.

Блочный элемент всегда занимает всю доступную ширину (тянется влево и вправо, насколько это возможно).

Два часто используемых блочных элемента:

и <дел> .

Элемент

определяет абзац в HTML-документ.

Элемент

определяет раздел или раздел в документе HTML.

Элемент

является элементом уровня блока.

Элемент

является элементом блочного уровня.

Пример

Hello World


Hello World

Попробуйте сами »

Вот элементы блочного уровня в HTML: