33 урок

33 Работа в Figma

Вводный урок
Для того, чтобы верстать сайты необходимо уметь работать в графических программах. Есть несколько программ, одни из самых популярных на данный момент — Figma и Photoshop. Давайте рассмотрим их в следующем уроке.

Работа с элементами в Figma

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

Экспортирование картинок и иконок

Задачей верстальщика является вытащить из проекта дизайна все картинки и инонки.
В следующем уроке мы рассмотрим, как это делать.

Все картинки, которые у вас сохраняются в формате jpg и png, необходимо обязательно сжимать в программах, предназначенных для этого. Например — TinyPNG. Это внешний сервис, туда загружать можно не более 20 картинок одновременно и не более 5 МB. Как только вы загрузили и превысили лимит — просто обновите страницу и можете продолжать работать.
https://tinypng.com - ссылка на сайт TiniPNG

Если у вас происходит уже не просто вёрстка, а вёрстка под систему, например на Tilda или WordPress, то там картинки уже можно сжимать, потому что есть плагины, которые ставятся специально для этого. Но лучше будет всегда сжимать картинки. Это обязательное условие, без которого вашу верстку даже не примут.

Как поделиться проектом в Figma?

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

Задание

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

1. Пришлите ссылку на ваш проект в Figma
2. В каких случаях нужно экспортировать картинки в формате SVG, PNG и JPG
3. Зачем нужно экспортировать картинки в двойном размере и какие именно картинки не обязательно экспортировать в двойном размере?
4. Чем отличаются картинки обычные и векторные?

32 урок

В оглавление