Как удалить фрейм в фигме
Перейти к содержимому

Как удалить фрейм в фигме

  • автор:

5 полезных плагинов для Figma: наведение порядка

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

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем, какие плагины для Figma помогут вам сделать собственные иллюстрации.

Unused Styles Remover

Во время работы у вас могут остаться неиспользуемые стили шрифтов или цветов. Если вы делали только два макета, то удалить лишнее можно руками и довольно быстро. А если у вас несколько цветовых тем и 20 макетов, то вместе с ненужными стилями можно удалить и основные.

Эту проблему решает Unused Styles Remover — он анализирует весь документ и за вас удаляет те сохранённые стили, которые вы нигде не использовали.

Как пользоваться

  • Скачайте плагин по ссылке.
  • Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins, выберите Unused Styles Remover.
  • В появившемся меню укажите, что именно вы хотите удалить — шрифты, цвета, эффекты или сетки.
  • Нажмите кнопку Remove.

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

Auto Layout, фреймы и компоненты

Инструмент был запущен в Фигме 5 декабря 2019 года. Идея Auto Layout в том, что вместо ручного размещения объектов можно делать это автоматически, с вариантами вертикальной и горизонтальной компоновки.

Auto Layout — это инструмент в Фигме, с помощью которого каждый может легко и просто выравнивать элементы.

Frame в Figma: что это и в чём преимущества Auto Layout

Фреймы — это рабочие области (layouts), где будут размещаться элементы вашего дизайна. Чтобы создать фрейм, выберите иконку в левом верхнем углу панели инструментов. Наведите на пустую область и кликните мышкой.

Если использовать Auto Layout, что это даст и какие преимущества откроет? Отличие в том, что кнопка с активной функцией Auto Layout — это кнопка, которая способна сама адаптироваться под длину текста. Пользователи отмечают, что Auto Layout — это незаменимое решение для списков: можно добавлять и удалять из них составляющие, не нарушая параметры лейаута.

Что нужно сделать для активации Auto Layout? В этом помогут горячие клавиши: выберите фрейм и нажмите Shift+A. Или кликните по соответствующему плюсу на панели справа.

Компоненты

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

Давайте рассмотрим на примере простой кнопки. Чтобы её создать, нарисуем в Figma прямоугольник и наложим текст. Выделим его и справа, напротив надписи Auto Layout, кликнем на плюс. Что нужно, чтобы создать из нашего объекта компонент? Выделим его и сверху нажмём на иконку из 4 ромбов — Create component.

Теперь в Assets появилась наша кнопка. Мы имеем к ней быстрый доступ и можем использовать в проекте — просто перетаскиваем её из панели слева.

Если нужно создать сразу несколько компонентов, выделите элементы, сверху по центру нажмите на стрелку и найдите пункт Create multiple components.
Чтобы убрать (отменить или разгруппировать) компонент в Figma, нажмите на иконку с тремя точками в правой панели. Выберите Detach instance или используйте горячие клавиши Alt+Ctrl+B.

Как сделать адаптивную кнопку с текстом в Фигме

  • На панели слоёв кликните по тексту правой кнопкой мыши и выберите Frame Selection.
  • Выделите получившийся фрейм, добавьте ему фон в блоке Fill в настройках и нажмите на + рядом с Auto Layout, что позволит сделать этот элемент адаптивным.

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

10 советов по работе с Auto-Layout в Figma

По ссылке в сообществе Figma находятся примеры, которые будут упомянуты в статье.

1. Горячие клавиши auto layout

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

Представляем вам следующие комбинации клавиш для auto layout с целью ускорения рабочего процесса:

  • SHIFT + A = добавить auto layout
  • SHIFT + ALT + A = превратить auto layout обратно во фрейм
  • CMD/CTRL + SHIFT + G = удалить auto layout
  • CMD/CTRL + D = дублировать элементы в auto layout
2. Копируйте свойства и стиль auto layout

Экономьте время с помощью горячих клавиш:

  • OPTION + CMD / CTRL + C — копировать стиль auto layout
  • OPTION + CMD / CTRL + V — вставить стиль auto layout
3. С легкостью меняйте порядок объектов

Изменить порядок объектов внутри auto layout можно с помощью клавиш-скобок:

  • CMD/CTRL + ] = передвинуть элемент вправо или вниз
  • CMD/CTRL + [ = передвинуть элемент влево или вверх
4. Сделайте слайдер с помощью auto layout

Как это работает:

Очистите значение “spacing between items”

  1. Выберите темно-синюю линию между ползунками
  2. Меняйте значение “space between items” для auto layout, чтобы посмотреть, как это работает
  3. Вы также можете очистить значение “space between items” путем его перетаскивания вправо или влево

С помощью auto layout и значения “spacing between items”, довольно легко создать регулируемый компонент ползунка для диапазона значений, количества или индикатора выполнения. Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать.

5. Сэкономьте время с помощью слова “auto”

Попробуйте сами: напечатайте слово “auto” вместо цифры в поле “spacing between items”, а затем потяните контейнер вправо, и вы увидите, что элементы адаптируются под заданную ширину

Оптимизируйте свой рабочий процесс: напечатайте слово “auto” в поле “spacing between items”.

6. Выравнивайте элементы за пределами auto layout с помощью указания нулевого значения высоты фрейма

Rogie King объясняет этот хитрый трюк в своем обучающем видео на YouTube. Создайте фрейм, поместите объекты внутрь фрейма. Расположите фрейм внутрь контейнера auto layout, выберите параметр “fill container”, а затем задайте высоту фрейма, равную 0,001 (она округлится до 0).

Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений.

7. С легкостью работайте с элементами в пределах auto layout

Попробуйте сами: выделяйте любые нужные элементы внутри auto layout

Когда у вас много auto layout, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам.

  • ENTER/RETURN = выделить дочерний элемент фрейма
  • SHIFT + ENTER/RETURN = выделить весь фрейм
  • TAB = переход между дочерними элементами после того, как первый элемент был выделен в auto layout
  • ESC = сбросить выделение элементов
8. Располагайте объекты внутри auto layout на свое усмотрение

Попробуйте сами: перетащите счетчик уведомлений внутрь фрейма, при этом удерживайте пробел нажатым

Удерживайте ПРОБЕЛ при размещении объекта внутри auto layout, чтобы расположить его так, как вам нужно, и избежать его автоматического размещения.

9. Сохраняйте расположение элемента по центру с помощью заголовка

Элемент всегда будет находиться в центре, если добавить третий прозрачный контейнер и использовать параметр Space Between

Если в составе контейнера auto layout есть заголовок, и нам нужно, чтобы объект оставался в центре, есть небольшая хитрость, как можно это осуществить:

  1. Сделайте копию заголовка
  2. Установите прозрачность второго заголовка равной 0%
  3. Используйте CMD + [, чтобы переместить прозрачный заголовок вниз
  4. Установите для всего контейнера значение Space Between
10. Зафиксируйте минимальную ширину/высоту фрейма

Как это работает: Для того, чтобы минимальная длина контейнера auto layout оставалась фиксированной и не уменьшалась, если текст недостаточно длинный, нужно: добавить в auto layout прозрачный фрейм с фиксированной минимальной длиной, далее для контейнера auto layout следует установить параметр “hug contents”.

Rogie King использует тот же трюк, что и в 6 рекомендации. Он размещает внутри контейнера auto layout фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto layout, чтобы он не становился меньше, если текст недостаточно длинный.

11. Бонус! Посмотрите продвинутое обучающее видео об auto layout

Посмотрите обучающее видео, чтобы узнать, как создавать полностью гибкие и адаптируемые интерфейсы с помощью auto layout.

UX/UI курс с нуля. Урок 6. Основы Figma III. Фреймы. Сетки. Направляющие. Компоненты

В третьей части по основам Figma научимся работать с фреймами (артбордами), страницами и файлами, чтобы не заблудиться в структуре большого проекта. Посмотрим, насколько мощные возможности таит в себе фрейм, как сетки и колонки помогают распределить объекты и выставить отступы. Научимся пользоваться направляющими. Впервые познакомимся с ограничителями (constraints) и бегло взглянем на компоненты.

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

Фреймы. Сравнение с группами

Фреймы в другим программах называются артбордами (artboard). Но в Figma пошли своим путем и придумали уникальное название. И вполне резонно, так как фреймы обладают большими возможностями и гибкостью, чем артборды, например, в Sketch невозможно поместить один артборд внутри другого.

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

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

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

  • Фрейм имеет размер и может иметь заливку цветом. В группах размер задается автоматически, на основе размера всех объектов, которые находятся внутри. Это отличие позволяет экспортировать изображения с отступами по краям, что полезно при сохранении иконок. В настройках фрейма можно найти большой список шаблонов размеров от всевозможных экранов устройств (популярных смартфонов, умных часов и планшетов) и до даже сторис Instagram или поста Facebook;
  • Каждый фрейм имеет свою систему координат. Координаты объектов внутри будут отсчитываться относительно верхнего левого края границы фрейма;
  • Фрейм способен обрезать свое содержимое, которое выходит за его рамки. То есть всё, что находится за границами фрейма будет скрываться, если опция Clip content включена. Такая возможность называется маской;
  • Фрейм может отображать разметку макета, а именно сетку, вертикальные и горизонтальные колонки, а также включать внутри себя направляющие. Эти инструменты предназначены для точного расположения и выравнивания объектов макета;
  • При изменении размеров фрейма можно указать, как себя будут вести объекты. Например, кнопка может прилипнуть к верхней части экрана и растягиваться по ширине. Эта возможность называется ограничиелями (constraints).

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

Создание фрейма. Изменяем размер и заливку

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

Далее самое интересное. В правой панели, подобно прямоугольнику уже будет задан цвет заливки фона (раздел Fill). Вы можете изменять размер фрейма старыми способами, потянув за край или задав точный размер в полях W (Width) и H (Height). Но теперь у нас есть новое выпадающие меню с шаблонами размеров в левом верхнем углу панели свойств – Frame. Просмотрите, какие шаблоны там есть и попробуйте применить хотя бы несколько из них.

Как поместить объекты внутрь фрейма

Есть несколько простых способов:

  • Выделить и перетащить все объекты внутрь границ фрейма;
  • Выделить, вырезать нужные объекты (Command + X на macOs или Ctrl + X на Windows) и вставить (Command + V на macOs или Ctrl + V на Windows) после того, как выделили фрейм.

После этих манипуляций объекты окажутся внутри фрейма, что будет видно по панели слоев, ведь вставленные объекты будут отображаться со смещением (как и в группах). Попробуйте выделить объект внутри фрейма, обратите внимание на значение координат X и Y – они изменились, ведь теперь левый верхний угол фрейма – это новое начало координат.

Простая маска – обрезаем содержимое фрейма

Используя опцию Clip content в панели свойств, можно обрезать содержимое по прямоугольной границе, которая зависит от ширины (параметр W – Width) и высоты фрейма (параметр H – height). Подобный прием называется маской. Таким образом можно скрыть часть объектов используя форму другого объекта, в нашем случае это фрейм и прямоугольная форма. Вот вам аналогия: вырезав квадратное отверстие в бумаге и наложив ее на фотографию вы получите пример использования маски в реальном мире.

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

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

  1. Выделяем фрейм;
  2. Кликаем по плюсику + напротив раздела Layout Grid – отобразится сетка со стандартными настройками красного цвета с шагом в 10 пикселей;
  3. Нажимаем на иконку слева от надписи Grid (10px), чтобы настроить сетку. В выпадающем окне можем задать шаг сетки (Size), цвет линий (Color) и прозрачность;
  4. Сетку можно временно скрыть или удалить, нажав на иконку глаза или минус соответственно справа;
  5. Можно добавить несколько сеток разных цветов внутри одного фрейма при надобности.
  6. Чтобы временно скрыть сетки на всех фреймах нажмите Ctrl + G. Повторите комбинацию клавиш, чтобы показать их вновь.

Сетку можно использовать в качестве помощника для отрисовки форм, баннеров, иллюстраций. Ее главная прелесть заключается в том, что при перемещении объектов они как бы «приклеиваются» к линиям сетки, тем самым помогая вам установить объект в нужной позиции. С масштабированием такая же история – границы объекта прилипают к направляющим сетки.

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

Добавление колонок и рядов

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

  1. Выделяем фрейм;
  2. Кликаем по плюсику + напротив раздела Layout Grid – отобразится такая же стандартная сетка;
  3. Нажимаем на иконку слева от надписи Grid (10px). В выпадающем окне нажимаем на Grid в левом верхнем углу;
  4. В выпадающем меню выбираем Columns. Сразу после этого кроме цвета и прозрачности появится ряд новых параметров:
    • Count – количество колонок;
    • Type – тип построения колонок. Можно выбрать одну из опций: Left – колонки размещаются по левому краю, Right – по правому краю, Center – выравниваются по центру, Stretch – растягиваются по всей ширине фрейма;
    • Width – ширина колонки в пикселях. Этот параметр просчитывается автоматически если тип колонок выставлен в Stretch;
    • Offset – отступ слева если тип колонок выставлен в Left. Для типа колонок Right это отступ соответственно справа. Для типа Stretch это отступ с обеих сторон. Этот параметр просчитывается автоматически для типа колонок Center;
    • Gutter – расстояние между колонками.

Давайте настроим одну популярную сетку из фреймворка Bootstrap, которую часто используют разработчики при верстке веб-страниц. Для этого нам понадобится фрейм шириной в 1440 пикселей и высотой в 900 пикселей, что соответствует размерам экрана типичного ноутбука. Сама сетка в ширину составляет 1140 пикселей и состоит из 12 колонок. Ширина каждой колонки – 65 пикселей, а расстояние между ними – 30 пикселей.

Подобно сетке объекты будут прилипать к границам колонки, что очень удобно для быстрого выстраивания примитивов в одну линию и их выравнивания в блоках.

Кроме колонок существует возможность задавать ряды. Для этого достаточно выбрать Rows в выпадающем меню. Все параметры идентичны колонкам, лишь Width (ширина) заменена на Height (высоту). Мне не приходилось использовать этот вид сетки, но возможно в редких случаях он может быть полезен.

Направляющие и линейка

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

  1. Выделяем фрейм, если вам нужна линия именно внутри фрейма;
  2. Включаем линейку с помощью комбинации клавиш Shift + R. Она появляется сверху и слева по краям рабочей области и показывает границы выделенных объектов в пикселях. Запомните, что направляющие отображаются только с включенной линейкой;
  3. Кликаем и зажимаем левую кнопку мыши внутри верхней или левой линейки, чтобы создать горизонтальную или вертикальную направляющую соответственно;
  4. Тянем курсор к центру экрана. Как только вы выйдете за границы линейки на рабочей области появится направляющая. Тяните ее в нужную вам точку;
  5. Отпускаем левую кнопку мыши, чтобы зафиксировать позицию направляющей;

Чтобы изменить положение направляющей, перетащите ее в новую позицию.

Чтобы удалить направляющую, нужно ее выделить, кликнув по ней. Выделенная линия закрасится в синий цвет. Далее нажимаем кнопку Delete на клавиатуре. Также можно просто перетащить направляющую на область линейки и она тоже будет удалена.

Чтобы временно скрыть все направляющие скройте линейку с помощью клавиш Shift + R.

А теперь важный момент. Как вы помните из предыдущего урока, предварительно выделив любой объект и зажав кнопку Option в MacOs или Alt в Windows, можно увидеть точное расстояние в пикселях, подведя курсор к другому объекту. Так вот, этот же прием работает и для направляющих, что бывает очень кстати. Давайте посмотрим, как это выглядит на практике (приклеивание объектов к направляющим и подсказки о расстоянии до направляющих):

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

На этом перечень возможностей фреймов не заканчивается, но прежде чем продолжить, давайте посмотрим несколько типичных примеров их использования. Итак, фреймы часто используются, как контейнеры для:

  • Дизайна веб-страниц различных устройств (настольный пк, ноутбук, смартфон);
  • Дизайна экранов мобильных приложений для планшетов, смартфонов, умных часов;
  • Набора базовых цветов;
  • Набора компонентов интерфейса (кнопки, переключатели, иконки, слайдеры, карточки, шапка, подвал сайта и так далее);
  • Набор шрифтов для типографики (всевозможные начертания и размеры);
  • Материалов социальных сетей (сторис, посты, баннеры, иллюстрации, инфографика).

Поведение содержания фрейма при изменении размера

Если объект находится внутри фрейма, то вы можете указать, как ему себя вести при изменении размеров фрейма. Эта возможность называется constraint (читается констрэйнт), что переводится, как ограничитель. Он задает, поведение при изменении размера фрейма:

  • Позволяет закрепить позицию объекта по вертикальной или горизонтальной стороне фрейма. В таком случае при растягивании фрейма он сохранит свой размер;
  • Или растянет объект по ширине и/или высоте фрейма.

Будет проще понять на примере. Посмотрите на два квадрата внизу. Экземпляр слева помещен в фрейм. Экземпляр справа находится в группе вместе с бежевым прямоугольником, который служит фоном. Попробуем поочередно изменить размер фрейма и группы. Обратите внимание, что слева квадрат сохраняет размер и приклеивается к нижней стороне фрейма, в соответствии с выбранным ограничением. При выделении появляются пунктирные линии, которые указывают какие ограничители активны. Справа при выделении квадрата никаких вспомогательных линий не показывается, все составляющие части группы растягиваются.

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

Первое знакомство с компонентами

Компоненты – это специальный вид объектов, которые создаются на основе фреймов для построения часто используемых элементов интерфейса. Звучит сложно, но по сути с помощью компонентов создают шаблоны кнопок, выпадающих меню, навигации и прочего. Чтобы в дальнейшем не рисовать каждый раз, к примеру, кнопку, вы копируете компонент кнопки, выставляете нужный размер и цвет, меняете текст – готово! Наборы таких компонентов в терминологии Figma называются библиотекой компонентов. А у дизайнеров они называются UI Kit (читается юай кит).

Зачем же так все усложнять? На самом деле компоненты способны сэкономить десятки часов работы. Представьте себе ситуацию: у вас есть 50 экранов веб-приложения. На каждом из них есть кнопки. Вдруг вам прилетает правка «скруглить все кнопки». Если дизайн создавался с помощью компонентов, то вам будет достаточно изменить лишь родительский компонент (шаблон кнопки), а все остальные изменения произойдут автоматически. Если все делалось без компонентов, то вам прийдется вручную изменить каждую кнопку.

В этом и заключается вся мощь компонентов. А ограничители (Constraints) играют здесь одну из ключевых ролей.

Компонентам у нас будет посвящен отдельный урок, не стоит пугаться их сложности. Более того, у компонентов есть и другие особенности, которые мы будем постепенно затрагивать. Сейчас мы лишь подготавливаем фундамент для дальнейшей работы. А пока, чтобы понять пользу компонентов, посмотрите на пример ниже. Сверху находится компонент-родитель (шаблон), а внизу три компонента-ребенка, которые наследуют его свойства. В самом низу находится кнопка, сделанная на основе обычного фрейма. Изменяя родительский компонент, мы автоматически меняем всех «детей».

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

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

Виды ограничителей (Constraints)

Давайте создадим несколько кнопок внутри фреймов с различными настройками ограничителей.Рассмотрим самые простые из них:

  • Вертикальные ограничители:
    • Top – объект прилипает к верхнему краю фрейма;
    • Center – объект центрируется по высоте фрейма;
    • Bottom – объект прилипает к нижнему краю фрейма.
    • Left – объект прилипает к левому краю фрейма;
    • Center – объект центрируется по ширине фрейма;
    • Right – объект прилипает к правому краю фрейма.

    Я создала 9 фреймов (кнопок) со всеми возможными комбинациями вышеописанных ограничителей. Посмотрите, как ведут себя объекты внутри фреймов при масштабировании.

    Существует еще несколько видов ограничителей:

    • Left & Right – вид горизонтального ограничителя. Заставляет левый край объекта прилипнуть к левой стороне фрейма, а правый край – к правой стороне фрейма. Позволяет растягивать объект по ширине с фиксированными отступами слева и справа;
    • Top & Bottom – вид вертикального ограничителя. Заставляет верхнюю грань объекта прилипнуть к верхней стороне фрейма, а нижнюю грань – к нижней стороне фрейма. Позволяет растягивать объект по высоте с фиксированными отступами сверху и снизу;
    • Scale – объект растягивается пропорционально фрейму по ширине и/или высоте. В этом случае отступы до фрейма не фиксируются, а будут меняться пропорционально размеру фрейма.

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

    Подгонка размера фрейма под содержимое

    Если нужно обрезать фрейм строго по границам его объектов, то достаточно нажать соответствующую кнопку в панели свойств:

    Изменяем ориентацию фрейма

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

    Страницы и файлы

    Кроме фреймов в Figma существуют структурные единицы и высшего порядка:

    • Страницы – содержат фреймы внутри себя;
    • Файлы – состоят из страниц;

    Все это время мы работали внутри единственной страницы одного файла. Чтобы создать новую страницу:

    • Кликаем на название текущей страницы Page 1 в правом верхнем углу левой панели, чтобы показать список всех страниц;
    • Кликаем на плюсик +, чтобы создать новую страницу;
    • Вводим название новой страницы;
    • Нажимаем Enter, чтобы сохранить название.

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

    • Copy Link to Page – скопировать ссылку на страницу в буфер обмена, чтобы поделиться;
    • Duplicate Page – сделать копию;
    • Delete Page – удалить. Эта команда доступна только если у вас есть хотя бы две страницы;
    • Rename Page – переименовать страницу. Как и со слоями, работает двойной клик.

    Посмотрим, как выглядит работа со страницами на практике:

    Чтобы создать новый файл, нужно:

    1. Перейти к списку файлов, нажав на иконку главного меню в верхнем левом углу в браузерной версии Figma, а потом выбрав первый пункт в выпадающем меню Back to Files;
    2. Оказавшись на главном экране слева вы увидите список разделов:
      • Ваше имя – самый первый пункт сверху. Здесь вы можете настроить свой профиль: изменить отображаемое имя, почтовый адрес и пароль. Остальные настройки сейчас неважны;
      • Search – поиск по проектам по названию. Когда у вас будет очень много файлов, этот раздел может оказаться полезным;
      • Recent – недавно открытые файлы. Все упорядочено в хронологическом порядке. Сверху недавно использованные файлы;
      • Community – наработки сообщества: шаблоны, плагины и другие полезности. О них поговорим в следующих уроках, еще слишком рано;
      • Drafts – полный перечень всех файлов, с которыми вы работали.
    3. Кликаем по разделу Drafts. Появится список всех файлов;
    4. Нажимаем на плюсик + в правом верхнем углу или напротив Drafts. Будет создан новый файл с названием Untitled;
    5. Сделайте двойной клик по названию файла сверху по центру, введите новое название и нажмите Enter, чтобы подтвердить;
    6. Готово! Вы только что создали новый файл.

    Чтобы выбрать другой файл, достаточно назад перейти к списку файлов в раздел Drafts и выбрать интересующий файл в правой панели.

    Организация страниц

    Давайте посмотрим, из чего состоит типичный проект. В самом начале это единственная Page 1, но по мере разрастания появляются страницы с такими названиями:

    • User flow name – название юзер флоу/сценария. То есть каждый отдельный сценарий размещается на отдельной странице. В некоторых случаях можно разместить несколько сценариев на одной странице, если они похожи (например, сценарии регистрации, сброса пароля, входа на сайт);
    • References/Moodboards – референсы от клиента и созданные на их основе мудборды. Также здесь может разместится входящая информация по проекту;
    • Thumbnail – страница с обложкой проекта, которая отображается на превьюшке в разделе Drafts/Recent. Чтобы ее применить нужно создать фрейм размером в 1920х960 пикселей, отрисовать саму обложку и в выпадающем меню по правому клику на фрейме выбрать Use as Thumbnail;
    • Components – страница с используемыми компонентами. Часто приходится импортировать целые библиотеки компонентов, в таком случае пишется название библиотеки и ее версия. Например Ant Design UI Kit (1.2) (ant.design v4 update) (Light Theme);

    У каждого дизайнера свои правила и привычки именования и структурирования страниц, строгих догм здесь нет. Я лишь показала, как это выглядит в некоторых случаях у меня. Другой пример: создают страницу UI с кучей экранов (фреймов) финального дизайна и UX – для всех вайрфреймов.

    Иерархия проекта

    Обычно хватает одного файла, но на больших проектах иногда по отдельным файлам распределяют дизайн по платформам. Например: Web, Mobile, Desktop. Иногда в отдельный файл выносят библиотеку компонентов, но учтите, что в таком случае вам понадобится платная подписка.

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

    Домашнее задание

    Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro

    1. Выберите сайт на свое усмотрение и отрисуйте его шапку (хедер), подвал (футер) или любую другую его часть с использованием ограничителей (Constraints). Ваша задача настроить содержание фрейма таким образом, чтобы часть элементов прилипала к левой стороне, а другая часть к правой. Например, логотип может использовать ограничители Top и Left. Правильно выполненное задание должно содержать по фрейму для каждой части сайта (отдельный фрейм для хедера, отдельный фрейм для футера и так далее). А уже все эти фреймы должны находиться внутри еще одного фрейма (дизайна сайта);
    2. Создайте 9 кнопок со всеми возможными комбинациями перечисленных ограничителей: top, center, bottom, left, right. Пример смотрите в разделе Виды ограничителей (Constraints) этого урока. Каждая кнопка должна находиться внутри отдельного фрейма и содержать как минимум заливку и текст;
    3. Нарисуйте форму обратной связи. Там должны быть поля «Имя», «Email», «Сообщение» и кнопка «Отправить». Поля должны тянуться вместе с формой, когда изменяем ее ширину. Подсказка: пригодится ограничение left & right. Сделайте отдельный фрейм для формы обратной связи.

    Чтобы проверить эту домашку мне понадобится доступ к файлу Figma с возможностью вносить правки, чтобы посмотреть на структуру фреймов и выставленные ограничители. Для этого убедитесь, что вы выбрали опцию can edit напротив Anyone with the link. Далее нажимаем на Copy link и присылаем мне в директ. Пожалуйста в дальнейшем все домашки присылайте с такими настройками. Если забыли, о том, как поделиться файлом писала в этом уроке.

    Как дать доступ для редактирования файла в Figma по ссылке

    Выводы

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

    Материал очень сложный, особенно, что касается компонентов и ограничителей. Перечитайте спустя несколько дней, потренируйтесь. Это не усваивается на 100% с первого раза. Следующие уроки будут покороче, но я постараюсь писать их чаще.

    Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.

    Stay tuned!

    Просмотры: 35029

    Что ещё почитать

    Оставьте комментарий

    Комментарии

    скажена черепаха · 26 февраля 2024 11:22
    згодна. намудрила я страшно.
    але вже все виправила! 🙂

    Коментар frusia.pro:

    Я переглянула, все добре. Єдине що, перегляньте ще раз налаштування в ось цих двох кнопках двох кнопках.

    Constrains для них не має бути «Top».

    скажена черепаха · 20 февраля 2024 14:36

    ох уж ці обмежувачі. як часто дизайнери ними послуговуються? у мене так і не вийшло до кінця форму зворотнього зв’язку зробити правильно.
    а ще — навіть після першого розтягування фрейму фігури в його середині вже не цілі числа мають, а дробові. Як мені відомо, дизайнерам слід уникати такого. (до речі, можете пояснити, чому?)
    тема непроста, але все одно, дуже дякую дуже за курс! ))

    Коментар frusia.pro:

    Привіт! Відповідаю на питання:

    Про обмежувачі. Розуміння роботи обмежувачів є базовими та корисними, особливо при роботі з більшими проєктами. Ці знання лягають в основу ще більш просунутого рівня володіння інструментом – автолейаутами. Тому раджу на цю тему перечитати кілька разів та спробувати різні варіанти відтворення на практиці.

    Про шкоду від напівпікселів. Ми стараємось уникати дробових чисел, тому що обʼєкти таким чином важко вирівнювати відносно одне одного. Зʼявляються маленькі розбіжності і з ними важко працювати. Перевірте у своїй фігмі наступне налаштування, воно має позбавити ваші макети дробових чисел у майбутньому.

    Про користь від напівпікселів. Налаштування із скріншоту інколи корисно і увімкнути. Наприклад, коли ви малюєте у Figma іконки з дрібними деталями.

    Про вашу домашку. Я кинула детальні коментарі, які мають допомогти вам. Моя порада, якщо заплутались (не тільки тут, в інших темах теж) почати завдання спочатку. Ще раз перечитати та спробувати. Бажаю удачі та пишіть, якщо щось не буде виходити

    Yuliya Lepenko підтримує ЗСУ · 18 сентября 2022 23:10

    Вітаю:)
    Дякую за зауваження. Після створення окремих фреймів об’єднала їх в групу, не допетрала, що це має бути об’єднано в загальний фрейм))Виправила.

    Коментар frusia.pro:

    Привіт! Так, тепер елементи сайту всередині фрейму і правильно налаштовані. В результаті все правильно тягнеться, молодець! Чекаю домашки до наступних уроків

    Yuliya Lepenko підтримує ЗСУ · 16 сентября 2022 12:09

    Коментар frusia.pro:

    Завдання 1. Налаштувати обмежувачі елементів сайту. Окремо кожен з елементів правильно налаштований, але майте на увазі, що замість головного фрейму ви використали групу. В ідеалі треба також застосувати фрейм. Щоб це виправити, достатньо конвертувати групу у фрейм і доналаштувати решту фреймів. Показала на відео, як це зробити:
    https://drive.google.com/uc?id=1t5FaiLxWETNAA_MYA0le_oB_piQBBYMo

    Завдання 2. Налаштувати обмежувачі кнопок. Все правильно!

    Завдання 3. Налаштувати обмежувачі форми зворотнього зв’язку. Також все ідеально!

    Чекаю на ваше виправлення до першого завдання

    Вікторія Грищенко підтримує ЗСУ · 8 августа 2022 21:07

    Добрий вечір! Виправила) Дякую за відео!
    https://www.figma.com/file/PoTVfPtGJw6X5Rn3Ga7kXk/%D1%83%D1%80%D0%BE%D0%BA-6?node-id=0%3A1

    Коментар frusia.pro:

    Добрий день! Так, тепер все супер, елементи сайту тягнуться разом з основним фреймом, молодець! Ця домашка пройдена, більше немає зауважень.

    Бачу, що ви вже надіслали домашку до наступного уроку, скоро перевірю

    Вікторія Грищенко підтримує ЗСУ · 6 августа 2022 19:07

    Добрий вечір!
    https://www.figma.com/file/PoTVfPtGJw6X5Rn3Ga7kXk/%D1%83%D1%80%D0%BE%D0%BA-6?node-id=0%3A1

    Коментар frusia.pro:

    Завдання 1. Налаштувати обмежувачі елементів сайту. В цілому все супер, ви розібрались, як налаштовуються обмежувачі. Там є декілька дрібних зауважень, все виправила та показала на відео. Головне, що можна покращити, це налаштувати обмежувачі фреймів в середині головного фрейму. Це теж показала на відео:
    https://drive.google.com/uc?id=16N9VRBQMhsLBsZdAEAl52oe2ow4FwSP4

    Завдання 2. Налаштувати обмежувачі кнопок. Все правильно.

    Завдання 3. Налаштувати обмежувачі форми зворотнього зв’язку. Також все правильно!

    Чекаю на виправлення до першого завдання

    Марія С підтримує ЗСУ · 9 июля 2022 19:20

    Доброго дня, виправила футер у першому завданні. Дякую за відео!)
    https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=22%3A714

    Коментар frusia.pro:

    Привіт! Будь ласка Так, тепер все ок. Переходьте до вивчення наступного уроку

    Богдана підтримує ЗСУ · 9 июля 2022 14:01

    Люба, вітаю!
    Дякую за відеопояснення до моїх виправлень! Це дуже допомогло і на власному прикладі я нарешті зрозуміла для чого потрібні ці вирівнювання і що з ними робити 😉 Спробувала зробити на прикладі іншого сайту виправлення завдання із футером та хедером і, звісно, виправила дз до цього уроку)

    Дяка за перевірку! Гарного дня 😉

    Коментар frusia.pro:

    Привіт! Дуже рада, що відео допомогло

    Тепер по всім завданням все правильно, молодець! У новому сайті лише не тягнеться біла лінія зверху футера, але думаю, що просто пропустили, бо така сама лінія внизу тягнеться, як треба.

    Це дуже складна тема, але схоже, що ви добре розібрались. Переходьте до наступного уроку

    Марія С підтримує ЗСУ · 6 июля 2022 16:18

    Добрий день
    https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=22%3A714

    Якщо треба доступ на редакт — скину інвайт на пошту

    Коментар frusia.pro:

    Привіт! Доступ на редагування не треба, бо я завжди роблю дублікат файлу, який вже доступний для редагування, але дякую, що запропонували

    Завдання 1. Налаштувати обмежувачі елементів сайту. З хедером все супер, а по футеру є питання. А саме стрілочка розтягується при зміні ширини фрейму. Також елементи футеру праворуч не закріплені по правій стороні. Записала відео, як виправити:

    Завдання 2. Налаштувати обмежувачі кнопок. Все правильно.

    Завдання 3. Налаштувати обмежувачі форми. Також все правильно, молодець!

    Чекаю на виправлення до першого завдання

    Ольга підтримує ЗСУ · 6 июля 2022 13:54

    Доброго дня)
    https://www.figma.com/file/hKkNTKgqHq9oqASXYO0qPs/%D1%83%D1%80%D0%BE%D0%BA-6?node-id=0%3A1

    Коментар frusia.pro:

    Завдання 1-3. Все зроблено ідеально, молодець! Також дуже сподобалось, як виконане кожне завдання з візуальної точки зору.

    Переходьте до 7-ого уроку

    Yana Usachova підтримує ЗСУ · 6 июля 2022 13:03

    Доброго дня, дякую за зауваження, я намагалась все виправити та щось я якась мабудь дурепа(((
    https://www.figma.com/file/NDNqWzbRGvrA8Xctl1jaT9/Page-1?node-id=0%3A1

    Коментар frusia.pro:

    Добрий день! Ви все виправили правильно по кожному завданню, молодець! Як буде час, періодично повертайтесь до обмежувачів, бо тема досить складна.

    Переходьте до наступного уроку

    Yana Usachova підтримує ЗСУ · 4 июля 2022 15:02

    Добрий день, дякую за можливість вчитися у вас
    https://www.figma.com/file/NDNqWzbRGvrA8Xctl1jaT9/Page-1?node-id=0%3A1

    Коментар frusia.pro:

    Добрий день! Будь ласка

    Завдання 1-3. У кожному завданні є помилки, тому записала відео, як виправити. Спробуйте повторити, а головне зрозуміти чому у кожному випадку використовуються вибрані обмежувачі.

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

    Чекаю на виправлення

    Богдана підтримує ЗСУ · 3 июля 2022 07:58

    Вітаю!
    Скоріше за все у ДЗ є помилки, але хочу, щоб Ви глянули і дали свої рекомендації. Бо в мене вже голова не варить. )
    Дяка за нову та цікаву інфу, розумію, що якщо розібратись у цій темі, то можна буде економити багато часу на дрібницях 😉
    https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=144%3A2

    Мирного дня та чудового настрою!

    Коментар frusia.pro:

    Так, є помилки, але нічого страшного. Обмежувачі досить складна тема. Записала відео для кожного завдання. Так має бути зрозуміліше. Головне зрозуміти, що обмежувачі спрацьовують на об’єкті під час зміни розміру фрейму, в якому вони знаходяться. Може бути ситуація, коли один фрейм знаходиться в іншому фреймі, а вже в ньому об’єкт, якому ми налаштовуємо обмежувачі. І тут вплив будуть мати обмежувачі об’єкту + фрейму, який знаходиться у фреймі. Тут краще самостійно поекспериментувати на простих прикладах, щоб зрозуміти.

    Завдання 1-3. Записала відео, як виправити, спробуйте повторити та зрозуміти, що не так.

    Чекаю на виправлення

    Анна підтримує ЗСУ · 29 июня 2022 14:28

    Добрий день, я виправила!
    Дуже вдячна за відео, воно мені дуже допомогло.
    дійсно ще багато логінчих моментів ще не усвідомила.

    Коментар frusia.pro:

    Добрий день! Будь ласка, тепер все правильно тягнеться, молодець! З часом опануєте усі нюанси

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

    Анна підтримує ЗСУ · 28 июня 2022 14:45

    Добрий день) відправляю свідомо знаючи за помилку в 1 завданні. Хедер та футер окремо тягнуться, а ось разом ні. Вже не знаю, що робити(
    https://www.figma.com/file/TCjqOcRMlzbumDDwZsl0fM/Untitled?node-id=5%3A2

    Коментар frusia.pro:

    Завдання 1. Налаштувати обмежувачі хедера й футера. Є декілька причин, чому разом не тягнуться:

    • Група з футером «Footer» знаходиться не в середині фрейму «Site Design». Ви можете переконатись у цьому поглянувши на панель прошарків. Тому переносимо в середину головного фрейму;
    • футер і хедер у вас зроблені групою, а мають бути фреймами. Тому конвертуємо їх у фрейми;
    • треба виставити обмежувачі у хедера й футера у «Left and Right»;
    • переконатись, що внутрішні елементи хедера і футера мають обмежувачі «Left» або «Right».

    Записала відео, щоб було все зрозуміло:

    Завдання 2. Налаштувати обмежувачі кнопок. Все правильно.

    Завдання 3. Налаштувати обмежувачі форми. Тут все добре крім вирівнювання тексту. Для тексту полів треба виставити вирівнювання по лівій стороні. Теж записала відео:

    Чекаю на виправлення

    Ірина С. підтримує ЗСУ · 22 июня 2022 21:09

    Добрий вечір! Надсилаю відредаговане дз. Щодо футеру, то мені показує, що все налаштовано як ви вказували, можливо щось не змінила того разу. Щодо 3-го завдання, то також поправила.
    https://www.figma.com/file/DAscpBPpOZt1qCWW6Ca83a/frusia.pro-%D0%94%D0%B7-6-%D0%86%D1%80%D0%B8%D0%BD%D0%B0-%D0%A1.?node-id=0%3A1

    Коментар frusia.pro:

    Добрий день! Так, тепер все добре: футер тягнеться і текст у полях форми вирівняний по правому краю.

    Переходьте до наступного уроку

    Ірина С. підтримує ЗСУ · 21 июня 2022 22:07

    Добрий вечір! Надсилаю дз до 6 уроку.
    https://www.figma.com/file/DAscpBPpOZt1qCWW6Ca83a/Homework-6?node-id=0%3A1

    Коментар frusia.pro:

    Завдання 1. Налаштувати обмежувачі для хедера й футера. Бачу правильно налаштований хедер і частково налаштований футер. Щоб останній правильно поводив себе при зміні ширини достатньо вказати горизонтальний обмежувач у Right для About_company, Values. Для групи Subscription треба встановити обмежувач у Left and right.

    Завдання 2. Налаштувати обмежувачі кнопок. Все правильно.

    Завдання 3. Налаштувати обмежувачі форми. Теж все правильно. Залишилось виставити вирівнювання тексту по лівій стороні для імені, пошти й повідомлення.

    Добре попрацювали, але чекаю на виправлення

    Alona Hur підтримує ЗСУ · 10 июня 2022 21:18

    Добрий вечір, посилання на домашку: https://www.figma.com/file/co8AdXKU0E13pdJN92XMek/%D0%A3%D1%80%D0%BE%D0%BA-6%2C-%D0%94%D0%97-1?node-id=0%3A1

    Коментар frusia.pro:

    Завдання 1. Налаштувати обмежувачі для хедеру і футеру. По футеру все правильно, а по хедеру є зауваження:

    • Елементу image 1 треба виставити обмежувачі у Left and right;
    • елементу Rectangle 1 аналогічно обмежувачі у Left and right.

    Після цього хедер буде правильно тягнутись.

    Завдання 2. Налаштувати обмежувачі кнопок. Все правильно, молодець!

    Завдання 3. Налаштувати обмежувачі форми. Також все правильно.

    Дуже добре, виправте обмежувачі у першому завданні й переходьте до наступного уроку

    Анна Смірнова підтримує ЗСУ · 9 июня 2022 14:36

    Доброго дня!
    Дякую за такий корисний урок.
    Надсилаю посилання на дз: https://www.figma.com/file/XvJv4GfKTam2WuwAKxGlHm/UI%2FUX-course-hw’s?node-id=0%3A1

    Підскажіть, будь ласка, а для чого ми розміщуємо хедер і футер у різних фреймах у середині одного? Вони себе тоді по іншому поводять? Я просто спробувала і так і так і не побачила різниці, хотіла б розібратись. Буду дуже вдячна за відповідь!

    Коментар frusia.pro:

    Добрий вечір, рада, що урок виявився корисним

    Завдання 1. Налаштувати обмежувачі для елементів сайту. Бачу налаштований футер і вікно повідомлень. Правильно.

    Завдання 2. Налаштувати обмежувачі кнопок у фреймах. Всі обмежувачі кнопок правильно налаштовані. Також цікаво, що сама кнопка зроблена компонентом, молодець!

    Завдання 3. Налаштувати обмежувачі форми. Все правильно зроблено, поля тягнуться, кнопка закріплена.

    З приводу вашого запитання. Складні компоненти завжди треба робити всередині фреймів, тому що у них можна дуже гнучко налаштувати поведінку при зміні розміру за допомогою обмежувачів. Тобто так, вміст фрейму буде себе поводити інакше. Звичайно кнопки, таби, іконки, хедер, футер та інші елементи роблять фреймами. Особливо зручно використовувати фрейми для компонентів. На даному етапі можете не заморочуватись і створювати групи, коли вам зручно.

    Ви набрали хороший темп, рухайтесь далі

    Інна підтримує ЗСУ · 7 июня 2022 18:37

    Добрий день, надсилаю посилання на домашню роботу https://www.figma.com/file/WA1X3Mq1qkL2n2DveCtO6y/Lesson-6?node-id=0%3A1
    Дякую за урок!

    Коментар frusia.pro:

    Завдання 1. Дуже добре, хедер і футер правильно тягнуться. Для практики спробуйте фрейму хедеру виставити обмежувачі Left and right, Top. Футеру виставіть обмежувачі Left and right, Bottom. Тепер змінюйте розмір головного фрейму (який включає хедер і футер) і подивіться, як себе поводять елементи.

    Завдання 2. Все правильно, молодець!

    Завдання 3. Також все правильно.

    Чудова робота, все виконано чітко по завданню. Переходьте до наступного уроку

    Катерина підтримує ЗСУ · 30 мая 2022 10:17

    Добрый день!)
    Отправляю на повторную проверку))

    Коментар frusia.pro:

    Завдання 1 і 3. Тепер все ок, кнопки Send і Load more тягнуться, як і треба при зміні ширини головного фрейму.

    Переходьте до наступного уроку

    Катерина підтримує ЗСУ · 28 мая 2022 23:05

    Коментар frusia.pro:

    Завдання 1. Може я не зовсім правильно пояснила. У вашому випадку треба фігурі Rectangle 80 виставити обмежувачі Left and right, Bottom. Для текстового блоку з назвою Load more треба виставити обмежувачі в Center, Center. Після цього при зміні ширини головного фрейму кнопка прикріпиться до лівого і правого краю. Спробуйте так зробити. В ідеалі було б добре обернути заливку і текст нижньої чорної кнопки у фрейм.

    Завдання 3. Кнопка тягнеться неправильно при зміні ширини головного фрейму з формою. Потрібно для фону кнопки Rectangle 65 виставити обмежувачі Left and right, Bottom. Для текстового блоку Send треба виставити обмежувачі у Center, Center. Тоді все правильно буде працювати.

    Спробуйте зробити виправлення

    Катерина підтримує ЗСУ · 28 мая 2022 11:43

    Добрый день
    ссылка на первое задание в названии

    Коментар frusia.pro:

    Завдання 1. Правильно, але виставіть текстовому елементу кнопки внизу обмежувачі в Center і Center, щоб текст центрувався.

    Завдання 2. Все правильно.

    Завдання 3. Добре, елементи форми правильно себе поводять, але у кнопці іконка не має розтягуватись. Тому поставте їй обмежувачі Right і Center. Для тексту кнопки треба виставити обмежувачі в Center, Center. Спробуйте і подивіться, як зміниться поведінка при зміні ширини головного фрейму.

    Чекаю на виправлення

    Софія · 13 мая 2022 14:44

    Доброго дня, надсилаю завдання для перевірки)
    https://www.figma.com/file/PzeXpMEI2tHJ4d1AgNSOc4/Untitled?node-id=7%3A153

    Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.

    За реквізитами пишіть в дірект Інстаграму @frusia.pro

    Вероніка · 7 мая 2022 13:00

    Наразі врахувала Ваші зауваження щодо єдиного стилю назв для груп та фреймів, дякую за зауваження щодо іконок, не звернула уваги!

    В 1-му завданні взяла знову за основу дизайн сайта з біхенс. З 1-м завданням виникла проблема через нерозуміння грамотної адаптивності сайта (тобто що і як мало би змінюватись, масштабуватись/зсуватись і тд), постаралась зробити так, аби у футері та хедері пропорційно розтягувались елементи. Зробила так через специфічне розташування логотипа (поза основної сітки), хоча в іншому випадку може зробила б так, аби всі елементи залишались на своїх позиціях відносно центра (як основний контент, який не масштабується і не розтягується у мене).

    Основний контент вирішила лишити зафіксованим відносно центра без розтягування, просто не знаю поки які ще варіанти можуть бути для такої ситуації через незнання))

    Всі завдання в різних pages))

    Дякую ще раз за Ваш фідбек, після кожного зданого завдання дуже чекаю Ваш коментар, цікаво дізнаватись зауваження та думку))

    Коментар frusia.pro:

    Добрий день! Так, спочатку може бути незрозуміло, які обмежувачі у якому випадку використати, але з практикою все стане на свої місця. Головне взяти за звичку виставляти обмежувачі і не забувати про них. Це не завжди потрібно, але поки ви навчаєтесь, то робіть це по можливості.

    Центрування і фіксація основного контенту по ширині, це досить типове і правильне рішення, все добре.

    Завдання 1. Дуже добре, але спробуйте змінити декілька обмежувачів (підписала відповідно до назв прошарків у вашому файлі) і подивіться наскільки краще стане себе поводити дизайн сайту при зміні ширини головного фрейму. Описала максимально детально:

    1. Sidebar (with logo): Top, left. Тепер позиція логотипу і посилання на соцмережі не зміщуються при масштабуванні. Так і має бути в ідеалі.
    2. Main page → image: Left & right, top. Аналогічно відступи зліва від картинки стануть постійними.

    Завдання 2. 9 кнопок з різними обмежувачами. Все правильно, молодець.

    Завдання 3. Форма зворотного зв’язку. Теж правильно.

    Хочу похвалити, схоже що ви розібрались з обмежувачами. Крім того, ви вже використовуєте компоненти. З назвами прошарків тепер теж все ок

    Переходьте до наступного уроку!

    Вероніка · 6 мая 2022 14:36

    А от є питання, як розрахувати розміри дійсного розміру сайта (тобто щоб брати не розмір самого екрана, а врахувати те, що ще займають місце верхня панель браузера з вкладками та нижня панель управління операційної системи).
    Наприклад, якщо хочу, щоб при відкриванні сайта не обрізався контент головної сторінки, тобто як врахувати реальні параметри видимого простору сайта в браузері?

    Розумію, що можна, наприклад, зробити скрін браузера і так розрахувати видиму частину сайта, але цікаво, як це насправді робиться))

    Сподіваюсь, зрозуміло пояснила! Завчасно дякую, якщо зможете відповісти!)

    Коментар frusia.pro:

    Точної відповіді немає, треба орієнтуватись на розмір екрану під який ви робите дизайн. Наприклад, 15 дюймовий ноутбук буде мати розмір 1440х900 пікселів. Від висоти віднімаємо приблизно висоту браузеру і головного меню системи і отримуємо висоту першого екрану. Проблема у тому, що висота браузеру і системні меню будуть у всіх різні, в залежності від операційної системи (macOs, Windows, Linux) і налаштувань (меню пуск може бути як горизонтальним так і вертикальним).

    Тому запропонований вами варіант для обчислення висоти першого екрану, коли ми робимо скрін і самі обраховуємо висоту не такий далекий від істини, як вам здається

    Ельвіра · 8 апреля 2022 11:18

    Доброго дня, Любов!
    Дякую за вашу роботу!
    https://www.figma.com/file/Qh7v8Z0DP3MNCILBK9Wtpo/HW6?node-id=0%3A1

    Комментарий frusia.pro:

    Завдання 1. Не знаю, чи перевіряли ви самі правильність налаштувань, але в адаптивності вашого хедера є одна помилка. Рожева підкладка під пунктом меню має залишатись незмінною по розміру, адже саме слово не зміниться, досягти цього можна об’єднавши ось ці пункти меню в окремий фрейм та закріпивши його зліва. Також ви можете поцікавитись окремо що таке auto layout та як він працює, але в цьому уроці цього немає, тому не обов’язково.

    На цьому сайті усі елементи футеру по суті знаходяться по середині, тому налаштування обмежувачів по ширині повинно було б бути center. Ще однією помилкою є те, що прапорці країн розтягуються (втрачають свою форму) . Поправити це можна задавши кожному прапорцю настройку left, замість scale. А для загального фрейму із ними – знову ж таки center.

    Завдання 2. З кнопками все добре, молодець.

    Завдання 3. Форма працює коректно, але є проблеми з іконками у першому полі. Для них вказане налаштування scale і виходить отак. Треба для обох іконок вказати налаштування обмежувача right.

    Андрей Дьяченко · 13 марта 2022 20:06
    Большое спасибо за урок. Много нового и очень полезного узнал. Вы лучшая.
    Люба Фурсеева · 27 ноября 2021 13:19
    Klkiv, thanks!
    Klkiv · 20 ноября 2021 03:49
    Thank you, your site is very useful!
    Полина · 16 ноября 2021 19:46

    Добрый вечер, спасибо большое!

    Стало интересно, каким инструментом вы пользовались, чтобы вытянуть 3д иллюстрации из сайта?
    -Настойки->Дополнительные инструменты->Инструменты разработчика.
    Там обычно в первых папках находятся фото, картинки, иконки в сайта 🙂

    Комментарий frusia.pro:

    Супер! Это хорошо, что вы владеете такими знаниями.

    Виктория · 11 ноября 2021 12:22

    Здравствуйте! Исправила третье задание: https://www.figma.com/file/yfkhD232HoDEdTkllydu9z/Wildberries

    Комментарий frusia.pro:

    Задание 1. В футере вот эта часть по идее должна крепиться к правому краю, попробуйте поменять настройки.

    Задание3. Чтобы все настройки корректно работали вам нужно работать не с группами, а с фреймами. Это описано в уроке. Переключение из группы в фрейм можно сделать так.

    Полина · 10 ноября 2021 19:55

    Добрый вечер!
    Благодарю вас за ваш труд и знания, отличный урок!) Прошу проверить мою домашку: https://www.figma.com/file/J94maPnOyH0MiMh60eKPuB/London-Express-(Copy)?node-id=0%3A1
    Заранее спасибо.

    Комментарий frusia.pro:

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

    Стало интересно, каким инструментом вы пользовались, чтобы вытянуть 3д иллюстрации из сайта?

    Задание 2. Все правильно.

    Задание3. Тоже все верно. Класно, что тут вы также применили правильные настройки не только для полей, но для самого блока с формой, включая иллюстрацию.

    Виктория · 28 октября 2021 12:15

    Здравствуйте) Спасибо за задания, проверьте пожалуйста работы:
    1,3) https://www.figma.com/file/yfkhD232HoDEdTkllydu9z/Wildberries
    2) https://www.figma.com/file/TEnpRdbzfmNOZ2ftukakUb/Buttons

    Комментарий frusia.pro:

    Задание 1. В целом вы сделали верно, но есть несколько ошибок, на которые стоит обратить внимание. Посмотрите пожалуйста этот скриншот.

    1. Если начать тянуть хедер, иконка локации возле города растягивается. Ей нужно задать настройку Constrainsts «Left/Top»;
    2. Также перепроверьте настройки иконок поиска и камеры. У них сейчас указана настройка «Scale», из-за этого они растягиваются при изменении ширины фрейма с хедером. Мы можем указать для них такие же настройки, как и для предыдущей иконки. Также можно поработать с полем поиска, превратив его в отдельный фрейм, и задать ему такие настройки, чтобы когда мы тянем хедер, поле тоже растягивалось;
    3. Композиция футера требует от нас, чтобы этот текст всегда был посредине макета и крепился к нижнему краю футера. Попробуйте превратить группу с его содержимим в фрейм и задать им настройки «Center / Bottom»;

    Задание 2. Все правильно.

    Задание3. К сожалению, выполнено неправильно. Попробуйте еще раз сделать такую форму или поправить текущую, перечитав урок или посмотрев настройки формы от ученице Нины, которое я прикрепила в комментариях выше.

    Настя · 2 сентября 2021 13:18

    Доброго времени суток 🙂 Ох, и тяжеловато было разбираться с ограничителями. Мне кажется, я всё-равно в них путаюсь))

    Комментарий frusia.pro:

    Задание 1, 3. Замечательно! Вы сделали два задания в одном фрейме, получилось супер! Вы молодец, что использовали компоненты.

    Задание 2. Все правильно.

    Для всех, кто будет выполнять это задание, Нина идеально выполнила домашнее задание. Возможно кому-то поможет: Пример ДЗ от Нины

    Нина · 18 августа 2021 00:56
    Вот ссылка на это дз
    https://www.figma.com/file/IfxtvDK0cNvhOsZ77Tthgj/%D0%94%D0%B7-6?node-id=0%3A1

    Комментарий frusia.pro:

    Задание 1. Все отлично! Для объектов указаны правильные настройки, молодец!

    Задание 2. Тоже все правильно.

    Задание 3. Тут вы к сожалению сделали ошибки, поэтому когда тянешь фрейм – объекты ведут себя некоректно. Попробуйте исправить, сделав другие настройки: форму внутри фрейма нужно привязывать к правому краю экрана, а сейчас у вас стоит настройка (scale). Также, учитывайте, что когда мы групируем объекты, то для каждой группы тоже нужно указать свои настройки. Попробуйте переделать и отправить снова.

    Марина · 10 июня 2021 14:14

    Люба, спасибо за обратную связь))
    сделала работу над ошибками в 1 и 3 задании. Надеюсь, что все исправила и ничего не упустила)
    https://www.figma.com/file/AMFpJ4Ys3pTswJ2DnwJ2cA/Lesson-6?node-id=109%3A2

    Комментарий frusia.pro:

    Да, вы все правильно исправили, молодец! Надеюсь, теперь стало понятно зачем нужны ограничители Left и Right.

    Марина · 8 июня 2021 13:44

    Спасибо большое за Ваши уроки! Этот урок действительно оказался довольно сложным(
    посмотрите, пожалуйста))
    Жду обратной связи)
    https://www.figma.com/file/AMFpJ4Ys3pTswJ2DnwJ2cA/Lesson-6?node-id=109%3A2

    Комментарий frusia.pro:

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

    Задание 1. Все элементы хедера (шапки сайта) не объеденены в один фрейм. Также вы используете горизонтальный ограничитель Scale, а не Left или Right. Из-за этого, когда меняешь размер главного фрейма (в котором и находится весь дизайн странички) элементы шапки не прилепают к краям, а постепенно сдвигаются из-за чего отступы слева и справа непостоянны. Чтобы это исправить нужно:

    1. Установить ограничитель Left для логотипа и пунктов меню (ТВ-каналы, Фильмы, Сериалы, . Акции) чтобы элементы прилипли к левому краю родительского фрейма;
    2. а для иконки поиска, входа и пунктов меню Вход | Регистрация установить ограничитель Right, чтобы все эти элементы прилипли к правому краю фрейма.

    С футером дела обстоят лучше, все его элементы вы поместили в отдельном фрейме. Но горизонтальный ограничитель установлен в Scale, что также делает боковые отступы непостоянными. Достаточно выбрать фрейм подвала и установить ограничитель Left and right.

    Задание 2. У вас там два фрейма, так вот во втором (с названием Desktop — 2) все сделано правильно. Молодец!

    Задание 3. Похожая ошибка, как и в первом задании. Установите ограничитель Left and right для полей, чтобы они прилипли к левому и правому краю. Также установите ограничитель Left для подсказок в каждом поле. После этого форма будет тянуться, как надо.

    В остальном хорошо справились! Если остались непонятные моменты по ограничителям, пожалуйста задавайте вопросы, ведь тема очень сложная.

    Люба Фурсеева · 31 марта 2021 01:01

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

    Мария · 29 марта 2021 22:18

    Большое спасибо за урок! Правильно ли я поняла, что большинство элементов сайта (например, карточки товаров, кнопки, формы и т.п.) нужно помещать в отдельные фреймы, а не в группы? А как быть, например, с иконками и картинками? Также во фреймы? Или можно в группы?

    Анастасия · 3 декабря 2020 14:36

    Люба, исправила ошибки в первом и втором задании. Посмотрите, пожалуйста
    1) https://www.figma.com/file/qA8yH5f6YU0D08R0KHWik0/task-6.1-wikium.ru?node-id=1%3A3
    2) https://www.figma.com/file/goQ9YbLIjlRNcawqhFIvQ8/task-6.2_buttons?node-id=12%3A6

    Комментарий frusia.pro:

    Теперь все правильно в обоих заданиях! Вы большая умничка, переходите к следующему уроку!

    Анастасия · 26 ноября 2020 16:27

    Люба, спасибо вам за ваше время и обратную связь)

    ДЗ:
    1) https://www.figma.com/file/qA8yH5f6YU0D08R0KHWik0/task-6.1-wikium.ru?node-id=1%3A3
    2) https://www.figma.com/file/goQ9YbLIjlRNcawqhFIvQ8/task-6.2_buttons?node-id=2%3A0
    3) https://www.figma.com/file/E3GM5X6QQjd7gFuAI8JuVj/task-6.3_form?node-id=0%3A1

    Комментарий frusia.pro:

    Пожалуйста , пройдемся по каждому заданию:

    Задание 1. Очень хорошо, но желтую кнопку «Получить премиум» лучше прилепить к правому краю, как вы сделали с иконкой подарка и аватаркой пользователя.

    Задание 2. Есть несколько ошибок:

    1. У левой кнопки по центру неправильно выставлены ограничители. Нужно заменить на Left и Center;
    2. у центральной верхней кнопки нужно выставить Center и Top;
    3. у правой нижней – Right и Bottom;
    4. оберните каждую кнопку в отдельный фрейм и добавьте текст.

    Задание 3. Все тянется, как нужно. Молодец!

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

    Айдана · 24 ноября 2020 14:44
    6 урок- https://www.figma.com/file/4gL9aka1jNzjo8LjGMfAeI/Untitled?node-id=5%3A25

    Комментарий frusia.pro:

    Вы забыли установить доступ на редактирование файла (с помощью синей кнопки Share). Ничего страшного, я просто сделала копию файла.

    Задание 1. Ограничители выставлены правильно и в хедере, и в футере. Но в навигационном меню хедера выставлено неправильное выравнивание текста (по левому краю), что не позволяет ему корректно растягиваться. Достаточно выставить выравнивание текста по правому краю (смотрите скрин http://prntscr.com/vtwn87 ). Также важное замечание: хедер, футер и форма должны быть внутри отдельных фреймов, а не в группах. Так как любой объект, к которому мы применяем ограничители должен быть внутри фрейма, чтобы он работал корректно.

    Задание 2. Ограничители выставлены правильно, но вы нарисовали просто прямоугольники, а не кнопки. В кнопке как минимум должен быть текст. Чтобы сделать кнопку, поместите текст внуть фрейма. Сами прямоугольники удалите и используйте заливку фрема, чтобы задать цвет. Таким образом у нас получиться 9 фреймов (кнопок) внутри изначального фрейма (фона).

    Задание 3. Форма обратной связи сделана с ошибками.

    1. Все элементы формы обратной связи должны находиться внутри фрейма, а не группы;
    2. составные части каждого поля (фон и текст) должны содержать ограничитель Left & Right, чтобы правильно тянуться.

    В остальном все хорошо. Пожалуйста исправьте указанные недочеты и отпишите, чтобы я могла перепроверить домашку. Если что-то непонятно (тема очень сложная), не стесняйтесь, задавайте вопросы. Буду стараться объяснять на пальцах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *