Как удалить flow в фигма

How Do I Delete All My Flows in Figma?

If you’re done with a Figma flow or want to start from scratch, you can delete all the frames in your file at once. Here’s how:

In the left sidebar, select the frame you want to delete.

2. In the top menu bar, click Edit > Delete.

3. In the confirmation dialog that appears, click Delete.

How Do I Delete All My Flows in Figma?

Deleting all your flows in Figma is easy! Just follow these simple steps:

PRO TIP: If you delete all your flows in Figma, you will no longer be able to access or edit them. This action cannot be undone, so make sure you really want to delete all your flows before proceeding.

7 Related Question Answers Found

How Do I Unsubscribe From Figma?

There are a few steps you need to follow in order to unsubscribe from Figma. First, open the app and go to your account settings. Then, select the ‘Billing’ tab and scroll down to the ‘Cancel Subscription’ section.

How Do I Delete All My Connections on Figma?

There are a few ways to delete your connections on Figma. The first way is to go to your account settings and delete your account. This will delete all of your account information, including your connections.

How Do I Delete a Component in Figma?

In Figma, deleting a component is simple. Right-click on the component in the Layers panel and select Delete from the menu that appears. The component will be deleted from your project.

How Do You Delete a Component in Figma?

When you delete a component in Figma, it is removed from your library and any instances of it on your canvas. To delete a component: 1. Select the component in the canvas or your library 2.

How Do You Delete Guidelines in Figma?

If you’re using Figma to design your website or application, you may find yourself wondering how to delete guidelines. Luckily, it’s a pretty straightforward process. Here’s a quick guide on how to do it: First, open up the project that you want to delete the guidelines from.

How Do You Force Quit Figma?

There are a few different ways that you can force quit Figma on your computer. The first way is to press “Command + Option + Esc”. This will bring up the Force Quit Applications window.

How do I cancel my Figma subscription?

If you want to cancel your Figma subscription, there are a few ways to go about it. The easiest way would be to open the Figma app on your device and tap on the account icon in the top-left corner. From here, you can tap on the “Cancel Subscription” button.

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.

About us

When we started our online journey we did not have a clue about coding or building web pages, probably just like you.

All we wanted to do is create a website for our offline business, but the daunting task wasn’t a breeze. After months and years of trying out CMS’s and different website creators, we became experts in creating these, and wanted to share our knowledge with the world using this site.

We now review dozens of web related services (including domain registrars, hosting providers and much more), and write in-depth guides about site creation, coding and blogging.

Who can benefit from the site?

• Bloggers
• Photographers
• Freelancers
• Professionals
• Business Owners
• eCommerce Stores
• Everyone

• About / Contact
• Terms Of Service – Privacy Policy – Disclosure
• Website Building
• Hosting
• Web Design
• Web Development
• Domains

Продвинутые советы по анимации и прототипированию в Figma

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

В этой статье я решила сосредоточиться на практических приемах, а не на экспериментальных анимациях (хотя перед некоторыми все-таки не смогла устоять). Не поймите меня неправильно. Меня всегда впечатляли фантастические анимации в Figma (только недавно Double Glitch поразил меня своей лава лампой в Figma). Однако в этой статье сосредоточимся именно на повседневном рабочем процессе.

Видеоверсия этой статьи:

alt + 8 / alt + 9 → переход между дизайном и меню прототипирования (нет, больше не Shift E). И да, как вы уже догадались, alt 0 — проверка (inspect), а alt 1, 2 — слои и ресурсы.

cmd/ctrl+alt+enter → открыть режим презентации, чтобы увидеть свой прототип.

alt + cmd/ctrl + стрелка влево/вправо → переход между открытыми файлами. Это очень полезно, когда у вас открыт файл дизайна и презентация прототипа.

Z → нажмите Z в режиме презентации, чтобы переключаться между различными вариантами презентации (показать 100%, растянуть по размеру экрана и т. д.)

1. Auto layout и smart animated components — идеальное сочетание

Начнем с моего любимого трюка, который наверняка поразит вас. Figma становится действительно мощной, когда вы комбинируете автоматическую компоновку, интерактивные компоненты и умную анимацию. Только подумайте об этом: auto layout автоматически заполняет любое освободившееся пространство. Таким образом, если вы создадите интерактивные компоненты с помощью смарт-анимации, а затем упакуете экземпляры во фрейм с автоматической компоновкой, это позволяет вам играть с разными размерами. Идеальный метод для создания таких вещей, как аккордеоны.

Имитация удаления:

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

��Совет: Figma не позволяет использовать высоту 0, поэтому нам приходится выбирать 1 пиксель. Это тоже смотрется нормально, но если вы установите, к примеру, высоту 0,004, Figma будет вынуждена округлить ее до 0.

2. Фиксация состояния с помощью секций

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

Без секций

Итак, допустим, наши посетители просматривают дизайн. Они уже прошли шаги (фреймы) A и B и заканчивают взаимодействие на шаге C. Со стандартной настройкой в ​​Figma после этого мы всегда возвращаемся на экран A. В реальной жизни это бы очень раздражало, например, при необходимости повторно вводить все личные данные. Кроме того, сам процесс прототипирования становится очень запутанным из-за большого количества связей между фреймами. И мы всегда вынуждены выбирать экран, на который нужно вернуться при закрытии процесса. Но ведь мы наверняка хотели бы вернуться туда, откуда пришли, а это может быть даже другой страницей с той же кнопкой призыва к действию.

С секциями

Инструмент «Секции» можно найти в меню фрейма или просто нажать Shift+S. Мне нравится использовать их для организации работы, потому что секции не отображаются в режиме презентации (в отличие от фреймов). Когда же дело доходит до прототипирования, они позволяют нам создавать проекты с сохранением состояния.

В этом случае я нарисовала секцию вокруг шагов A, B и C. Это все, что мне нужно сделать, чтобы Figma запомнила последний просмотренный фрейм в этой секции при повторном входе из любых (. ) других точек. Абсолютное спасение, когда дело доходит до тестирования экранов регистрации.

��Совет: При работе с секциями обязательно устанавливать для них параметр «navigate to» (открытый оверлей не сработает), но внутри секции можно связать фреймы, как если бы они были оверлеями. Это имеет то преимущество, что теперь вы можете использовать действие «назад» на кнопке закрытия, добавляя возможность вернуться точно в то место, откуда вы вошли в секцию! Это просто любовь!

3. Вложенные прототипы в презентациях

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

4. Scroll to! Горизонтальный, вертикальный и смешанный

«Scroll to» это отличная вещь, часто упускаемая из виду! С помощью «Прокрутки до» вы можете установить якорные точки в разных направлениях.

«Вертикальная прокрутка до» для создания хорошей навигации

Отлично подходит для очень простых анимаций, вроде одностраничного меню. Кстати, если вам интересно, для чего нужны значения хедер (offset values), так это на случай, если у вас есть липкий заголовок (sticky header) или какое-то пространство, которое нужно учитывать при прокрутке.

«Горизонтальная прокрутка до» для создания слайд-шоу

Просто поместите изображения во вложенный фрейм с overflow, а затем установите для этого фрейма горизонтальную прокрутку (в меню Prototype→Overflow scrolling). Теперь вы можете связать миниатюры, которые находятся за пределами фрейма, с изображениями. Круто, не правда ли!

«Горизонтальная и вертикальная прокрутка до» для интерактивных карт

Да-да, мы можем использовать прокрутку в обоих направлениях: и вертикально, и горизонтально. Все, что нам здесь нужно, — это карта, размещенная во вложенном фрейме с обрезанным содержимым (clip content) и горизонтальной и вертикальной прокруткой. Тут важно только, чтобы карта была больше, чем фрейм.

На карту я помещаю метки, некоторые — в обрезанную область. А затем связываю кнопки через «scroll to». Вот и все!

��Совет: чтобы метки располагались посередине карты при прокрутке, я установила смещение, равное половине размера фрейма с картой (то есть +/— 345, так как моя карта имеет ширину и высоту 690).

5. Комбинируйте умную анимацию (smart animate) и анимацию движения (moving animations) в Figma

Движущиеся переходы и умную анимацию можно комбинировать. Этот функционал немного скрыт в меню анимации (обнаруживается только при выборе анимации движения).

Допустим, вы добавляете переключение фрейма с помощью pushing in, но хотите, чтобы меню сверху по-прежнему анимировалось. В этом случае просто используйте движущийся переход (moving transition) в качестве основной анимации и обязательно установите флажок «Smart animate matching layers». Теперь Figma будет «смарт-анимировать» слои с одинаковыми именами и настройками иерархии.

��Совет: это приведет к умному анимированию всех слоев с одинаковым именем и иерархией. Если вы хотите, чтобы это касалось только некоторых из них (например, в этом случае навигации, а не изображений), обязательно переименуйте другие слои (или группу, в которой они находятся). Тогда они станут частью движущейся анимации (moving animations).

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

6. Анимация перехода круга в прямоугольник

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

7. Интерактивные компоненты — моя большая любовь!

Интерактивные компоненты потрясающи! Если вдруг кто не знает, вы можете создавать анимации в наборе компонентов с вариантами, и все экземпляры будут наследовать заданное поведение. Это очень полезно для таких вещей, как кнопки, переключатели и все микровзаимодействия.

Итак, теперь давайте посмотрим на другие простые примеры такой магии:

8. Добавляйте масштабирование при наведении с помощью интерактивных компонентов

Эффект зума это еще один одна анимация, которой можно добиться с помощью интерактивных компонентов. Просто увеличьте изображение в целевом кадре и настройте смарт-анимацию между ними при наведении. В дизайне используйте экземпляр, а текст и изображения переопределяйте. Готово!

��Совет: рекомендую вам использовать инструмент масштабирования. Просто нажмите K, а затем используйте коэффициент масштабирования. А также запишите его в заметки, чтобы потом добавить коэффициент масштабирования для преобразования CSS в свою документацию.

9. Видео-анимация при наведении

Интерактивные компоненты также отлично работают в сочетании с видео. Давайте настроим видео-анимацию при наведении.

Сначала зададим параметры для карточки с видео (работает только на платном тарифе Figma, извините). Затем сделаем копию этой карточки и заменим видео неподвижным изображением. Простой способ добиться этого — выбрать видео, нажав shift+cmd+C. Так png скопируется в буфер обмена. Теперь просто вставим png как замену видео в стартовом фрейме. Убедитесь, что оба фрейма настроены как варианты в наборе компонентов, и просто подключите смарт-анимацию, срабатывающую при наведении курсора. Свяжите фреймы и нажмите кнопку воспроизведения. Вуаля!

10. Смарт-анимация для меню

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

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

11. Анимация увеличения при наведении

Представьте себе, добавление автоматического макета (auto layout) дает еще больше возможностей. Итак, здесь у меня есть смарт-анимированный интерактивный компонент с изменением размера, а экземпляры объединены во фрейм с auto layout, поэтому при наведении они увеличиваются в размере, отодвигая в сторону все на своем пути.

��Совет: Если вы хотите, чтобы крестик анимировался правильно, то вам нужно, чтобы у элемента (в данном случае креста) в обоих вариантах были одинаковые настройки и название! Я просто установила непрозрачность на 0 в большей версии, чтобы создать эффект затухания.

Предостережение по поводу умной анимации: все это еще нужно превратить в код!

Итак, вот где я начинаю медленно дрейфовать в опасные области смарт-анимации (но не сильно, не переживайте). Опасные, потому что в Figma все это ооочень просто! Буквально по одному щелчку мыши я могу получить плавную и отполированную анимацию. Но этот щелчок в Figma может быть не так просто повторить с помощью анимации CSS/SVG.

Помимо планирования анимации для повышения удобства использования (а вот и отличная статья об этом), когда-то настанет момент и ее воссоздания. Так что все эти сумасшедшие изогнутые карусели и индикаторы загрузки в виде цветных парящих шариков крутые, и я уверена, что кто-то где-то как-то сможет их реализовать. Видит Бог, у них могут быть даже более творческое решение! Но иногда имеет смысл поумерить свой творческий пыл (если только мастера CSS-анимации не окружают вас неограниченным бюджетом, тогда вы должны позвонить мне).

Извините, что омрачила наш смарт-анимационный парад, но сначала обязательно посоветуйтесь с вашим разработчиком, чтобы убедиться, что дизайн осуществим и поддерживается кодом. Это не значит, что вы не можете разгуляться и проявить творческий подход. Просто имейте в виду, что Figma — это не конечный продукт.

Советы по документированию и организации прототипов

Хорошо, давайте взглянем на некоторые советы, которые менее кричащие, но очень полезные, когда дело доходит до организации и документирования вашего прототипа:

12. Используйте внешние ссылки для подключения прототипов к разным страницам и файлам

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

13. Избавляемся от всех связей в прототипе

Не могу поверить, что я так долго не знала об этом. Убедитесь, что вы находитесь на вкладке прототипирования, а затем просто щелкните правой кнопкой мыши по холсту и удалите все соединения. Аххххх!

14. Встраивайте прототипы (как я сделала здесь)

Вы можете вставить ссылку на свой прототип во многие места, такие как Notion, Medium, ZeroHeight и т. д. Это замечательно, потому что позволяет продемонстрировать определенные части прототипа с дополнительной документацией или объяснением. И, конечно же, все автоматически обновляется. Вот, попробуйте:

15. Упакованные «компоненты-воронки»

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

Уловка, которую вы можете использовать, заключается в том, чтобы создать экземпляр, а затем снова упаковать этот экземпляр как компонент. Это немного похоже на то, что мы делали с _base компонентами в старые добрые времена (они вам больше не нужны, но это уже отдельная история). Теперь вы можете установить соединения из этого нового компонента и использовать экземпляры в качестве хедера. Все соединения будут унаследованы, но поскольку мы, по сути, просто используем экземпляр, упакованный в отдельный компонент, он также будет следовать всем изменениям основного компонента. Немного странно вникать в это в первый раз, но на деле все проще, чем кажется:

��Совет: если вы назовете компонент _name или .name, он не будет синхронизирован с вашей библиотекой компонентов. Это имеет смысл, так как вы хотите, чтобы синхронизировался только основной компонент навигации, а не ваша воронка, которая существует только для того, чтобы помочь вам создать прототип.

Спасибо Ридду, который недавно написал в Твиттере об этой технике (скорее всего, он называет ее по-другому). С тех пор я постоянно использую этот способ!

16. Используйте потоки, чтобы управлять просмотром прототипа

Вы можете добавить потоки (flows) в свой прототип, и они появятся в режиме презентации. Поток будет отображаться в виде маленькой синей метки, которую можно переименовывать и перемещать.

��Совет: к потокам также можно добавлять описания — они будут отображаться в режиме презентации. Мне нравится использовать это для руководства тестированием.

Просмотр потоков

Если вы щелкнете по холсту, выбрав вкладку прототипирования, вы увидите все ваши потоки. Да, потоков на странице можно иметь сколько угодно (или ни одного). Обратите внимание, что для отдельных потоков можно копировать ссылки!

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

17. А вы в курсе, что ссылки запоминают настройки прототипа?

Когда вы делитесь ссылкой из своего прототипа, он запоминает все настройки! Таким образом, вы можете установить размер на 100% или по размеру экрана, выбрать, хотите ли вы видеть потоки или нет, и, конечно же, хотите ли вы задать устройство просмотра. После этого он откроется для всех, кто нажмет на вашу ссылку, именно в том виде, который вы установили.

��Совет: Если вы задаете устройство просмотра, вы задаете его для всей страницы, а не только для одного фрейма! Вот почему мне нравится отделять мобильный прототип от десктопной версии.

Делитесь этой статьей с друзьями, которые тоже не прочь выжать из Figma максимум и рассказывайте о своих открытиях в комментариях в наших соцсетях.

Теги

Присоединяйтесь к нашему сообществу!

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

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 и присылаем мне в директ. Пожалуйста в дальнейшем все домашки присылайте с такими настройками. Если забыли, о том, как поделиться файлом писала в этом уроке.

  

  Выводы

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

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

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

  Stay tuned!

  Просмотры: 31234

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

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

  Комментарии

  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, чтобы правильно тянуться.

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

  Как работают группы и фреймы в Figma

  Работая в Figma, вы когда-нибудь сталкивались с проблемой выбора, что использовать фрейм или группу? Оба варианта – контейнеры для размещения объектов, но каждый имеет свои уникальные свойства и случаи использования. Не всегда очевидно, как они отличаются друг от друга, поэтому, чтобы помочь вам различать их, я написал эту статью.

  Группы

  Как и в других инструментах дизайна, группы в Figma позволяют объединять несколько элементов вместе в один слой верхнего уровня. Границы группы определяются ее дочерними элементами, поэтому изменение размера или перемещение этих элементов приведет к автоматическому изменению границ группы. Вы можете создать группу, выбрав объекты и нажав: ⌘ + G (Mac) или Ctrl + G (Win). Границы группы автоматически корректируются при изменении размера или расположения дочерних элементов Создание группы не является деструктивным действием – это означает, что она не навсегда выравнивает или объединяет слои вместе. В любой момент вы можете разгруппировать элементы, нажав: ⌘ + Shift + G (Mac) или Ctrl + Shift G (Win). Группы действительно полезны, когда вы хотите объединить похожие элементы и работать с меньшим количеством слоев. Например, у вас есть набор логотипов компаний, которые должны оставаться вместе. Создание группы – отличный способ объединить их в один более управляемый слой – кликнув по любому из элементов в вашей группе, вы выделите всю группу, и сможете манипулировать им, как единым объектом на холсте. Если вам нужно выбрать определенный дочерний элемент в группе, дважды кликните по нему. Также внутри группы вы можете использовать такую функцию, как Smart Selections, чтобы настроить расстояние между элементами. В приведенном ниже примере вы можете увидеть автоматическую настройку границ группы для соответствия общим размерам дочерних элементов при изменении интервала. Когда вы изменяете размер группы, ее дочерние элементы будут масштабироваться, как векторные изображения. Однако эффекты, контуры и размеры шрифта не будут масштабироваться. Если вы хотите, чтобы эти свойства также масштабировались, используйте инструмент масштабирования (K). Если вы хотите применить ограничения, чтобы определить, как будут изменяться размеры элементов, рассмотрите возможность использования фрейма. Ограничения, применяемые к элементам, всегда будут относиться к ближайшему родительскому фрейму, а не к границам группы. Подробнее об этом в разделе, посвященном фреймам! Сравнение масштабирования групп, содержащих векторные изображения и текст, с использованием нормального поведения при изменении размера и с помощью инструмента масштабирования (K)

  Фреймы

  1. Выберите инструмент «Фрейм» (F) и выберите предустановленный размер устройства на панели свойств справа. Это поместит новый фрейм на ваш холст с точными размерами любого устройства, которое вы выбрали.
  2. Выбрав инструмент «Фрейм», кликните и перетащите, чтобы создать новый фрейм любого размера.
  3. Подобно группированию, вы можете выбрать существующие элементы на холсте и поместить их во фрейм, нажав: ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).

  Если вы хотите сделать наоборот и удалить контейнер родительского фрейма, сочетание клавиш будет таким же, как и при разгруппировке: ⌘ + Shift + G (Mac) или Ctrl + Shift + G (Win). Теперь давайте углубимся в уникальные возможности и варианты использования фреймов.

  Размеры фреймов

  Размеры фреймов устанавливаются независимо от их дочерних элементов. Если вы перемещаете или масштабируете дочерние элементы внутри фрейма, его границы не будут автоматически корректироваться. Если вы хотите, чтобы размеры фрейма подстраивались под содержимое, вы можете нажать кнопку «Resize to Fit» на панели свойств справа.

  Границы фрейма не подстраиваются автоматически под содержимое. Если вам нужно сделать это, выберите параметр «Resize to Fit» на панели свойств

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

  Изменение размера с ограничениями

  При изменении размера фреймы и группы ведут себя по-разному. Как уже упоминалось ранее, размер групп будет изменяться подобно векторным изображениям. Размеры фрейма будут изменены независимо от дочерних элементов. Однако, вы можете задать ограничения, которые влияют на изменение размера этих дочерних элементов относительно их родительского фрейма. По умолчанию эти ограничения установлены на «Top» и «Left».

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

  Совет: если вы хотите игнорировать ограничения при изменении размера фрейма, удерживайте клавишу ⌘ (Mac) или Ctrl (Win) при перетаскивании фрейма

  Контент, выходящий за границу фрейма

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

  • Скрытие контента за пределами границ: Функция «clip content» (обрезать контент) позволяет скрыть любую часть элемента, выходящую за пределы фрейма.
  • Отображение содержимого за пределами границ: Отключая функцию «clip content», вы можете включить отображение элементов, выходящих за границы ваших фреймов. Например, если вы хотите создать фрейм, содержащий цитату с кавычкой, вы можете изменить размер фрейма так, чтобы его границы были выровнены по левому краю текстового поля, оставляя кавычку за пределами фрейма. В подобных ситуациях, так гораздо проще выровнять объекты в вашем дизайне.
  • Раскрытие дополнительного контента: Установив надлежащие ограничения и включив «clip content», вы сможете создавать фреймы и компоненты, которые раскрывают больше контента при расширении. Например, у вас есть выпадающее меню, которое используется в разных местах с различным количеством опций. Это дает вам простой способ показать больше пунктов меню, всего лишь изменив размер фрейма.
  • Контент, выходящий за границу фрейма, в прототипе: Элементы, которые выходят за границы фрейма, можно настроить для прокрутки внутри прототипа. Например, вы используете фрейм для размещения прокручиваемой карусели. Вы можете настроить поведение выхода за границу таким образом, чтобы его можно было прокручивать при просмотре в режиме прототипа.

  Сетки

  Сетки макетов (Layout grids) являются уникальной функцией фреймов и могут применяться к любому фрейму или компоненту в вашем дизайне. Это действительно полезно, потому что иногда вы хотите, чтобы области вашего дизайна имели свои собственные независимые сетки. Ограничения изменения размера в Figma также могут работать в сочетании с сетками макетов. В приведенном ниже примере вы можете видеть, что на верхнем уровне есть сетка из 2 столбцов и вложенный вторичный фрейм для панели вкладок, который имеет собственную сетку из 3 столбцов. При установке ограничений, когда размер фрейма верхнего уровня изменяется, дочерние элементы изменяют размер относительно сетки макета.

  Вывод

  Вы можете по-разному использовать группы и фреймы (вместе или по отдельности) для достижения различных результатов.

  Коротко о главном. Используйте группы, если:

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

  Коротко о главном. Используйте фреймы, если:

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

  Подробнее об использовании фреймов и групп читайте в нашей статье.

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

  Похожие публикации:

  1. Rise of kingdoms как отвязать аккаунт
  2. Как озвучить текст в ворде
  3. Как сделать экспликацию в ревите
  4. Как удалить vipnet client полностью windows 10