6. Сетка и отступы в Figma (Фигма). Разработка StyleGuide/UI-Kit для веб-дизайна.
Вставка
- Опубліковано 6 лют 2025
- Продолжаю разработку StyleGuide/UI-Kit для веб-дизайна. Показываю как работает сетка и отступы на макетах в Figma (Фигма). На примере показываю как разработать сетку и добавить ее в стили в Фигме. Показываю и подробно объясняю про свою систему отступов 🔥
✅ Плейлист по разработке StyleGuide/UI-Kit • Style Guide / Ui-kit
👉 Смотрите видео до конца, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
►Мой StyleGuide/Ui-kit в Figma Community: cutt.ly/HWcW3Tm
►Instagram - cutt.ly/jWcQ3Mk
Добавляйтесь в друзья:
★ Facebook - cutt.ly/nWcWecJ
★ Вконтакте - cutt.ly/5WcWu2W
★ Linkedin - cutt.ly/DWcWb5q
Вступайте в сообщества:
★ Полезные публикации о дизайне Вконтакте - cutt.ly/0WcEtXP
★ Telegram канал t.me/joinchat/...
★ Telegram чат: t.me/joinchat/...
Мои работы:
★ Dribbble: cutt.ly/1WcEx6E
★ Behance: cutt.ly/UWcEW0I
#figma #webdesign #uxui #uikit
Напишите, чтобы хотели узнать про дизайн не связанное с фигмой и гайдом? Хочу снять говорящую голову))))
Расскажите пожалуйста про тренды)
Спасибо большое за Ваш труд! Вы очень структурировано, логично и понятно подаёте информацию! А это редкость среди людей занимающихся аналогичной деятельностью.
Спасибо, очень рада, что вам все понятно! Успехов в обучении 🍀
@@ValeriyaDesire Благодарю 😌
Супер! Отличная проработка деталей. Очень понравилась идея с визуальным оформлением отступов👍
Почему я раньше не видела ваше видео, это шедевр! Спасибо❤
Валерия, очень крутой контент. Вы показываете систему и как с ней работать. Ваш канал - не просто про то, как сделать визуально кнопку, но и как эта кнопка работает в системе и по каким правилам. Нашла вас по этому видео и сразу подписалась)
Огромное спасибо. Посмотрела, сохранила как шпаргалку. Супер понятным языком и для визуалов 😊
У вас такой приятный и успокаивающий голос 🫂
Я так часто это слышу. Спасибо ☺️
Валерия ооочень круто, и для меня сейчас очень в тему)) Благодарю
То что я искал. Спасибо)
Доброго времени суток. Огромное спасибо за это видео. Первое внятное объяснение по сеткам и стайл гайду, которое мне попалось. Я новичёк в вебе (только учусь), скажите, в каких случаях для десктопа применяется сетка стрейч, и применяется ли вообще. И обязательно ли ширина контейнера должна быть 1200px?
Офигенский контент! Спасибо огромное!!!
Спасибо Валерия!
Валерия, спасибо огромное!
Здравствуйте, интересно было бы узнать какую дают работу новичкам в студии? Как организована работа ? Есть ли ментор ?
очень полезный ролик, спасибо!
В целом интересен ваш опыт и к чему стремитесь в продуктовом дизайне. Интересно узнать на чем больше фокусируетесь на веб или апликейшн?
Поправочка - значения не в пикселях измеряется, а в поинтах (1 поинт может скейлится в 2,4,8 раз) из-за высокой плотности пискселя
ваяяяя шик
А почему в десктопе ширина колонки именно 78???
Можно ли текст разместить в узких колонках, как в газете? Чтобы при заполнении высоты последующий текст (или другое содержимое) автоматически располагался в следующей колонке?
В данном примере показаны только вертикальные отступы, жаль не показали горизонтальные отступы - как именно лучше показывать в дизайн системе
А можно объяснить для тех кто в танке - зачем нужна клеточная сетка для смартфонов? И в каких случаях она вообще нужна? Я например пользуюсь только колонками
У вас тоже в strech сетке получается не одинаковая ширина колонок?
Спасибо, очень полезное видео! Хотела узнать про отступы. Сколько нужно от заголовка до подзаголовка?
Заголовки бывают разного уровня и разного размера, а так же у них может быть разная высота строки. И еще от шрифта зависит. Я когда только начинала, смотрела отступы на других сайтах сравнивала.
Добрый день! Все круто. Только не понял почему сетку для Desktop нельзя тоже Stretch сделать?
На самом деле все зависит от проекта, в некоторых случаях контент у десктопа адаптируется под экран и может растягиваться. Но чаше всего контентная область 1200-1170. И на разных экранах контент будет выглядеть одинаково корректно.
привет, от себя добавлю ещё такой момент... правильнее будет писать разрешения не 320-640, 640-1280 и т.д., а 320-639, 640-1279 и т.д. либо, скорее так 320-640, 641-1280 и т.д. (в зависимости от того, какие именно брейкпоинты подразумеваются) иначе, если взять, к примеру, экран в 640px, то какой из макетов использовать, если и первый и второй соответствует критерию ширины в 640?
Хорошее замечание, надо будет поправить в ui kit 👍 И думаю стартовать можно уже с экрана 360. Давно на 320 ни чего не разрабатывала.
Валерия, спасибо за видео. Объясните, пожалуйста, почему в десктопной версии мы ставим значение center, а в планшете и мобильной версии - stretch? Всегда использовала stretch, мне казалось это очень удобно. Столько видео пересмотрела на эту тему, и все равно не понимаю...))
В мобилке и планшете контентная область может растягиваться, а в десктопе нет. К примеру мы берём фрейм 1920 и делаем сетку с контентной областью 1200, если мы изменим ширину фрейма в большую или меньшую сторону наша сетка должна остаться с контентной областью 1200, чтобы наш контент оставался точно в этих границах. В мобилках же наоборот контент может растягиваться от размера 320 до 578 например.
В десктопе бывают исключения, если мы делаем сайт на всю ширину фрейма не задавая сетку, но это бывает очень редко.
@@ValeriyaDesire Благодарю в очередной раз! 🌸
Спасибо за полезный контент!) Подскажите, набор иконок в вашем файле можно бесплатно и со спокойной душой использовать в своих проектах?)
Пожалуйста, да иконки можно использовать.
Необходимо ли учитывать заданное межстрочные расстояния в тексте при вставке фигуры для отступов?
Например кегель подзаголовок 24, кегель параграфа 15 межстрочное расстояние параграфа 24, необходим отступ от подзаголовка до параграфа 40 пик. Вопрос - фигура должна быть по высоте 40 или на порядок меньше с учетом межстрочного расстояния в параграфе 24 пик?
Добрый вечер!)
А подскажите, пожалуйста, в реальном макете вы делаете отступы за счёт auto layout? Или просто смотрите через alt какое расстояние между объектами?
В реальном макете у меня было только один раз и то проект был на поддержке и там было уже так заведено, но я скажу, что это не всегда удобно. Вообще когда я разрабатываю, придерживаюсь правил отступов и они всегда у меня в голове, отступы автолейаутами для всего макета я не делаю. Надеюсь ответила на вопрос)
16:20 Отступ 16 px от H1 до базового текста в реальных величинах больше, чем от базового текста до кнопки (24px). Можете взять rectangl и померять. Посмотрите как работают фреймы. Текст должен ровняться относительно x-height, а не от фрейма. Да ужж)
Добрый день, скажите, пожалуйста, в реальном макете вы тоже измеряете и задаёте отступы "прямоугольниками"? Или как это происходит?
Это просто правила отступов в дизайн системе. В реальном макете я не использую прямоугольники для отступов. Я просто использую эти правила.
Вы упоминали, что выигрывали в конкурсах на бирже фриланса, вы можете выделить основные критерии , которые позволят приблизиться к победе ?)
Бралась за работы, в которых более менее была уверена в своих силах, просила заказчика дать обратную связь по работе и вносила правки. Очень ответственно относилась к работе. Обычно, когда работа конкурсная и бесплатная, к ней относятся не очень серьезно и это очень большая ошибка.
дон готов 🤡
Всё, Дон Прошу, начините наконец учить английский! Это стыд и позор какой-то
😂. Дизайн