Что такое фрейм в дизайне
Frame в Figma — подробный разбор инструмента
Инструмент Frame в Figma. Детальный разбор возможностей в программе Figma. Урок в видео и текстовом формате. Как сделать и как использовать.
Как использовать Frame в Figma? Если вы начинающий пользователь программы, то этот урок откроет вам все секреты этого инструмента.
Что такое Frame в Figma и с чем его едят?
Frame— это рабочая область, где будут размещаться элементы интерфейса, дизайна сайта или мобильного приложения.
Как сделать фрейм в фигме?
Чтобы создать Frame в программе Figma выберите иконку слева и сверху в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A».
Почему 2 горячих клавиши, а не одна? Это связано с тем, что существует программа Sketch. Там есть аналог фреймов, которые называются «Артборды». Чтобы в скетче создать артборд нужно нажать на клавишу «А». Поскольку скетч — это главный конкурент фигмы, чтобы облегчить работу тем, кто переходит на фигму со скетча, разработчики решили сделать привычное для этих людей сокращение.
Если не тянуть мышкой и просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100px.
Если вы будете тянуть, то можно создать произвольный размер.
Популярные размеры фреймов в Figma и шаблоны различных устройств
В правой панеле представлены популярные размеры фреймов (активно при выборе инструмента фрейм):
Выбираем другое разрешение фрейма из списка
Если выбрать фрейм, то можно изменить его выбрав в выпадающем списке справа другое разрешение либо изменить его на группу.
Чтобы изменить шаблон можно нажать на эту область и выбрать другое разрешение либо сделать из фрейма группу. Изменение «Frame» на «Group» или выбор других размеров из шаблонов. Группа позволяет объединять несколько элементов, но в отличие от фрейма в группе меньше возможностей и нет некоторых функций.
Меняем размер по умному. Как уменьшить или увеличить Frame в Figma?
Чтобы уменьшить, обрезать фрейм или увеличить фрейм, просто наведите курсор на край и потяните в сторону. Также вы можете использовать горячие клавиши, чтобы активировать дополнительные функции.
Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.
Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.
Иконка со стрелками позволяет подогнать размеры фрейма под содержимое которое есть внутри фрейма. Например возьмем график, и нажимаем на эту иконку. Размеры будут подогнаны под содержимое.
Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.
Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.
Изменение угла наклона и скругление углов
Чтобы скруглить углы у фрейма (сделать его круглым), смотрите в правую панель. Сверху есть иконка скругления углов и иконка изменения размеров наклона угла. Также если нажать на самую правую иконку, то будет возможность скруглять любые углы отдельно.
Функция Clip content — что это?
Clip content позволяет обрезать содержимое фреймов. Например на первом изображении сверху эта галочка отключена, а на втором включена.
Как превратить фрейм в Auto Layout?
Если выбрать фрейм, то в правой панели будет надпись Auto Layout.
Если внутри фрейма будет например 3 прямоугольника, после этого вы нажмете на плюсик, то появятся дополнительные возможности.
При нажатии иконки стрелки справа, контент автоматически перестроиться. Элементы будут располагаться горизонтально.
Если выделить какой то элемент внутри Auto Layout и нажать на комбинацию клавиш «Ctrl» «D», то контент дублируется и все автоматически будет перестраиваться.
Подробнее о возможностях Auto Layout поговорим в отдельном уроке.
Сетки во фреймах
Чтобы создать сетку нажмите напротив надписи «Grids» на плюс.
После этого можно выбрать отображение сетки (Grid, column, row).
Изменение цвета фрейма и создание обводки
Чтобы изменить цвет фрейма выделите его и измените цвет, как показано на рисунке выше.
Для создания обводки нажмите плюс напротив надписи Stroke
Как сохранить фрейм из Figma в PNG, JPG, SVG, PDF
Чтобы экспортировать фреймы из фигмы и сохранить их к себе на компьютер, выберите фрейм нажмите на плюс напротив надписи «Export» в правой панели, выберите нужный вам формат для экспорта (PNG, JPG, SVG, PDF) и нажмите на кнопку «Export». Перед этим можно сделать предварительный просмотр нажав на вкладку «Prewie».
Чтобы изменить размер при экспорте, нужно выбрать из списка 1х другое значение. Если выбрано 1х, то экспорт будет один к одному. Если выбрать 2х, то масштаб при экспорте будет в 2 раза больше. Например если поставить 2х и размер фрейма 300px на 300px, то сохраненное изображение будет размером 600px на 600px.
Привязки элементов во фрейме.
Все элементы во фрейме имеют привязки. Их можно изменять справа в панеле, внизу надписи Constraints. По умолчанию привязка идет к левому верхнему углу. При изменении размера фрейма элементы будут закреплены там.
Закрепление элементов внутри фрейма при скроллинге
Елси выбрать какой-то элемент. Например меню (как на скриншоте выше), а затем поставить галочку напротив надписи «Fix position when scrolling», то этот элемент при прокрутке в режиме презентации будет закреплен.
Горячие клавиши при работе с фреймами в фигме
Как удалить фрейм в фигме
Если вам потребовалось удалить фрейм в фигме, просто нажмите клавишу «Backspace» на клавиатуре. Это позволит его убрать из вашего проекта.
2 способа как скопировать фрейм в фигме
Как объединить Frame в Figma
Есть несколько способов объединить фреймы или элементы во фрейм. Выделите нужные вам фреймы и нажмите на клавиши «Ctrl» «G», либо на правую клавишу мыши и выберите пункт «Group selection». Это позволит объединить их с помощью инструмента «Группа».
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Пример: Структура HTML-документа с фреймами
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
Границы или пространство между фреймами
В следующем примере убираем границу между фреймами:
Фреймы в HTML
Разница между Frames и Iframes
При использовании frameset вы разделяете видимую часть окна браузера на несколько фреймов. Каждый фрейм имеет собственное содержимое, которое не затрагивает содержимое следующего. Frames и Iframes выполняют аналогичную функцию — встраивают ресурс в веб-страницу, но они принципиально отличаются друг от друга:
История и будущее фреймов
Проблемы с фреймами
В данный момент в веб-разработке прослеживается глобальная тенденция разделения содержимого веб-страницы от ее представления:
Будущее фреймов
Как сделать фреймы в HTML
В разработке новых сайтов фреймы использоваться не должны, но для веб-мастеров, которые занимаются поддержкой старых ресурсов, умение применять их может оказаться полезным.
Основная концепция фреймов
Основная концепция фреймов довольно проста:
Создание вертикальных столбцов
А вот как эта разметка будет отображаться:
Создание горизонтальных строк
Внеся это изменение, мы сделали так, что фреймы теперь загружаются в четыре ряда, друг над другом:
Объединение столбцов и строк
Фрейм в HTML пример:
Вложенный frameset располагается внутри родительского элемента, первого фрейма. Вложенный элемент может быть размещен в любом месте. Например, если мы хотим, чтобы вложенный элемент размещался в центре, то просто переставляем элементы следующим образом:
Вот, как теперь будут отображаться фреймы:
Можно создать другие вложенные фреймы:
Этот код создает набор из двух одинаковых по размеру столбцов. Затем мы разделили второй столбец на две строки. И, наконец, мы разделили вторую строку на две колонки. Вот, как это будет выглядеть:
Другой способ создать комбинацию строк и столбцов — определить сетку столбцов и строк в одном фрейме. Например, если вы хотите создать сетку из четырех фреймов одинакового размера, можно использовать следующий код:
Полученная сетка строк и столбцов будет выглядеть следующим образом:
Как задавать стили для фреймов
Определение стилей фреймов в исходном документе
Определение стилей и форматирование frameset
Как повлиять на представление frameset помимо определения стилей самих документов:
Определение размеров фреймов
Мы создадим следующий макет:
Мы можем создать фрейм HTML с помощью следующего кода:
Этот код создает frameset из двух рядов:
Но посетитель сайта сможет вручную изменить их размеры.
Этот код создает веб-страницу, отображаемую следующим образом:
Форматирование рамки и отступов вокруг фрейма
Теперь, когда мы определили макет, если нам нужно, мы можем увеличить или уменьшить отступы между фреймами, а также удалить рамку между ними. Используя макет, который мы создали в предыдущем пункте, давайте удалим рамки между тремя столбцами, но оставим рамку между верхними и нижними рядами. Давайте также добавим отступ вокруг содержимого первого фрейма HTML :
Указание фреймов с помощью ссылок
Одним из наиболее распространенных случаев использования фреймов является создание во фрейме « прилипающего » меню навигации, которое всегда видно независимо от положения содержимого других фреймов. При правильном применении, ссылки в меню навигации приводят к загрузке новых ресурсов во фрейме, в то время как остальные фреймы остаются статическими.
Можно отформатировать анкоры для указания конкретных фреймов через присвоение нужному элементу frame атрибута name и использование атрибута target внутри элемента a для загрузки href в указанном фрейме. Если все это немного сбивает вас с толку, давайте разберем процесс создания фреймов в HTML шаг за шагом.
Первым делом нам нужно присвоить name для фрейма, в котором должны открываться ссылки. В разметке, которую мы создали чуть ранее, можно использовать левый столбец для меню навигации, а центральный столбец в качестве целевого фрейма. Для этого нужно присвоить атрибут name целевому элементу:
Предоставление резервного варианта noframes
Как сделать фреймы адаптивными
При применении фреймов довольно сложно обеспечить удобство использования для посетителей, заходящих на сайт со смартфонов и небольших планшетов. Так как фреймы были полностью удалены из HTML5 и считаются устаревшими, важно, чтобы владельцы сайтов, созданных с использованием фреймов, запланировали перестройку своих ресурсов и переход на другие технологии.
Использование строк, а не столбцов
Используйте проценты для ширины столбцов
Когда размеры столбцов задаются в процентах, а не в пикселях, они будут автоматически изменяться в зависимости от размера экрана устройства. Хотя это может создать определенные проблемы, связанные с тем, что некоторые фреймы могут стать слишком маленькими, но в целом опыт взаимодействия и просмотра будет лучше, если общая ширина столбцов задается в процентах, а не в пикселях.
Как перейти с фреймов на другие технологии
Оценка контента, содержащегося во фреймах
Стратегия для вашего нового сайта
Переход на CMS на начальном этапе потребует больше времени, но в долгосрочной перспективе преимущества от запуска современного сайта перевесят краткосрочные сложности. Чтобы помочь вам определиться с системой управления контентом, рекомендуем обратить внимание на три самые популярные из них:
Дополнительные ресурсы
Если вы хотите узнать о фреймах HTML больше, лучшим источником для получения дополнительной информации является World Wide Web Consortium ( W3C ). Вот некоторые из страниц с информацией о фреймах:
Связанные элементы
width
bordercolor
bordercolor
Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, подписки, дизлайки, отклики!
Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!
Основы Figma III. Фреймы. Сетки. Направляющие. Компоненты
В третьей части по основам Figma научимся работать с фреймами (артбордами), страницами и файлами, чтобы не заблудиться в структуре большого проекта. Посмотрим, насколько мощные возможности таит в себе фрейм, как сетки и колонки помогают распределить объекты и выставить отступы. Научимся пользоваться направляющими. Впервые познакомимся с ограничителями (constraints) и бегло взглянем на компоненты.
Вам больше не будут страшны большие проекты, вы сможете легко структурировать любой файл и быстро перемещаться по его частям.
Фреймы. Сравнение с группами
Фреймы в другим программах называются артбордами (artboard). Но в Figma пошли своим путем и придумали уникальное название. И вполне резонно, так как фреймы обладают большими возможностями и гибкостью, чем артборды, например, в Sketch невозможно поместить один артборд внутри другого.
Frame с английского переводится, как рамка, каркас, скелет. Если упростить, то фреймы можно сравнить с холстом художника или рабочей областью. Обычно фрейм (артборд) содержит дизайн одной страницы в определенном размере. Например, дизайнер может разместить рядом несколько фреймов с одной и той же страницей для экрана ноутбука, планшета и смартфона.
В прошлых урокам, рисуя целые страницы мы по незнанию использовали группы вместо фреймов. Давайте исправим это упущение, теперь работая с дизайном страницы/экрана будем помещать все элементы внутри фрейма.
Группы позволяют объединять примитивы и создавать логические единицы внутри фрейма, значительно облегчая работу с проектом. Фреймы похожи на группы, но обладают рядом уникальных возможностей:
Создание фрейма. Изменяем размер и заливку
Процесс создания фрейма ничем не отличается от прямоугольника, кроме того, что вам нужно выбрать инструмент с изображением решетки или нажать F. Далее зажимаем левую кнопку на рабочей области и тянем мышь. Отпускаем левую кнопку мыши, чтобы задать размеры.
Далее самое интересное. В правой панели, подобно прямоугольнику уже будет задан цвет заливки фона (раздел Fill). Вы можете изменять размер фрейма старыми способами, потянув за край или задав точный размер в полях W (Width) и H (Height). Но теперь у нас есть новое выпадающие меню с шаблонами размеров в левом верхнем углу панели свойств – Frame. Просмотрите, какие шаблоны там есть и попробуйте применить хотя бы несколько из них.
Как поместить объекты внутрь фрейма
Есть несколько простых способов:
После этих манипуляций объекты окажутся внутри фрейма, что будет видно по панели слоев, ведь вставленные объекты будут отображаться со смещением (как и в группах). Попробуйте выделить объект внутри фрейма, обратите внимание на значение координат X и Y – они изменились, ведь теперь левый верхний угол фрейма – это новое начало координат.
Простая маска – обрезаем содержимое фрейма
Используя опцию Clip content в панели свойств, можно обрезать содержимое по прямоугольной границе, которая зависит от ширины (параметр W – Width) и высоты фрейма (параметр H – height). Подобный прием называется маской. Таким образом можно скрыть часть объектов используя форму другого объекта, в нашем случае это фрейм и прямоугольная форма. Вот вам аналогия: вырезав квадратное отверстие в бумаге и наложив ее на фотографию вы получите аналог маски в реальном мире.
Добавление сетки
Фреймы позволяют отображать вспомогательные сетки, которые можно гибко настраивать для облегчения выравнивания и позиционирования объектов. Для этого:
Сетку можно использовать в качестве помощника для отрисовки форм, баннеров, иллюстраций. Ее главная прелесть заключается в том, что при перемещении объектов они как бы «приклеиваются» к линиям сетки, тем самым помогая вам установить объект в нужной позиции. С масштабированием такая же история – границы объекта прилипают к направляющим сетки.
В целом сетки используются достаточно редко. А вот колонки, о которых пойдет речь дальше – постоянно.
Добавление колонок и рядов
Вертикальные колонки очень часто используются в дизайне веб-страницы. Их настройка немного сложнее сетки:
В выпадающем меню выбираем Columns. Сразу после этого кроме цвета и прозрачности появится ряд новых параметров:
Давайте настроим одну популярную сетку из фреймворка Bootstrap, которую часто используют разработчики при верстке веб-страниц. Для этого нам понадобится фрейм шириной в 1440 пикселей и высотой в 900 пикселей, что соответствует размерам экрана типичного ноутбука. Сама сетка в ширину составляет 1140 пикселей и состоит из 12 колонок. Ширина каждой колонки – 65 пикселей, а расстояние между ними – 30 пикселей.
Подобно сетке объекты будут прилипать к границам колонки, что очень удобно для быстрого выстраивания примитивов в одну линию и их выравнивания в блоках.
Кроме колонок существует возможность задавать ряды. Для этого достаточно выбрать Rows в выпадающем меню. Все параметры идентичны колонкам, лишь Width (ширина) заменена на Height (высоту). Мне не приходилось использовать этот вид сетки, но возможно в редких случаях он может быть полезен.
Направляющие и линейка
Всевозможные виды сеток прилично облегчают работу дизайнера, но существует еще более полезный инструмент – направляющие. Это вертикальная или горизонтальная линия, которую дизайнер может выставить в произвольном месте. Таких линий может быть много и вы можете воссоздать любую сетку используя лишь направляющие. К этим линиям будут прилипать объекты, как и к сеткам. Чтобы создать направляющую:
Чтобы изменить положение направляющей, перетащите ее в новую позицию.
Чтобы удалить направляющую, нужно ее выделить, кликнув по ней. Выделенная линия закрасится в синий цвет. Далее нажимаем кнопку Delete на клавиатуре. Также можно просто перетащить направляющую на область линейки и она тоже будет удалена.
Чтобы временно скрыть все направляющие скройте линейку с помощью клавиш Shift + R.
А теперь важный момент. Как вы помните из предыдущего урока, предварительно выделив любой объект и зажав кнопку Option в MacOs или Alt в Windows, можно увидеть точное расстояние в пикселях, подведя курсор к другому объекту. Так вот, этот же прием работает и для направляющих, что бывает очень кстати. Давайте посмотрим, как это выглядит на практике (приклеивание объектов к направляющим и подсказки о расстоянии до направляющих):
Примеры использования фреймов
На этом перечень возможностей фреймов не заканчивается, но прежде чем продолжить, давайте посмотрим несколько типичных примеров их использования. Итак, фреймы часто используются, как контейнеры для:
Поведение содержания фрейма при изменении размера
Если объект находится внутри фрейма, то вы можете указать, как ему себя вести при изменении размеров фрейма. Эта возможность называется constraint (читается констрэйнт), что переводится, как ограничитель. Он задает, поведение при изменении размера фрейма:
Будет проще понять на примере. Посмотрите на два квадрата внизу. Экземпляр слева помещен в фрейм. Экземпляр справа находится в группе вместе с бежевым прямоугольником, который служит фоном. Попробуем поочередно изменить размер фрейма и группы. Обратите внимание, что слева квадрат сохраняет размер и приклеивается к нижней стороне фрейма, в соответствии с выбранным ограничением. При выделении появляются пунктирные линии, которые указывают какие ограничители активны. Справа при выделении квадрата никаких вспомогательных линий не показывается, все составляющие части группы растягиваются.
Возникает резонный вопрос: зачем эта возможность нужна? Ведь можно сделать несколько фреймов различных размеров экранов для одной и той же страницы и таким образом показать, как будет вести себя содержимое. Польза этой функции проявляется при использовании компонентов.
Первое знакомство с компонентами
Компоненты – это специальный вид объектов, которые создаются на основе фреймов для построения часто используемых элементов интерфейса. Звучит сложно, но по сути с помощью компонентов создают шаблоны кнопок, выпадающих меню, навигации и прочего. Чтобы в дальнейшем не рисовать каждый раз, к примеру, кнопку, вы копируете компонент кнопки, выставляете нужный размер и цвет, меняете текст – готово! Наборы таких компонентов в терминологии Figma называются библиотекой компонентов. А у дизайнеров они называются UI Kit (читается юай кит).
Зачем же так все усложнять? На самом деле компоненты способны сэкономить десятки часов работы. Представьте себе ситуацию: у вас есть 50 экранов веб-приложения. На каждом из них есть кнопки. Вдруг вам прилетает правка «скруглить все кнопки». Если дизайн создавался с помощью компонентов, то вам будет достаточно изменить лишь родительский компонент (шаблон кнопки), а все остальные изменения произойдут автоматически. Если все делалось без компонентов, то вам прийдется вручную изменить каждую кнопку.
В этом и заключается вся мощь компонентов. А ограничители (Constraints) играют здесь одну из ключевых ролей.
Компонентам у нас будет посвящен отдельный урок, не стоит пугаться их сложности. Более того, у компонентов есть и другие особенности, которые мы будем постепенно затрагивать. Сейчас мы лишь подготавливаем фундамент для дальнейшей работы. А пока, чтобы понять пользу компонентов, посмотрите на пример ниже. Сверху находится компонент-родитель (шаблон), а внизу три компонента-ребенка, которые наследуют его свойства. В самом низу находится кнопка, сделанная на основе обычного фрейма. Изменяя родительский компонент, мы автоматически меняем всех «детей».
Как видите, нижняя кнопка осталась нетронутой, так как это просто фрейм, а не компонент. Надеюсь у вас уже сложилось первое впечатление о компонентах и их пользе в работе дизайнера.
Пока вы не умеете создавать компоненты, так как нужно сначала в полной мере понять, как работают ограничители внутри фрейма. Поэтому возвращаемся к ним.
Виды ограничителей (Constraints)
Давайте создадим несколько кнопок внутри фреймов с различными настройками ограничителей.Рассмотрим самые простые из них:
Я создала 9 фреймов (кнопок) со всеми возможными комбинациями вышеописанных ограничителей. Посмотрите, как ведут себя объекты внутри фреймов при масштабировании.
Существует еще несколько видов ограничителей:
Поэкспериментируйте с различными комбинациями ограничений и убедитесь, что вы понимаете, как они работают. Если остались вопросы, оставляйте комментарий или пишите в директ. Тема непроста для новичков.
Подгонка размера фрейма под содержимое
Если нужно обрезать фрейм строго по границам его объектов, то достаточно нажать соответствующую кнопку в панели свойств:
Изменяем ориентацию фрейма
Фрейм можно быстро выставить в портретную или альбомную ориентацию. Другими словами вы можете присвоить высоте фрейма значение ширины или наоборот:
Страницы и файлы
Кроме фреймов в Figma существуют структурные единицы и высшего порядка:
Все это время мы работали внутри единственной страницы одного файла. Чтобы создать новую страницу:
Теперь можно работать с новой страницей, переключиться на другую страницу, кликнув по названию или скрыть панель страниц, кликнув по названию выбранной страницы в верхнем правом углу левой панели. Кроме того, нажав правой кнопкой мыши по названию страницы можно:
Посмотрим, как выглядит работа со страницами на практике:
Чтобы создать новый файл, нужно:
Оказавшись на главном экране слева вы увидите список разделов:
Чтобы выбрать другой файл, достаточно назад перейти к списку файлов в раздел Drafts и выбрать интересующий файл в правой панели.
Организация страниц
Давайте посмотрим, из чего состоит типичный проект. В самом начале это единственная Page 1, но по мере разрастания появляются страницы с такими названиями:
У каждого дизайнера свои правила и привычки именования и структурирования страниц, строгих догм здесь нет. Я лишь показала, как это выглядит в некоторых случаях у меня. Другой пример: создают страницу UI с кучей экранов (фреймов) финального дизайна и UX – для всех вайрфреймов.
Иерархия проекта
Обычно хватает одного файла, но на больших проектах иногда по отдельным файлам распределяют дизайн по платформам. Например: Web, Mobile, Desktop. Иногда в отдельный файл выносят библиотеку компонентов, но учтите, что в таком случае вам понадобится платная подписка.
Для новичка будет достаточно одного файла на проект. С опытом в какой-то момент вы сами сообразите, что вам тесно и копание в десятках страниц отнимает уйму времени.
Домашнее задание
Чтобы проверить эту домашку мне понадобится доступ к файлу Figma с возможностью вносить правки, чтобы посмотреть на структуру фреймов и выставленные ограничители. Для этого убедитесь, что вы выбрали опцию can edit напротив Anyone with the link. Далее нажимаем на Copy link и присылаем мне в директ. Пожалуйста в дальнейшем все домашки присылайте с такими настройками. Если забыли, о том, как поделиться файлом писала в этом уроке.
Выводы
Теперь вы имеете представление о фреймах, ограничителях и даже немного о компонентах. Убедитесь, что вы отлично разбираетесь во всех темах этого урока. Чаще всего вам прийдется использовать направляющие и сетки.
Материал очень сложный, особенно, что касается компонентов и ограничителей. Перечитайте спустя несколько дней, потренируйтесь. Это не усваивается на 100% с первого раза. Следующие уроки будут покороче, но я постараюсь писать их чаще.