From Figma to React Native using Specify

• parsers

  10 111 6.8 TypeScript

  Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.

  

For each rule we can use a different filter, such that the rule only applies to certain types of design tokens. Next to filters, we can also use parsers, which will manipulate the raw design tokens (which are in JSON format) and output a format that suits the programming language and platform more. Parsers behave like a pipeline, where each parser receives the input of the previous one. There are a lot of parsers to choose from, some perform very low level transformations such as round-number and camelcasify, but also full-blown parsers to a single technology such as to-tailwind and to-react-native.

• svgo

  29 20,349 9.0 JavaScript

  ⚙️ Node.js tool for optimizing SVG files

  

For SVG's, we can use the svgo parser, which optimizes the SVG code and outputs a minified result. The default svgo settings are pretty good, but we add removeDimensions to make them responsive and replace the hard coded colors with "currentColor" such that we can color them with React Native styles.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-native-svg-transformer

  3 1,495 8.0 JavaScript

  Import SVG files in your React Native project the same way that you would in a Web application.

All vector assets in theme.js are imported directly. If you are not using Expo, you will need to install and configure react-native-svg-transformer to resolve the import statements.

• react-native-linear-gradient

  5 4,796 6.9 Java

  A <LinearGradient /> component for react-native

  

The to-react-native parser transforms gradients into a format which is easy to use with react-native-linear-gradient. Example usage:

Suggest a related project