Блог

Как создать эффект стекла в Фигме

Раз уж я в своей работе перешла на Фигму, то буду иногда публиковать небольшие уроки по ней здесь в блоге. Думаю, многим будет интересно.  Без воды, простые понятные руководства.  И начну с простого урока, как легко создать эффект стекла в Фигме.

Эффект стекла в Фигме

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

Урок стекло в Фигме

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

Я создам квадрат 300х300px белого цвета.

Figma создание стекла

Добавим для этого слоя эффект Backgound Blur (размытие заднего фона).

Уроки Figma - размытие

Затем, нажав на «солнышко» выставим силу размытия на 15

Стекло в Фигме

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

Я добавлю мужичка под деревом на закате. Закат пока не видно )) Но это пока…

Figma уроки эффекты

А теперь самое интересное. Чтобы появился эффект матового или полупрозрачного стекла, в Фигме достаточно изменить прозрачность заливки цвета слоя.

Выделяем наш квадрат и Fill (заливку) уменьшим со 100%  до 10%

Figma glass effect

Главное не перепутать заливку с прозрачностью слоя.  Если вы уменьшите процент в поле Layer, то такого эффекта не получится.

Теперь можно поиграться с параметрами чтобы сделать стекло более матовым или наоборот…

Матовое стекло в Фигме

Дополнительные улучшения

Еще можем добавить немного реалистичности и объема. Скруглим углы у нашего квадрата. Я поставлю радиус 9.

Затем воспользуемся плагином Isometric. Уверена, что вы умеете искать и устанавливать плагины, поэтому этот момент объяснять не буду.

Запускаем плагин, выделяем наш квадрат и жмем любую из кнопок в окошке плагина.

Плагин изометрия в Фигме

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

Первый эффект вот с такими параметрами. Стекло приобретет объем.

Фигма эффекты

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

У меня в этот раз без особой идеи получилось вот так:

эффект стекла в фигме. Урок

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

Из photoshop в figma Мой переход
time

Мой переход из Photoshop в Figma

Привет. Сегодня хочу рассказать вам, почему я перешла из Photoshop в Figma.

Вступление

Не собиралась писать об этом… Во-первых, мне казалось не сильно важным, в чем веб-дизайнер отрисовывает макеты сайтов, главное чтоб не в CorelDraw ))

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

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

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

Привожу пример одного из таких писем:

Вопрос про Figma

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

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

Надеюсь, что эти вопросы для вас все еще актуальны. Так что поехали…

Почему веб-дизайнеры выбрали Photoshop

Основное предназначение Photoshop – работа с растровыми объектами. Это идеальный инструмент для обработки фотографий, создания сложных коллажей, реставрации изображений, рисования и т.д.

Да, в нем можно работать с вектором, сверстать брошюру и даже сделать интересную анимацию.  Но для верстки полиграфии логичнее использовать Adobe InDesign. Для разработки логотипов и векторных рисунков больше подойдет Adobe Illustrator. А для создания анимации – Adobe After Effects.

Получается что Photoshop – это такой супер комбайн для обработки фото, но с максимально расширенными функциями. Фотографию для сайта обработать можно? Можно. Формы и кнопки отрисовать – пожалуйста. С типографикой поработать – да без проблем.

Думаю именно поэтому веб-дизайнеры в свое время выбрали Фотошоп в качестве главного инструмента для создания дизайна сайтов. В нем было все, что нам требовалось.

Конечно, не хватало многих желаемых опций, некоторые функции были не такими удобными как хотелось бы… Но, до недавнего времени других предложений на рынке просто не существовало. А раз альтернатив нет – выбираем лучшее из предложенного.

Теперь о Фигме…

Фигма для верстальщика

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

Она удобна не только для дизайнеров. Макеты из Фигмы, верстать тоже гораздо приятнее, чем из psd файлов.

И вот список некоторых преимуществ:

  • В ней можно сразу посмотреть и скопировать CSS стиль любого объекта.
  • В макете Фигмы наглядно видны все размеры и расстояния до объектов.
  • Легко экспортировать элементы дизайна, иконки и др. в удобном формате.

Мой верстальщик без труда сверстал первый макет, хоть не был знаком с Фигмой ранее )) Я ему объяснила лишь ключевые моменты, а дальше он освоился сам. Теперь говорит, что возиться с тяжелыми psd больше не хочет.

Представьте, сколько файлов вы передаете на верстку, если делаете например дизайн интернет-магазина с адаптивом? 32 psd файла или больше? ))

При работе в Figma, у вас есть всего одна ссылка на проект. Это плюс облачного сервиса.

  • У верстальщика всегда есть доступ к актуальной версии.
  • Дополнительно можно оставлять комментарии к проекту в виде всплывающих подсказок.
  • Не надо придумывать названия для psd дубликатов макетов с правками, как на картинке ниже )
psd файлы имена

Фигма для дизайнера

На домашнем ПК я работаю в установленной программе. А на макбуке использую браузерную версию Фигмы. И это очень удобно.

Теперь, что касается непосредственно работы…

Дизайнеру, Фигма существенно экономит время. Многие вещи в ней делаются быстрее.

  • Выравнивание объектов.
  • Гибкие настройки модульных сеток.
  • Простая и быстрая работа с картинками без всяких смарт объектов.
  • Стили шрифтов и цветов.
  • И много чего еще…

Но конечно самый очевидный пример, о котором говорят все, перешедшие на Фигму – это компоненты.

Что делать, когда дизайн готов, но вдруг понадобилось поменять стиль кнопок на всем сайте?

В Photoshop придется открыть — изменить — пересохранить все кнопки во всех макетах. Потом все это переотправить разработчику.

В Фигме это делается намного быстрее. Просто меняете стиль у одного компонента и все. Вопрос решен.

И еще, совсем недавно в Фигму «подвезли» долгожданные плагины, об этом сейчас шумит все дизайн сообщество )

В общем, сплошное удовольствие.

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

Прошло время…  Фигма обогнала Sketch, все чаще я стала слышать от других дизайнеров, как она хороша в работе, и я решила попробовать снова. Посмотрела несколько видео по структуре организации макетов и по работе с компонентами. Решила что следующий проект, если он будет небольшой, попробую сделать в Фигме. Интернет магазин сразу бы наверное делать побоялась ))

Ну и так получилось, что все прошло хорошо. Сделала лендинг, привыкла к интерфейсу, перестала путаться в горячих клавишах. Если возникали какие-то вопросы, то заглядывала в pdf руководство (ссылку на него даю в конце статьи).

Меньше чем через неделю, я чувствовала себя уже очень комфортно. И с каждым проектом любовь к Фигме только растет.

Почему большинство все равно пользуются в основном фотошопом?

Есть такие люди консерваторы. Если к чему-то привыкли, то все. «Дуров, верни стену!»

Есть принципиальные. Все кричат, что Figma это круто, я не хочу быть как все, буду любить только Фотошоп.

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

Ну и кто-то наверное просто ленится.

Еще Figma на английском языке. Возможно некоторых отталкивает именно это…

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

Просто Фигма – это про разработку макетов сайтов и векторные элементы, про UI. Фотошоп – про обработку растровых объектов.

Сложно ли изучить Figma

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

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

Я уверена, если вы освоите Фигму, «дизайнить» сайты в Фотошопе вы больше не захотите.

Да, скорость работы сначала может немного упасть, но это пока вы не освоитесь, а сделать это можно очень быстро.

И удачи вам в переходе. Увидимся на другой стороне )

У меня все.

Что такое футер сайта или что писать в подвале

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

Что такое футер или подвал сайта

Футер сайта, это сленговое понятие среди русскоговорящих веб-мастеров и разработчиков. Как и многие другие, оно было заимствовано из английского языка. Слово «footer» – переводится как «нога, нижняя сноска или подвал». То есть – это самая нижняя часть сайта.

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

Что обычно пишут внизу сайта

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

Обратите внимание, на моем сайте подвал состоит из трех уровней:

так выглядит футер на моем сайте

Подвал первого уровня

В самой нижней части подавала обычно располагают:

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

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

Подвал второго уровня

Следующая часть подвала чуть более функциональна… Там могут располагаться технические ссылки.

К таким, я отношу ссылки на:

  • партнерскую программу
  • карту сайта
  • политику конфиденциальности
  • соглашение об обработке персональных данных

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

Подвал третьего уровня

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

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

И так…

Навигация

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

пример подвала сайта

Подвал сайта интернет магазина «Буквоед»

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

пример подвала сайта

Меню в подвале дублирует главное меню сайта

Карта

Адрес и полноценная карта проезда подойдет для сайтов малого и среднего бизнеса. Если вас сложно найти, расположите карту не только на отдельной странице, но и в подвале.

карта проезда в подвале сайта

Форма обратной связи или форма подписки

Если вы ведете рассылку, то форму подписки можно добавить в подвал.

пример подвала сайта с формой подписки

Футер магазина М-Видео

И даже при наличии на сайте полноценной страницы «Контакты», дополнительную форму для отправки сообщения часто спускают в подвал, чтобы она была доступна с любой страницы сайта.

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

Контакты компании

В подвале можно разместить не только контакты, но и расписать полноценный график работы каждого филиала.

Подвал с расписанием работы

Дополнения для мобильных

К таким дополнениям можно отнести QR код или ссылки на AppStore и Google Play для установки официального приложения сайта.

пример подвала сайта

Кнопки социальных сетей

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

Пример футера сайта

Стрелка вверх ↑

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

Мы же с вами знаем, какими длинными сейчас могут быть страницы сайтов… Или возьмем сайты с бесконечной прокруткой (пример лента вконтакте).  Поэтому, человек должен иметь возможность вернуться к началу из любой точки и в любой момент времени.

Поэтому стрелки сейчас не располагают в подвале, а делают их плавающими по странице.

Заключение

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

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

А у меня все.