Feria - Mobile design system for Sketch

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!

Design Systems best practices

Following Design Systems best practices, Feria - Mobile design system for Sketch uses a consistent naming convention and optimum organization in all of its symbols, text styles, and layer

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.



Because 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.

Atoms included in this product:
  • Text
  • Select
  • Tags
  • Range
  • Radio
  • Switcher
  • Icons
  • Typography
  • Text styles
  • Color palette
  • Shadows
  • Buttons



Components refers to different UI elements consistently applied throughout a product such as inputs, toggles, buttons, selects and tooltips.

Components included in this product:
  • Form groups
  • Status Bar
  • Search bar
  • Map
  • Tag cloud
  • Number incrementer
  • Rating



Patterns 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.

Patterns included in this product:
  • Navigation bar
  • Cards
  • Category header
  • Category item
  • Side menu
  • Tabbed navigation


Templates are the final, purposeful product output from combining our components and patterns - a beautiful, logical UI.

No Templates included at the moment.



Templates ultimate form, communicating your brand and product.

Layouts included in this product:
  • Splash screen
  • Login
  • Register
  • Categories
  • Listing
  • Filters
  • Map listing

Tons of versatile components and sample layouts ready to be arranged and combined to perfectly fit your mobile app design requirements. Pay once, get free updates forever.

Try before you buy

Check out the wide range of symbols, elements and screens included in Feria Design System’s Design system here. Find out more from our helpful user guides.


Who should use it?

UX architects

UI Designers

Product managers

who want to enhance their wireframes


who don’t want to get involved with design

Everyone 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!

Ongoing improvement

Feedback is always welcome and appreciated, drop us a line and help us grow and create what you need and desire


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.


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