6. Сетка и отступы в Figma (Фигма). Разработка StyleGuide/UI-Kit для веб-дизайна.
HTML-код
- Опубликовано: 17 окт 2024
- Продолжаю разработку 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
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
Напишите, чтобы хотели узнать про дизайн не связанное с фигмой и гайдом? Хочу снять говорящую голову))))
Расскажите пожалуйста про тренды)
Почему я раньше не видела ваше видео, это шедевр! Спасибо❤
Спасибо большое за Ваш труд! Вы очень структурировано, логично и понятно подаёте информацию! А это редкость среди людей занимающихся аналогичной деятельностью.
Спасибо, очень рада, что вам все понятно! Успехов в обучении 🍀
@@ValeriyaDesire Благодарю 😌
Супер! Отличная проработка деталей. Очень понравилась идея с визуальным оформлением отступов👍
То что я искал. Спасибо)
Огромное спасибо. Посмотрела, сохранила как шпаргалку. Супер понятным языком и для визуалов 😊
Валерия, очень крутой контент. Вы показываете систему и как с ней работать. Ваш канал - не просто про то, как сделать визуально кнопку, но и как эта кнопка работает в системе и по каким правилам. Нашла вас по этому видео и сразу подписалась)
Валерия ооочень круто, и для меня сейчас очень в тему)) Благодарю
Доброго времени суток. Огромное спасибо за это видео. Первое внятное объяснение по сеткам и стайл гайду, которое мне попалось. Я новичёк в вебе (только учусь), скажите, в каких случаях для десктопа применяется сетка стрейч, и применяется ли вообще. И обязательно ли ширина контейнера должна быть 1200px?
Здравствуйте, интересно было бы узнать какую дают работу новичкам в студии? Как организована работа ? Есть ли ментор ?
У вас такой приятный и успокаивающий голос 🫂
Я так часто это слышу. Спасибо ☺️
очень полезный ролик, спасибо!
Офигенский контент! Спасибо огромное!!!
Спасибо Валерия!
Валерия, спасибо огромное!
В целом интересен ваш опыт и к чему стремитесь в продуктовом дизайне. Интересно узнать на чем больше фокусируетесь на веб или апликейшн?
Можно ли текст разместить в узких колонках, как в газете? Чтобы при заполнении высоты последующий текст (или другое содержимое) автоматически располагался в следующей колонке?
привет, от себя добавлю ещё такой момент... правильнее будет писать разрешения не 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 Благодарю в очередной раз! 🌸
Спасибо за полезный контент!) Подскажите, набор иконок в вашем файле можно бесплатно и со спокойной душой использовать в своих проектах?)
Пожалуйста, да иконки можно использовать.
Поправочка - значения не в пикселях измеряется, а в поинтах (1 поинт может скейлится в 2,4,8 раз) из-за высокой плотности пискселя
Добрый день! Все круто. Только не понял почему сетку для Desktop нельзя тоже Stretch сделать?
На самом деле все зависит от проекта, в некоторых случаях контент у десктопа адаптируется под экран и может растягиваться. Но чаше всего контентная область 1200-1170. И на разных экранах контент будет выглядеть одинаково корректно.
Добрый вечер!)
А подскажите, пожалуйста, в реальном макете вы делаете отступы за счёт auto layout? Или просто смотрите через alt какое расстояние между объектами?
В реальном макете у меня было только один раз и то проект был на поддержке и там было уже так заведено, но я скажу, что это не всегда удобно. Вообще когда я разрабатываю, придерживаюсь правил отступов и они всегда у меня в голове, отступы автолейаутами для всего макета я не делаю. Надеюсь ответила на вопрос)
Необходимо ли учитывать заданное межстрочные расстояния в тексте при вставке фигуры для отступов?
Например кегель подзаголовок 24, кегель параграфа 15 межстрочное расстояние параграфа 24, необходим отступ от подзаголовка до параграфа 40 пик. Вопрос - фигура должна быть по высоте 40 или на порядок меньше с учетом межстрочного расстояния в параграфе 24 пик?
А можно объяснить для тех кто в танке - зачем нужна клеточная сетка для смартфонов? И в каких случаях она вообще нужна? Я например пользуюсь только колонками
У вас тоже в strech сетке получается не одинаковая ширина колонок?
А почему в десктопе ширина колонки именно 78???
Добрый день, скажите, пожалуйста, в реальном макете вы тоже измеряете и задаёте отступы "прямоугольниками"? Или как это происходит?
Это просто правила отступов в дизайн системе. В реальном макете я не использую прямоугольники для отступов. Я просто использую эти правила.
Спасибо, очень полезное видео! Хотела узнать про отступы. Сколько нужно от заголовка до подзаголовка?
Заголовки бывают разного уровня и разного размера, а так же у них может быть разная высота строки. И еще от шрифта зависит. Я когда только начинала, смотрела отступы на других сайтах сравнивала.
В данном примере показаны только вертикальные отступы, жаль не показали горизонтальные отступы - как именно лучше показывать в дизайн системе
ваяяяя шик
Вы упоминали, что выигрывали в конкурсах на бирже фриланса, вы можете выделить основные критерии , которые позволят приблизиться к победе ?)
Бралась за работы, в которых более менее была уверена в своих силах, просила заказчика дать обратную связь по работе и вносила правки. Очень ответственно относилась к работе. Обычно, когда работа конкурсная и бесплатная, к ней относятся не очень серьезно и это очень большая ошибка.
16:20 Отступ 16 px от H1 до базового текста в реальных величинах больше, чем от базового текста до кнопки (24px). Можете взять rectangl и померять. Посмотрите как работают фреймы. Текст должен ровняться относительно x-height, а не от фрейма. Да ужж)
дон готов 🤡
😂. Дизайн