Как в фигме посмотреть расстояние между объектами в пикселях
Обновлено: 05.07.2024
Это статья для дизайнеров, но будет полезна и другим членам команды.
Хочу поделиться приемом который облегчит жизнь дизайнерам, фронтендерам и QA.
А главное сократит количество несоответствий верстки к дизайну.
Наверное мало кто замечал но если зайти в фигму с правами «can view» и навести курсор на элемент который не имеет цвет заливки то фигма не отобразит границы элемента.
Даже если вы присвоите элементу обводку или присвоите цвет но зададите 0% opacity граница все ещё не будет отображаться.
И так как фронтендеры, QA и другие участники команды зачастую имеют права "can view, подобное поведение фигмы им доставляет много неудобств.
Просто представьте что каждый раз когда вы пытаетесь определить размер элемента или отступ между элементами вам приходится идти в панель слоев и выбирать нужный элемент.
Это неудобно и это то что скорее всего никто делать не будет.
Фронтендеры не могут определить правильный размер элемента или отступ между элементами и в лучшем случае уточняют размеры у дизайнера, но чаще всего верстают на свое усмотрение. Как показывает практика размеры и отступы в таком случае не будут соответствовать дизайну.
Вторая проблема это экспорт слоя иконки без фрейма в котором она находятся. Это приводит к тому что иконка неправильно позиционируется в элементе или имеет неправильный размер.
Подробнее о иконках в дизайн системе я писал в предыдущей статье.
Чтобы решить данную проблему я придумал небольшой костыль, или «Пистон» как говорит один чувак на Ютубе.
- Создайте стиль цвета.
- Откройте окно редактирования стиля.
- Нажмите на квадратное превью цвета и в верхнем левом углу выберите «Image» вместо «Solid». После чего наведите курсор на шахматку и кликните на кнопку «Choose image»
- Далее выберите полностью прозрачное png изображение. Чем меньше изображение тем лучше, я использовал изображение 1x1 пиксель. (Изображение можно скачать по ссылке ниже)
- Всё, стиль готов.
Теперь примените этот стиль ко всем элементам где вы хотите чтоб граница фрейма отображалась при наведении курсора.
Для примера я подготовил два фрейма с элементами. В одном я применил стиль к компонентам кнопки и иконки а в другом нет. Просто попробуйте выделить элементы и почувствуйте то что чувствуют ваши фронты каждый день 🤯
Прозрачный png файл 1x1px можно экспортировать по этой ссылке (в красной рамке, смотрите панель слоев)
Я присваиваю данный стиль к прозрачным элементам типа basic кнопкам, stroke кнопкам, табам, айтэмам списка, компонентам иконки, ячейкам таблицы и тд, а так же использую этот стиль для разметки структуры страницы.
Я присваиваю данный стиль не ко всем прозрачным фреймам а только к тем где я считаю что фронтендеру важно видеть границы блока или элемента.
Некоторым фреймам я умышлено не присваиваю данный стиль, так как понимаю что у фронтендера больше возможностей и они не так часто оборачивают элементы в контейнеры как дизайнеры. Так как фигма не идеальна нам иногда приходится оборачивать элемент в 100500 фреймов чтоб добиться нужного поведения.
PS. Если применяете данный стиль к компоненту иконки, не забудьте снять чекбокс «Show in exports» чтобы при экспорте иконки в svg не было лишнего кода.
Сравнение кода двух svg иконок. Иконка которая была экспортирована с выключенным чекбоксом «Show in exports» весит в 2 раза меньше и имеет чистый, короткий код.Если вы используете прием когда компонент иконки оборачивается в union то если вы покрасите компонент иконки в этот стиль вы сможете быстро выделять иконку комбинацией ctrl+ЛКМ. Вам больше не нужно проваливаться через несколько слоев или нажимать Enter чтобы добраться до иконки.
Если вы узнали что-то новое или статья была вам полезна — жмите ^
А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.
Если вы фронтендер и вы испытываете подобную проблему покажите эту статью вашему дизайнеру, возможно он облегчит вам жизнь 😊
Это очень плохой совет. Для того чтобы границы объекта отображались достаточно установить значение frame для группы.
Я думаю ты не понял проблему полностью. Перейди в проект по ссылке и посмотри примеры.
Я использую только фреймы и границы все равно не отображаются когда у тебя права "Can View" и например кнопка лежит внутри другого фрейма. ред.
Чтобы в режиме can view выделить фрейм (границы) нужно зажать cmnd. Чтобы выделить фрейм внутри фрейма нужно нажать cmnd+дабл клик.
Я согласен, что это ломает мозг, т.к. в редакторе логика обратная, но не уверен что устанавливать прозрачную текстуру это хороший выход. Достаточно объяснить верстальщикам как с этим жить :) ред.
Я в курсе как это работает, и разработчики в курсе, но пока я не сделал так чтоб им было удобно работать, было много несоответствий в верстке.
И я их понимаю, потому что одно дело докликаться до элемента во время создания дизайна а другое дело когда ты фронт и тебе надо постоянно переключатся между элементами.
В публикации говорится о том, что определить размер фрейма можно только с помощью панели слоев. Это не так, поэтому я написал про метод с зажатым cmnd.
да, я не сказал об этом, но и не говорил что только так можно, я скорей хотел сказать то как действуют фронты в такой момент
Не поможет. Попробуйте открыть файл с правами view only и потыкать во фреймы. У разработчиков будто бы зажат по-умолчанию cmd и они проваливаются вглубь элементов.
что такое view only, где это устанавливается?
can view это не одно и то же?
В любом случае это уже сработало. Я показал как. У нас разработчики работают только под правами Can View и у них теперь отображаются границы
А не проще дать фронтендеру права Can edit?
Нет, потому что работая с макетами кто-то обязательно что-то сдвинет или удалит
Можно например на 2 странице создать резервную копию, или отдельным файлом. Но данный пример не работает если фигма командная, там на каждого редактора цена плюсуется к подписке.
Я думаю в копировании нет особо смысла, есть же версионирование.
Да у нас professional план и как то платить за каждого разработчика 15 баксов в месяц просто так не хочется. Мне куда легче один раз применить этот стиль к элементам дизайн системы и забыть.
Всегда даю разрабам права на редактирование. Они сдвигают и удаляют не больше, чем я сам.
Тоже сталкивался, когда передавал разработчикам макеты. Но вообще выглядит как неудачное решение разработчиков фигмы. Может, зарепортить им проблему?
Не так давно работаю с фигмой, но тоже уже успел с этим столкнуться. Выглядит, как и правда неудачное решение
А пробовали автолейаут? Там совсем все удобнее отображается
конечно)
в примере автолейаутом и сделано
Ничего из этого не работает, границы кнопки не будут отображаться по наведению когда смотришь с правами can view и когда эта кнопка лежит внутри ещё одного фрейма
Просто знаю о чем говорю, тк когда-то обсуждали на проекте эту штуку. По нашей градации, мидл — челики, фронты / ios/android девы и выше, должны это (что кнопка имеет фрейм а не просто кусок текста) понимать на интуитивном уровне. ред.
скрин который ты скину либо сделан c аккаунта c правами can edit, либо ты не понял в чем суть проблемы выделения
То что кнопка должна иметь фрейм и джуны знают, дело не в знаниях, а в удобстве и сложности определения размеров.
Фронт знает что кнопка имеет фрейм, но какого он размера не может определить. В итоге размеры и отступы не соответствуют дизайну.
И помимо кнопок есть и другие элементы в которых это совсем не очевидно
Я тоже знаю о чем говорю)) и сравнивал результат верстки без этого стиля и со стилем. У фронтов меньше вопросов, верстка в большенстве случаев пиксель в пиксель
Кажется ты не понял суть проблемы, выделить фрейм возможно из панели слоев, или с зажатым контролом проваливаясь уровень за уровнем. Невозможно выделить некоторые фреймы срезу в один клик. Если ты посмотришь гифки или прочитаешь внимательно что я писал - то возможно поймешь)
Второй вариант у тебя особенная фигма и у тебя одного это работает)
А вкладку Inspect религия не позволяет нажать?
Перед тем как умничать в комментариях - статью внимательно прочитай. Тогда может быть ты поймёшь проблему которую я описал.
Чего ж сразу в бутылку лезть? Серьёзные все стали, пошутить уже нельзя. Понятно, что проблема в том, что фрейм не выделяется, но, как и писали в комментариях выше – не проще ли показать людям, что нужно выделять не текст на макете, а фрейм, в котором он покоится, чтобы без проблем с ним работать? Нулевая пнгшка это конечно хорошо, но всё таки выглядит как костыль – я бы не стал преподносить это как панацею в решении подобной проблемы. Всё таки в рамках статьи стоит упомянуть, что выделение возможно и без применения этого решения, с описанными выше в комментариях способами, тогда не будет и «умников» в комментариях (которые на самом деле своей критикой тебе помогают, а не стремятся унизить или оскорбить) и в целом статья, если смотреть на неё как на практическое руководство для джунов, будет более чем полна. ред.
Показать проще, и фронты это знают, другое дело что им так не удобно работать.
Это и есть костыль, но благодаря ему несоответствий стало меньше, по крайней мере у нас.
Применять его или нет, дело каждого, мое дело - поделится им.
Меня зовут Татьяна Румянцева, я создательница виртуального модного бренда Kai Kai. Недавно на платформе Artisant я продала диджитал-платье за 0,5 эфира (примерно $ 2000). В этой статье я хочу рассказать, из чего состоит работа цифрового дизайнера и как им стать.
Если выделить объект, Фигма покажет под ним его размеры, это будут маленькие красные цифры. Если их не видно, или они неудобны, или они наползают на что-то красное — можно увидеть ту же информацию в правой панели в виде кода. Это будет выглядеть, например, так: под объектом — 123 х 23, в правой панели во вкладке с кодом — width: 122px; height: 23px;.
Чтобы измерить расстояние между объектами, достаточно выбрать первый объект, нажать Alt/Option и навести на второй.
Расстояния между объектами и отступы
Фигма позволяет измерять расстояния от блока до блока. Когда будете верстать, убедитесь, что размеры и расстояния в ваших CSS-правилах написаны с учётом собственных отступов объектов. Вероятно, они будут не совпадать со скопированными из Фигмы.
Также в Фигме можно измерить расстояние от блока до направляющей. Это делается так же: выбирается объект, потом нужно навести курсор на направляющую. Расстояние между направляющими, к сожалению, придётся посчитать вручную по пиксельной линейке сверху или слева.
Работа с цветами и эффектами
Чтобы получить информацию о цветах фонов и заливок объектов, по-прежнему можно просто выбрать объект и в правой панели выведутся его параметры, во вкладке Design в блоке Fill — о заливке, как её делал дизайнер, во вкладке Code эти данные будут сразу в формате CSS.
Если нам повезло, и дизайнер применил градиенты, тени и скругления, мы также можем скопировать параметры этих эффектов во вкладке Code.
Если все эффекты (градиент, тень, размытие и скругление) применены к одному объекту, в CSS будет выводиться примерно следующее:
Обратите внимание, что для управления тенью текста использовалось свойство text-shadow, а для контейнера — box-shadow.
Все эффекты в одной кнопке
Экспорт графики
Чтобы экспортировать из Фигмы графику, нужно её найти и выбрать, затем развернуть блок Export, определить, в каком формате мы будем выгружать графику, а потом нажать одноимённую кнопку в правой панели снизу.
У Фигмы есть возможность проверить, то ли мы выгружаем, что хотели. Для этого в блоке Export разворачивается Preview.
Экспортирование круга с градиентной заливкой
Если дизайнер планировал многократное использование объектов, часть графики может лежать в папке Assets, её можно найти в левой панели наверху.
Иконки в папке Assets
Остальные элементы нужно выделить в рабочей панели или поискать в слоях. Обычно у растрового графического контента в панели слоёв появляется иконка в виде картинки.
А векторные изображения получают иконку в виде себя самих или в виде кривой.
Если нужно выгрузить в одном формате несколько графических объектов, их можно скачать массово. Выбрать в Assets или Layers несколько картинок можно удерживая Shift или Ctrl/Cmd (в зависимости от того рядом расположены картинки или нет). При этом все изображения будут собраны в один архив.
Экспорт однотипных объектов
Если выгрузить нужно группу элементов одним слоем, это также можно сделать, объединив их в группу.
Экспорт нескольких слоёв как единого изображения
Andrey, вы можете настроить "прилипания" к объекту, геометрии и пиксельной сетке
Коллеги, а кто-то сумел оформить почту на домене .edu чтоб бесплатно всем функционалом Фигмы пользоваться?
Есть ли в Фигме удобные инструменты для измерения расстояния как в фш?
Ребята, почему у клиента не открывается прототип в Figme? Белый экран, говорит. Мозилла.
у меня в мозилле открывается по той же ссылке, безо всяких авторизаций
Vadim, уточните, о каком инструменте для измерения расстояния идет речь.
Figma Design, в Фотошопе есть линейка и инструмент выделение для измерения расстояния. В Фигме можно измерить через альт, но для текстовых элементов это плохо подходит. Есть ещё Slice Tool, но, насколько я знаю, он не для измерения расстояния предназначен.
Я хочу узнать, есть ли в Фигме аналоги фотошоповских линейки и выделения, или там есть только то, что я перечислил?
Vadim, есть то, что вы перечислили. инструмент "выделение области" присутствует при редакции растровых изображений.
У Figma есть все возможности для того, чтобы дизайнеры справлялись с работой максимально быстро и легко. Рассказываем, какие хоткеи есть и как их использовать.
Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.
В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.
Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.
Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.
Essential keyboard shortcuts
Essential keyboard shortcuts — это Основные клавиатурные сокращения.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.
Чтобы открыть Меню, нажмите Ctrl + / на Windows и ⌘ + / на Mac.
Tools
Tools — это Инструменты.
Чтобы выбрать стандартный инструмент выделения, нажмите V.
Чтобы выбрать инструмент для создания фреймов, нажмите F.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Текст, нажмите T.
Чтобы выбрать Прямоугольник, нажмите R.
Чтобы выбрать Эллипс, нажмите O.
Чтобы выбрать Линию, нажмите L.
Чтобы выбрать Стрелку, нажмите Shift + L.
Чтобы добавить или показать комментарии, нажмите С.
Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.
Чтобы выбрать Нож, нажмите S.
Чтобы показать или скрыть Линейки, нажмите Shift + R.
Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac.
Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.
Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.
Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ⌘ + ‘ на Mac.
Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.
Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac.
Чтобы показать или скрыть Только слои, нажмите Alt + 1.
Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.
Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.
Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.
Zoom — это Приближение или Масштабирование.
Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.
Чтобы увеличить масштаб, нажмите +.
Чтобы уменьшить масштаб, нажмите -.
Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.
Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.
Чтобы масштабировать выделенный элемент, нажмите Shift + 2.
Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.
Чтобы масштабировать следующий фрейм, нажмите N.
Чтобы найти предыдущую страницу, нажмите Page Up.
Чтобы найти следующую страницу, нажмите Page Down.
Чтобы найти предыдущий фрейм, нажмите Home.
Чтобы найти следующий фрейм, нажмите End.
Text — это Текст.
Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ⌘ + B на Mac.
Чтобы выделить текст курсивом, нажмите Ctrl + i и ⌘ + i на Mac.
Чтобы подчеркнуть текст, нажмите Ctrl + U и ⌘ + U на Mac.
Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.
Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac.
Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac.
Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac.
Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac.
Чтобы изменить размера текста, нажмите Ctrl + Shift + < и > на Windows и ⌘ + Shift + < и > на Mac.
Чтобы изменить расстояние между символами, нажмите Alt + < и >.
Чтобы изменить расстояние между строками, нажмите Alt + Shift + < и >.
Shape
Shape — это Векторные изображения.
Чтобы выбрать Перо, нажмите P.
Чтобы выбрать Карандаш, нажмите Shift + P.
Чтобы выбрать Заливку, нажмите B.
Чтобы удалить заливку, нажмите Alt + /.
Чтобы удалить обводку, нажмите /.
Чтобы поменять местами обводку и заливку, нажмите Shift + X.
Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac.
Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ⌘ + E на Mac.
Selection
Selection — это Выделение.
Чтобы выделить всё, нажмите Ctrl + A на Windows и ⌘ + A на Mac.
Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac.
Чтобы отменить выделение, нажмите Esc.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ⌘ + click на Mac.
Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ⌘ + right click на Mac.
Чтобы выделить дочерний элемент, нажмите Enter.
Чтобы выделить родительский элемент, нажмите Shift + Enter.
Чтобы выделить следующий по порядку элемент, нажмите Tab.
Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.
Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ⌘ + G на Mac.
Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac.
Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac.
Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac.
Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac.
Cursor
Cursor — это Курсор.
Чтобы выделить элемент при клике, нажмите Alt.
Чтобы копировать элемент при движении, нажмите Alt.
Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ⌘ + click на Mac.
Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ⌘ + right click на Mac.
Чтобы изменить размер относительно центра элемента, нажмите Alt.
Чтобы изменить размер пропорционально, нажмите Shift.
Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ⌘ на Mac.
Edit — это Редактирование.
Чтобы копировать, нажмите Ctrl + C на Windows и ⌘ + C на Mac.
Чтобы вырезать, нажмите Ctrl + X на Windows и ⌘ + X на Mac.
Чтобы вставить, нажмите Ctrl + V на Windows и ⌘ + V на Mac.
Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac.
Чтобы создать копию, нажмите Ctrl + D на Windows и ⌘ + D на Mac.
Чтобы переименовать, нажмите Ctrl + R на Windows и ⌘ + R на Mac.
Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac.
Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac.
Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac.
Transform
Transform — это Трансформирование.
Чтобы отразить по горизонтали, нажмите Shift + H.
Чтобы отразить по вертикали, нажмите Shift + V.
Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac.
Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.
Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac.
Чтобы обрезать изображение, нажмите Alt + dbl-click.
Чтобы задать прозрачность элементу 10%, нажмите 1.
Чтобы задать прозрачность элементу 50%, нажмите 5.
Чтобы задать прозрачность элементу 100%, нажмите 0.
Arrange
Arrange — это Выравнивание.
Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ⌘ + ] на Mac.
Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ⌘ + [ на Mac.
Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac.
Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac.
Чтобы выровнять по левой стороне, нажмите Alt + A.
Чтобы выровнять по правой стороне, нажмите Alt + D.
Чтобы выровнять по верхней стороне, нажмите Alt + W.
Чтобы выровнять по нижней стороне, нажмите Alt + S.
Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.
Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.
Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac.
Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac.
Components
Components — это Компоненты.
Чтобы показать все компоненты, нажмите Alt + 2
Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.
Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac.
Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac.
Так выглядят горячие клавиши в Figma. Надеемся, вы запомните их и будете ими пользоваться. А пока запомнить их не получается, обращайтесь к этой статье — она вам поможет.
Читайте также: