Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Введение

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

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

Знакомство сделаем в три шага:

  • Загрузка и установка
  • Регистрация и авторизация
  • Настройка и установка расширений

Загрузка и установка

Как и говорил ранее — всё старайся качать с официальных сайтов разработчиков! Вот их сайт.

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

Регистрация и авторизация

После того как ты скачал и установил графический редактор можно приступать ко второму шагу — регистрация.

Шагаем на тот же сайт и содзаём свой аккаунт. На момент написания этого урока, кнопка регистрации находится в верхней правой части шапки их сайта. Не промахнёшься 🙂

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

Настройка и установка расширений

Начнём с установки Font Fascia — дословно можно перевести как «Шрифтовая панель».

Он позволит быстро и легко получать полный список используемых в макете шрифтов. Это упрощает их поиск и экспорт в проект.

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

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

Я ниже прикрепил скриншот с демонстрацией пути, по которому я её открываю в редакторе.

На этом установка расширений завершена. Приступаем к знакомству с интерфейсом графического редактора.

Знакомимся с интерфесом

В процессе написания…

Что важно знать перед началом работы с дизайн-макетом

Не все макеты от заказчика или дизайнера можно напрямую редактировать!

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

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

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

Сделать это просто — при просмотре макета в figma в верхней части окна в выпадающем списке выбираем пункт — сохранить на рабочий стол.

Обрати внимание на лейбл, который я пометил стрелочкой — написано — Только просмотр. Это как раз наш случай. Значит что текущая версия макета имеет запрет на редактирование. Копируй макет, что бы получить в своё распоряжение экземпляр макета.

Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete