Feria - Mobile design system for Sketch
Design Smarter
Feria - Mobile design system for Sketch is developed around Sketch nested symbols to bring you a leading edge mobile Design System. Use it as boilerplate on every app to speed up your workflow by hundreds of hours, making you infinitely more efficient and consistent.
Let’s talk about baking for a moment. With all the ingredients for pancakes, you could also choose to make cupcakes, a birthday cake or even a wedding cake.
The Atomic Design methodology is based on a “system” of building blocks that are basically everything that goes into making a page, design or visual. These tiny pieces can be mixed and matched however you like to design endless variations for your project the same way ingredients can be flexibly customized to create whatever you feel like baking. Simple, right?
Design Systems give you the power to handle design at scale. Crafted on atomic design methodology principles, they are a tool to simplify the ways your team designs and builds projects. Design Systems are atomic design methodology objectified.
Sketch is full of techniques and features to make building a design system infinitely simple. Actually, Sketch is the BEST way to take your design system to the next level.
For those of you interested in finding out more about how nested symbols and symbol overrides help you do this, we have a new blog post in progress that should be ready soon. Make sure you subscribe so we can send you this the second it’s ready!
Atomic Design Elements
Feria Design System follows Atomic Design principles, we’ve made sure there are infinite ways to modify, customize and adapt your designs with this incredible design system.
In the same way that everything in nature is created from smaller building blocks, atomic design is made up of five levels.
Each of the components that go into a level are built from the ingredients of the layer before, from Atoms, through Molecules, Organisms and Templates to Pages.
Atoms
FoundationsBecause Symbols, Shared Styles and Text styles that go into Sketch can be seen as Atoms, Sketch is the perfect app for you to apply atomic design standards to your work.
- Text
- Select
- Tags
- Range
- Radio
- Switcher
- Icons
- Typography
- Text styles
- Color palette
- Shadows
- Buttons
Molecules
ComponentsComponents refers to different UI elements consistently applied throughout a product such as inputs, toggles, buttons, selects and tooltips.
- Form groups
- Status Bar
- Search bar
- Map
- Tag cloud
- Number incrementer
- Rating
Organisms
PatternsPatterns refers to elements appearing consistently throughout a product or design, and include cards, tables, empty or loading states, alerts, modals, notifications and navigation. Patterns can contain components and are easily matched with one another to create a template.
- Navigation bar
- Cards
- Category header
- Category item
- Side menu
- Tabbed navigation
Templates
Templates are the final, purposeful product output from combining our components and patterns - a beautiful, logical UI.
Pages
LayoutsTemplates ultimate form, communicating your brand and product.
- Splash screen
- Login
- Register
- Categories
- Listing
- Filters
- Map listing
Who should use it?
UX architects
UI Designers
Product managers
who want to enhance their wireframes
Developers
who don’t want to get involved with designEveryone wins from better collaboration and more efficient workflows
Through great design, we can speak to each other. When we’re all on the same page, we get more done.
How will it help you?
One of the main selling points of design systems is their ability to ease your workflow by bringing a new level of efficiency to your company or project.
Every part of this design system is carefully crafted to achieve something great. The way we’ve followed best practices, naming conventions, folder and layer structure, shared styles and symbols, even colours - everything works seamlessly together to make you a more efficient and confident designer.
Adapt styles in a breeze
We’ve developed multiple text and layer styles for you to speed up your work. Simply customize and adapt them as you want. Just change the font once and it changes everywhere!
Centralized color palette
Automatically adjust all linked components simultaneously. Free yourself from manually changing each element’s colour!
Super-powered Sketch Symbols
Symbols are combined to create new symbols, that allows you to override just about anything! Colors, text, icons, shapes, possibilities are endless.
Up your game with Auto Layout!
We are so proud of Auto Layout at Feria Design System, we’ve made it super-simple to pin and stack content. Each artboard is developed in a way that lets you alter its size, and everything on your artboard will adapt alongside!
You can adjust everything
Delete, adapt, change, improve! Make controls larger or smaller or get rid of them altogether however you want.
Designed to boost collaboration
Share your design system specs with developers
Zeplin assures flawless communication between designers and developers. Spend less time in meetings and more time designing by collaborating with this powerful tool. Find out more at: https://zeplin.io/features#developer
Collaborate with your design team
Feria design system is the ideal way to ensure your designs are perfectly consistent throughout your team. A sleek, powerful, cutting-edge style guide and smart library that keeps components in order.
Social proof
Industry leaders like Uber, IBM and AirBnB have adopted their own design systems into how they design their digital products. These early adopters have managed to boost the speed of design and hundreds of organizations worldwide have joined us. Follow this link to see a list of companies using Design Systems.
Check out this post to understand why everyone is crazy about Design Systems!
Feedback is always welcome and appreciated, drop us a line and help us grow and create what you need and desire
YEAH, BUT ...
How does it make me faster?
By preparing all the buttons, check boxes, text fields and all the ingredients that go into each design project, we’ve made sure you’re able to quickly adapt them to suit your brand. In a few minutes you’ll be ready to design screens, like your personal sous chefs we make sure you can be cooking in no time!
Sketch isn’t one of my strengths
Don’t worry! Feria design system is crafted to take the hassle out of customizing symbols. It’s AMAZINGLY simple, straightforward enough for newbies and robust enough for professionals. Whether you’re working in a large project design team or an independent designer, Feria will transform your design techniques to unlock your talents.
Roadmap
This is just a BETA version of Feria UI Design. We are working hard to build a complete and beautiful design system. We would love to hear your feedback. Currently we are working on the following:
- Add Text styles
- Add Style guide
- Improve color palette
- Add templates