ITИглика Трифонова

SOFTUNI CREATIVE · FIGMA CASE STUDY

Виж Figma ↗

ПЪРВИЯТ МИ ЦЯЛОСТЕН FIGMA ПРОЕКТ · ФЕВРУАРИ 2026

SLEEPGO

Проектът, с който за първи път превърнах една идея в цял потребителски път — от търсенето на място до успешната резервация.

РОЛЯUI/UX DesignerИНСТРУМЕНТFigmaРЕЗУЛТАТ6.00 / 6.00
Началната страница на Sleep Go с нощна карта и форма за търсене
01 HOME PAGE · REAL FIGMA SCREEN

ТУК ЗАПОЧНА
МОЯТ ПЪТ
ВЪВ FIGMA.

Sleep Go е първият проект, в който не просто нарисувах отделен екран, а трябваше да мисля за цяла система и за човек, който преминава през нея.

Избрах тема за пътуване, защото тя ми даде възможност да работя едновременно с емоция и с ясна задача. Исках преживяването да започва с мечтата за ново място, но да води спокойно към практичните решения: къде, кога, за колко души и как да резервирам.

В началото всяко решение беше ново за мен — от именуването на слоевете до Auto Layout, variants и prototype connections. Точно затова този проект е толкова личен: в него се вижда моментът, в който започнах да мисля не само как изглежда един интерфейс, а как работи.

ЗАДАЧА

Хотелска платформа

Desktop преживяване за откриване, сравнение и резервиране на места за нощувка.

ПОТРЕБИТЕЛ

Човек, който планира

Потребител, който иска бързо да избере дестинация, дати, гости и подходящ хотел.

МОЯТА ЦЕЛ

От идея до поток

Да свържа екраните, компонентите и интеракциите в последователен работещ сценарий.

УЧЕХ,
ДОКАТО
ИЗГРАЖДАХ.

Подреждах проекта стъпка по стъпка. Всяка нова техника във Figma веднага намираше място в реален екран и така постепенно създадох цялостен workflow.

  1. 01
    Структура и идея

    Определих основния сценарий: търсене → избор на хотел → профил → плащане → потвърждение.

  2. 02
    Styles и библиотека

    Създадох цветове, текстови стилове и компоненти, за да не повтарям ръчно едни и същи решения.

  3. 03
    Auto Layout

    Подредих полета, бутони, карти и секции с последователни отстояния и по-лесна редакция.

  4. 04
    Components и variants

    Изградих повторяеми елементи и варианти за различните състояния в потока.

  5. 05
    Prototype

    Свързах екраните с интеракции и анимации, така че целият сценарий да може да бъде изпробван.

ОСНОВЕН ПОТОК

Начало→Хотел→Вход→Плащане→Готово

НОЩНО
ПЪТУВАНЕ.
ЯСНИ ДЕЙСТВИЯ.

Комбинирах лилавото с меки сиви повърхности и топъл слънчев акцент. Така визуалният свят остава мечтателен, а важните действия са лесни за разпознаване.

Journey Purple#944C9A
Deep Mauve#755468
Soft Lavender#EAD9EC
Sun Accent#F3A83B
Travel Grey#6B7280

КОМПОНЕНТИ ОТ ПРОЕКТА

Една библиотека,
много свързани екрани.

Повтаряемите search полета, бутони, hotel cards и header варианти ми помогнаха да запазя еднакъв ритъм в целия проект и да правя промени по-уверено.

8 px radius Purple border Clear states

ТИПОГРАФИЯ

Inter

Четима основа за търсене, информация, цени и действия.
DISPLAY / 40Твоето идеално място.BUTTON / 24Виж офертаBODY / 16

Ясна йерархия и последователни стилове.

ОТ ТЪРСЕНЕТО
ДО РЕЗЕРВАЦИЯТА.

Това са реални кадри от Figma файла. Оставям ги видими в детайл, защото те показват не само финалната визия, а и целия път, който изградих.

ОТКРИВАНЕ · HOMEОтвори ↗
Началната страница на Sleep Go от Figma
01

ОТКРИВАНЕ · HOME

Начало и търсене

Исках още от първия екран човекът да усети пътуване. Затова поставих картата и нощните светлини като сцена, а трите основни избора — дестинация, дати и гости — събрах в една видима точка под лупата.

СРАВНЕНИЕ · HOTELОтвори ↗
Детайлна страница на хотел в Sleep Go
02

СРАВНЕНИЕ · HOTEL

Хотелски детайл

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

ДОВЕРИЕ · ACCOUNTОтвори ↗
Екран за вход или регистрация в Sleep Go
03

ДОВЕРИЕ · ACCOUNT

Вход и профил

Направих входа като спокойна междинна стъпка, а не като бариера. Подредих имейла, алтернативните опции и връщането назад в ясна вертикална йерархия.

ФИНАЛНИ СТЪПКИ · CHECKOUT

От плащане
до уверен финал.

За края на потока направих отделни екрани за данните на картата и за успешната поръчка. Така човекът получава ясна обратна връзка, че действието е завършено.

Екран за плащане в Sleep Go
04 · ПЛАЩАНЕ
Потвърждение на резервацията в Sleep Go
05 · ПОТВЪРЖДЕНИЕ

РЕЗУЛТАТ

6.00/ 6.00

SoftUni Creative · Figma - February 2026

Какво взех със себе си

Този проект ми даде основата, върху която продължих да надграждам: да структурирам файловете си, да работя с компоненти, да мисля в потоци и да проверявам не само красотата, а и логиката на екрана.

Днес бих опростила част от детайлите и бих разработила прототипа с още по-пълна функционалност. Но точно това прави Sleep Go ценен за мен — той показва откъде съм започнала и колко много съм научила след първата си стъпка.

Коментар (изпит практика)

Проектът е реализиран във Figma, добре структуриран, всички компоненти и слоеве са организирани по добри практики. Потребителят може да премине през всички етапи без проблем. Стиловете са създадени и добре организирани, библиотеката съдържа варианти за компоненти и всички нужни стилови елементи. Уъркфлоу съдържа подравнени елементи с autolayout и правилни отстояния между компонентите. Прототипът съдържа интеракции и анимации, но може да се подобри функционалността му. Финалните файлове са подготвени правилно и съдържат линкове към работния файл и прототипа.

Сертификат Figma - February 2026 с оценка 6.00 от 6.00

SOFTUNI CREATIVE · СЕРТИФИКАТ

ПЪРВАТА
ГОЛЯМА
СТЪПКА.

Курсът завърших с максимална оценка. Сертификатът е издаден на 17 март 2026 г. и включва Introduction to Figma, Styles & Components, User Journeys и Prototyping Interactions.

Отвори сертификата ↗Провери валидността ↗