Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Изучение верстки - это не только познание способов стилизации элементов, но и верстка макетов. Чтобы начать верстать макеты, их нужно как-то увидеть и понять, как с ними работать.</p>

2 <p>На рынке существует несколько основных редакторов. Некоторые из них специфичны только для одной операционной системы, другие могут работать в браузере, а некоторые имеют возможность установки на любую систему. Вот только некоторые из них:</p>

3 <ol><li><strong>Adobe Photoshop</strong>. Самый старый редактор, который был стандартом много лет. Сейчас же отступает на второй план ввиду своей сложности в освоении. Перегрузка различными функциями также не красит его - многие функции просто не нужны для работы с HTML, но память устройства они благополучно съедают. Редактор доступен на системах под управлением Microsoft Windows и macOS. Официальной версии под системы Linux сейчас нет.</li>

4 <li><strong>Gimp</strong>. Аналог Photoshop для систем Linux. Имеет схожий функционал и может корректно открывать некоторые файлы в формате Photoshop. Но не стоит надеяться, что он может стать полноценной заменой. Если дизайнер присылает исходники в Photoshop, то нет полной уверенности в корректном открытии файла через Gimp. Так же, как Photoshop, Gimp не является специализированным инструментом для веб-дизайнеров, поэтому многие функции не нужны.</li>

5 <li><strong>Sketch</strong>. Специализированный редактор для проектирования мобильных и веб интерфейсов. Это является большим плюсом, так как разработчики ориентируются именно на удобное проектирование интерфейсов. Для работы с HTML здесь множество плюсов: удобный просмотр макета, размеров, отступов и другой информации, которая поможет при переносе макета. Главным минусом редактора является поддержка одной операционной системы - macOS. Разработчики ориентированы на работу только с этой системой, и переноса редактора на другие ОС не ожидается.</li>

6 <li><strong>Figma</strong>. Редактор, который работает в браузере. Просмотр макетов в нем доступен с любого устройства, которое имеет браузер и выход в интернет. Если ваша кофемолка умеет это, то можно верстать и с ее помощью. Редактор, как и Sketch, ориентирован на создание интерфейсов, что положительно сказывается на удобстве работы с ним. Именно этот редактор используется для проектов и некоторых испытаний, где вам дается макет для верстки. Также является бесплатным для личного пользования.</li>

7 </ol><p>Это неполный набор редакторов, которые существуют на рынке. Возможно, на работе вы встретите и другие варианты, но не переживайте. Нет нужды учить каждый редактор в отдельности. Их интерфейсы и способы взаимодействия часто совпадают. Если вы научитесь работать с одним редактором, то разберетесь и в другом.</p>

8 <p>В этом уроке мы рассмотрим базовые действия при работе с редактором<strong>Figma</strong>.</p>

9 <h2>Установка</h2>

10 <p>Как и было сказано выше, Figma не требует установки. Ее работа осуществляется через браузер. Достаточно перейти на сайт<a>figma.com</a>и зарегистрироваться.</p>

11 <p>Помимо этого есть возможность поставить отдельное приложение. Это скорее вопрос удобства, так как вместо вкладки вы получите отдельное окно для работы с редактором. Сейчас приложение доступно для операционных систем Windows и macOS. Скачать их вы можете на<a>странице загрузки Figma</a>.</p>

12 <p>Для систем<em>Linux</em>есть специальные варианты установки под разные типы систем. Их можно найти на<a>GitHub</a>.</p>

13 <p>Используйте тот вариант, который вам удобен.</p>

14 <h2>Работа с макетом</h2>

15 <p>В этом разделе посмотрим на основные действия при работе с редактором. В качестве примера будет использован шаблон испытания<a>Hero Section</a>курса CSS: Flex.</p>

16 <ol><li>Зарегистрируйтесь в сервисе Figma. Это позволит вам удобно просматривать элементы макета.</li>

17 <li>Откройте<a>макет испытания Hero Section</a>.</li>

18 </ol><p>Окно работы с Figma можно разбить на 4 функциональные области:</p>

19 <h3>Шапка</h3>

20 <p>В ней находятся различные настройки, название файла, настройки публичных ссылок. Если вы создадите свой макет, то в шапке будут располагаться и инструменты для создания элементов.</p>

21 <h3>Слои</h3>

22 <p>В левой области находятся все элементы, которые добавлены в макете. Это может быть текст, геометрические фигуры, изображения. Такие элементы называются слоями. Это связано с тем, что редактор учитывает порядок элементов. Если поставить изображение выше текста в слоях, то оно и в макете наложится на текст:</p>

23 <p>Слои можно объединять в различные группы. Так удобно разделять слои различных частей макета. В макете Hero Section есть следующие группы:</p>

24 <ul><li>Left Side</li>

25 <li>Right Side</li>

26 </ul><h3>Инспектор (Properties)</h3>

27 <p>Самая полезная секция. Инспектор позволяет увидеть все настройки выбранного элемента в секции "Слои".</p>

28 <p>Сейчас выбран текст "Фронтенд программист". Какие параметры можно получить об этом элементе:</p>

29 <ul><li><strong>Layout</strong><ul><li>Ширина: 415.7px</li>

30 <li>Высота: 145.39px</li>

31 <li>Значения top и left. Это значения относительно левого верхнего края макета. Чаще всего эти значения бесполезны, но бывают ситуации, когда есть смысл присмотреться к этим значениям</li>

32 </ul></li>

33 <li><strong>Content</strong><ul><li>Здесь находится тот контент, который расположен внутри слоя. Этот пункт актуален для текста. Если кликнуть по контенту, то он автоматически копируется</li>

34 </ul></li>

35 <li><strong>Typography</strong><ul><li>Font: название шрифта. Определяется свойством font-family</li>

36 <li>Weight: насыщенность шрифта. Определяется свойством font-weight</li>

37 <li>Size: размер шрифта. Определяется свойством font-size</li>

38 <li>Line height: межстрочный интервал. Определяется свойством line-height</li>

39 </ul></li>

40 <li><strong>Colors</strong><ul><li>Здесь можно увидеть цвет элемента. При клике можно скопировать значение цвета</li>

41 </ul></li>

42 </ul><h3>Окно просмотра макета</h3>

43 <p>Центральная область содержит визуальное представление макета. В ней можно выбирать различные слои с помощью мыши, а также посмотреть отступы элементов друг от друга.</p>

44 <p>Если выбрать слой "Узнать больше", зажать клавишу Alt или option для macOS и навести на соседний элемент, то Figma автоматически подскажет расстояние между элементами.</p>

45 <p>По этому изображению можно сразу узнать несколько параметров элемента:</p>

46 <ol><li>Размер элемента "Узнать больше" - 127x40 пикселей.</li>

47 <li>Расстояние от текста до элемента "Узнать больше" - 16 пикселей.</li>

48 </ol>