In addition to using the point-and-click settings panel for styling components in the Wireframe editor, also CSS code can be directly used for designing complex styles of supported components.
At the time of this article, the following components have support for CSS code:
- Button
- Rectangle
- Text
- Image
- Label
More components will be continuously updated for CSS styles.
Example 1: Add a gradient color for a Text component using CSS.
1Select the text component in the editor.
2In the settings panel, scroll down to the 'Custom CSS' section.
3Type in the CSS code for adding gradient color to text.
Hope the above example guides you on how to apply styles with CSS code to components in the editor. The CSS code is saved as part of the component which means it behaves just like any other property of the component during undo, redo, duplicate, or saving the component to an UI pack.
The possibilities are endless using CSS. As it supports almost all modern CSS properties and styles. Here are some advantages of using CSS code with components:
- Designers/Developers will find it faster to design with direct CSS code
- Ability to design components with styles not found in the settings panel
- Developers can export CSS code using specs mode for faster handoff
- CSS code can be added to existing wireframes
- This feature is component-based, so it is saved with components and UI packs
- Copy-paste CSS code to your UI idea from zillion resources around the web that have shadow examples, and gradient palettes like UIgradients.io to name a few
