Speed through your workflow with Lilac Studio, a tiny but powerful UI System

Solving the problem: consistent, updatable styling that’s adaptable for any mobile screen size

You’ve designed countless UIs, from mobile Commerce to social apps, but haven’t found a way to create a system that can translate across multiple projects. As you stare at those 50+ screens that you designed for iPhone, your now struggling to figure out how to translate those same designs to a smaller or larger device, in a timely yet efficent manner. Of course, you’ve nailed down the export feature in Sketch for various resolutions, but that doesn’t get you to the finishline of seeing an updated UI, on a iPad, quickly and easily, and that’s where Lilac Studio comes in.

What is Lilac Studio?

Lilac Studio is what we call a UI system. A high quality UI kit that not only gives you screens and styles, but nested components that can be easily interchangable and scalable across various screens. Lilac Studio not only gives you the foundation to walk, but the know how to run through a new project quickly and easily. Nested components allows us to simplify our symbols to be flexible enough to be reused across various functional areas.

A UI Kit at its core, but much much more…

So let’s say that you want to create a symbol that can translate across multiple screens, for various purposes. How would you go about creating a symbol that not only doubles as a navigational element but also for form input and tables? Want to allow for responsiveness too? Sounds complicated? Well it could be. Check this out…

Input Fields that resize in Sketch? No Way.

Yes..way, in many ways the Lilac Kit allows for various customizations, including resizing input fields within your designs while keeping the aspect ratios of symbols as they should be, all while utilizing standard Sketch abilities (no plugin needed).

Brand colors from the style guide filters down to components, icons, field states, and backgrounds etc.

Want to show an error state with or without an icon? Done.

We weren’t kidding. An input field that resizes, along with the flexibility to change colors of any icon on the fly

Tables that can change to fields and back again

Nested tables with interchangable overrides, plus the same flexibility that comes with the above input example gives you a powerful way of adjusting things on the fly. Below is an example of the same table component, being utilized with various overrides from icon to text to color. This give designers the flexibility of creating different functional elements without having to create them separately.

A Table component with various combinations. The ability to spawn icons, change colors of them, and mix and match them in a way that gives you flexibility. Even change them to input fields of their own.

That’s all well and good, but what about content?

Within the 40+ high fidelity mockups we’ve included examples of articles, blog entries, and other content that uses the Lilac component library. Every card has its own variety of combinations, including but not limited to CTAs, icons plus text combinations, feed examples and much more. Mix and match to your hearts content.

Same Content, 3 different components. Select a new card style, and populate. You can even change the bg color of some of the block cards.

Every icon has the ability to change to any brand color from the style guide, including black/white opacity percentages that we’ve already included for you.

I only see one screen size, how does this translate to iPhone X and iPad?

*Insert evil laugh*

Not only is each component resizable, but if you change the size of your artboard to match a different screensize, we’ve already included the native resizing ques from Sketch to adjust appropriately. Now, you have the same iphone screen, across 3 different devices with little to no adjustments necessary.

One of our Sign Up screens resized by using two two clicks. Duplicate + select iPhone X or iPad from size menu in Sketch.

When to expect the release and how much will it cost?

We are finishing the final touches of the Lilac 1.1 Kit this week and releasing the update shortly after. For $35.00, you will receive the kit plus any additional updates to Lilac Studio. We plan to continue to update our component library as well as add even more screens.

What’s included in the 1.1 release:

• 40+ Screens of High Fidelity Mockups (not just wireframe, these designs are ready to go)
• 40 Icons
• 7 Categories
• Nested Components
• Editable Styles for Color and Typography
• Editable Styleguide that syncs across all screens
• Responsive symbols with native Sketch resizing
• Updates! (whenever we push a new update, screens or components for this dedicated kit, you’ll receive it no questions asked)

Want to find out when we release, follow us!