Armel-x Studio - From Figma to Deploy
From idea to digital product. Explore every stage of how we build.
See how we combine strategy, Product Design, Design Systems, software engineering and artificial intelligence to turn challenges into digital solutions.
Pages
- Login
- Dashboard
- Projects
- Reports
- Mobile
Desktop - 1440
Mobile - 390
Properties
- Component
- Card / Metric
- Radius
- 8px
- Padding
- 24px
- Accent color
- brand-orange
SimulationDemo screens of a fictional product, the Armel-x Studio Demo.
Creation process
Seven stages, from understanding to continuous evolution.
Pick a stage to see what happens in it, how it looks in practice and what you get at the end.
Stage 01 - Discovery
We understand your business before designing solutions.
We talk to the people who decide and the people who use, organize what is already known and find where the real problem is.
What we do
- Briefing
- Product Discovery
- Stakeholder interviews
- User research
- Journey map
- Personas and segments
- Product hypotheses
Possible deliverables
- Briefing
- Problem map
- Opportunities
- Initial requirements
- Hypotheses to validate
The team wastes time updating project spreadsheets.
See the progress of every project in one place.
A dashboard with status and deadlines cuts alignment meetings.
Project manager, works on desktop and on mobile.
- 😐Discovers
- 🙁Signs up
- 🙁Tracks
- 😐Reports
- 🙂Decides
Pain points become product opportunities.
Design System
Design System: visual consistency in every detail.
We organize patterns, components and interface rules to build digital products that are consistent, accessible and ready to evolve.
The examples below use the real tokens and components of this website.
Foundations
Colors and tokens
- brand-orange#ff6a00
- brand-orange-dark#d94f00
- background#0d1117
- card#161b22
- secondary#21262d
- success#22c55e
- warning#f59e0b
- error#ef4444
Typography - Ubuntu
- HeadingDigital products
- SubheadingDesign and engineering
- BodyClear, accessible interfaces.
Spacing
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
Corner radius
Buttons, cards and fields share the same radius.
Breakpoints
- sm640px
- md768px
- lg1024px
- xl1280px
Components
Components
View on
On a product screen
Component
Button
Variants
Primary, Secondary, Text
Tokens used
- brand-orange
- primary-foreground
- --radius
- border
Implementation example
<Button variant="primary">Request a quote</Button>Artificial intelligence
Artificial intelligence speeds up execution. Our team sets the direction and ensures quality.
AI supports several stages of the work. The Armel-x team decides, reviews and is accountable for the result.
Discovery
Organizing information, synthesis and requirements analysis.
UX/UI Design
Exploring alternatives, heuristic analysis and documentation support.
Design System
Documentation, spotting inconsistencies and support for standardization.
Development
Assisted code generation, refactoring, documentation and tests.
Quality
Help finding issues and preparing test scenarios.
DevOps
Help writing and reviewing scripts, configuration and automation.
Armel-x teamStep 1 of 5: Request
The team describes what needs to be done.
Build the dashboard project card, following the Design System.
Demo with fixed content. No AI model is called on this page.
Your next digital product starts with a good strategy.
Count on Armel-x Tecnologia to turn your idea into a digital solution that is well planned, well designed and ready to evolve.
Share this presentation
Send this link to the people involved in deciding on your project.